Linux 使用nginx部署iview-admin项目

一、准备工作

确保Linux服务器配置好了环境，如不知道如何配置，请参考下面

Nginx：https://blog.csdn.net/Wjhsmart/article/details/86093892

Nodejs：https://blog.csdn.net/Wjhsmart/article/details/86087016

二、开始部署

1、进入项目的目录，编译项目

# 进入项目
cd ~/Documents/my-project
# 编译项目
npm run build

2、编译之后在项目的目录下会生成一个dist文件夹，执行下面命令打包dist文件(确保当前在项目的目录下)，或者使用Finder找到项目位置，在dist文件夹上面右键，压缩dist

zip dist.zip dist

3、执行下面命令把dist.zip远程复制到Linux服务器

scp dist.zip [email protected]:/zywork-project/zywork-app-ui/dist.zip

4、登入服务器，进入到上传文件的目录，对dist.zip解压

unzip /zywork-project/zywork-app-ui/dist.zip

5、配置nginx.conf配置文件

# 进入到nginx的安装目录
cd /usr/local/nginx/nginx-1.15.8/conf
# 编辑配置文件
vi nginx.conf

在http:下面加上：include vhost/*.conf; 表示每个项目单独配置,方便管理

保存配置文件，在conf文件夹下面建立vhost文件夹,再在vhost 下面建立zywork-app-ui.conf 放入一下内容:

# 新建vhost文件夹，并进入vhost
mkdir vhost && cd vhost
# 新建一个zywork-app-ui.conf文件
vi zywork-app-ui.conf

把server {...}的内容全部删掉，然后在zywork-app-ui.conf文件中插入下面内容

server {
    listen 8080; # 项目访问的端口号
    server_name 39.118.116.113; # 这里写域名或者ip
    index index.html index.htm index.php;
    root /zywork-project/zywork-app-ui/dist; #这里为项目所在的目录
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }
     
}

6、停止nginx，查看nginx的进程，找到master的进程号

# 查看nginx的进程
ps -ef | grep nginx
# 结束nginx的进程
kill 9382

7、启动nginx

# -c表示指定配置文件启动
nginx -c /usr/local/nginx/conf/nginx.conf

在浏览器访问，ip+端口号即可以访问项目

Linux 使用nginx部署iview-admin项目

猜你喜欢