centos7 部署vue项目+反向代理

本文主要是介绍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压缩包
   
   3.配置文件访问路径，我的打包位置 publicPath: ‘/wxzf/dist/’, 打包文件相对路径 wxzf/dist
   在 /usr/local/nginx/html 路劲下面 mkdir wxzf 将刚刚解压的dist移动到wxzf路径下 mv dist wxzf
   此时用ip访问 既能打开项目，如果域名用域名访问也可以！！！！！！！！！！
   
   可以看到项目已经能访问但是，接口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 保存退出

4.重启nginx

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

这篇关于centos7 部署vue项目+反向代理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！