Javascript

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项目+反向代理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!