一、背景
部署vue到dev服务器
R2R_Web_Api采用的是前后端分离的部署,但dev环境部署在同一台机器
二、流程
登录服务器
此处不进行赘述
安装NGINX
- 安装编译器以及依赖的库文件
yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel
- 下载NGINX到本地
cd /usr/local && wget http://nginx.org/download/nginx-1.21.4.tar.gz
- 解压安装包
tar zxvf nginx-1.21.4.tar.gz
- 进入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
- 检查是是否安装成功
/usr/local/nginx/sbin/nginx -v
配置NGINX
- 找到并进入配置页
vim /usr/local/nginx/conf/nginx.conf
- 修改配置
注意:
- root指的是前端工程编译后存放的路径,这里我们的路径是/home/r2r/web
- index指的是定位到具体哪个页面,按照图中这么写即可
- server_name指的是工程访问路径,默认是localhost,这里写服务器的ip即可
- 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打包
- 打包vue
- 此工程设置的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博客