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

Linux 使用nginx部署iview-admin项目_第1张图片

      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; 表示每个项目单独配置,方便管理

Linux 使用nginx部署iview-admin项目_第2张图片

      保存配置文件,在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

Linux 使用nginx部署iview-admin项目_第3张图片

7、启动nginx

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

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

你可能感兴趣的:(Linux,Linux,Vue,nginx)