部署vue到dev服务器

一、背景

部署vue到dev服务器

R2R_Web_Api采用的是前后端分离的部署，但dev环境部署在同一台机器

二、流程

登录服务器

此处不进行赘述

安装NGINX

1. 安装编译器以及依赖的库文件

yum -y install make zlib zlib-devel gcc gcc-c++ libtool  openssl openssl-devel pcre pcre-devel  

1. 下载NGINX到本地

cd /usr/local && wget http://nginx.org/download/nginx-1.21.4.tar.gz

1. 解压安装包

tar zxvf nginx-1.21.4.tar.gz

1. 进入nginx目录进行安装

cd nginx-1.21.4

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-pcre  --with-http_ssl_module

make && make install

1. 检查是是否安装成功

/usr/local/nginx/sbin/nginx -v

配置NGINX

1. 找到并进入配置页

vim /usr/local/nginx/conf/nginx.conf

1. 修改配置

注意：

1. root指的是前端工程编译后存放的路径，这里我们的路径是/home/r2r/web
2. index指的是定位到具体哪个页面，按照图中这么写即可
3. server_name指的是工程访问路径，默认是localhost，这里写服务器的ip即可
4. listen指的是监听端口，这里取的是8888

开放端口防火墙

查看想开的端口是否已开：firewall-cmd --query-port=8888/tcp
添加指定需要开放的端口：firewall-cmd --add-port=8888/tcp --permanent
重载入添加的端口：firewall-cmd --reload
查询指定端口是否开启成功：firewall-cmd --query-port=8888/tcp
移除指定端口：firewall-cmd --permanent --remove-port=8888/tcp

配置反向代理

还是在nginx.conf中进行修改

vue打包

1. 打包vue

1. 此工程设置的outputDir为 '../www/WebApiDemo'，找到此本地路径，将WebApiDemo下所有丢到nginx.conf配置的root地址下，此工程为/home/r2r/web

启动/重启NGINX

指定配置文件启动

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 

停止NGINX

/usr/local/nginx/sbin/nginx -s stop 

重启NGINX

/usr/local/nginx/sbin/nginx -s reload

访问

ip+port即可，我们这里是http://192.168.1.40:8888/

三、参考文献

Centos 7下安装NGINX：Centos 7下安装NGINX - 简书

vue项目部署到服务器上：vue项目部署到服务器上_Cwiyc的博客-CSDN博客_vue部署到服务器

linux 中 查看防火墙开放端口号 命令：linux 中 查看防火墙开放端口号 命令_程序猿阿z的博客-CSDN博客

使用nginx反向代理实现vue项目打包部署上线：使用nginx反向代理实现vue项目打包部署上线_yw00yw的博客-CSDN博客