centos7 部署vue项目+反向代理

一、 安装Nginx

步骤1: 安装相关组件

默认需要 zlib、openssl 和 pcre 依赖包,其他组件可以根据自己需要选择安装。输入如下命令:

#安装组件

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

gcc:编译器组件,包括C、C++等
zlib:数据压缩库
openssl:https安全传输协议,默认没有打开
pcre:正则表达式库

步骤2:编译安装Nginx

官方网站下载最新 Nginx,线上环境最好下载最新稳定版本Stable version。默认安装路径:/usr/local/nginx

#获取nginx。如果未安装wget,使用 yum -y install wget
wget https://nginx.org/download/nginx-1.17.1.tar.gz

#解压,zxvf显示解压文件
tar zxf nginx-1.17.1.tar.gz

#进入nginx源文件目录
cd nginx-1.17.1

#编译,默认https没有打开,需要添加 --with-http_ssl_module
./configure --with-http_ssl_module

#安装Nginx
make && make install

#启动Nginx
/usr/local/nginx/sbin/nginx

步骤3:配置防火墙

#查看防火墙状态
firewall-cmd --state

#关闭防火墙
systemctl stop firewalld.service

#打开防火墙
systemctl start firewalld.service

#永久开放80端口
firewall-cmd --zone=public --add-port=80/tcp --permanent

#更新防火墙规则
firewall-cmd --reload

二、 上传项目

步骤1:打包项目

  1. 运行 npm run build 生成一个dist 文件并压缩备用 (zip格式)
  2. 进入 cd /usr/local/nginx/html 上传项目至服务器 输入命令 rz 选择桌面dist压缩包
    centos7 部署vue项目+反向代理
    3.配置文件访问路径,我的打包位置 publicPath: ‘/wxzf/dist/’, 打包文件相对路径 wxzf/dist
    /usr/local/nginx/html 路劲下面 mkdir wxzf 将刚刚解压的dist移动到wxzf路径下 mv dist wxzf
    此时用ip访问 既能打开项目,如果域名用域名访问也可以!!!!!!!!!!
    centos7 部署vue项目+反向代理
    可以看到项目已经能访问但是,接口404,这时要配置 nginx 反向代理,转发接口!!!

三、 配置nginx,反向代理

  1. 进入到配置目录 cd /usr/local/nginx/conf/
  2. 编辑默认配置 vim nginx.conf
  3. 在 serve 中配置
server {
    ....
    location  ~*^.+$ {         
        proxy_pass  http://mysvr;  #请求转向mysvr 定义的服务器列表         
    }
}

vim操作帮助:英文模式下
1.输入 i 进入编辑模式
2.按下esc 按下 : 输入 wq 保存退出

centos7 部署vue项目+反向代理
4.重启nginx

/usr/local/nginx/sbin/nginx -s reload   -- 重启nginx
上一篇:Ubuntu18+ROS安装配置


下一篇:Vue项目部署到云服务器