nginx代理vue项目配置过程

log:

之前遇到的问题：nginx配置完成后访问后端接口404,问题解决在nginx里面配置后端请求地址代理，以及vue配置文件进行相关配置，详细过程如下（成功上岸流程）

环境：linux

安装nginx

前端vue3

后端Python+flask框架

一、linux下安装nginx

1、安装gcc

安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：

yum install gcc-c++

2、PCRE pcre-devel 安装

PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令：

yum install -y pcre pcre-devel

3、zlib 安装

zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。

yum install -y zlib zlib-devel

4、OpenSSL 安装

OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。

yum install -y openssl openssl-devel

5、下载安装包

手动下载.tar.gz安装包，地址：https://nginx.org/en/download.html

 

下载完毕上传到服务器上 /root

6、解压

tar -zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0

7、配置

使用默认配置，在nginx根目录下执行

./configure
make
make install

8、安装完成后，查看安装路径

 whereis nginx

二、vue项目操作

1.vue.config.js增加配置，如下：

 源码：

module.exports = {
  lintOnSave: false,
  devServer: {
    proxy: {
        "/api": {
            logLevel:"debug",
            target: "http://localhost:5555/",
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
  }

}

2.main.js配置请求根路径

 源码：

Vue.prototype.$axios = axios
// 配置请求的根路径 
axios.defaults.baseURL = "/api";

3.配置好后，执行前端打包：

npm run build

5.打包完成后，生成一个dist文件

 三、nginx配置

1.进入nginx安装目录，进行nginx.conf配置

 2.打开nginx.conf，增加两个配置信息

一个前端资源包的位置，另一个是后端代理的地址信息，这个proxy_pass配置的和vue项目vue.config.js里面的proxy配置的信息一样

 配置代码：

server {
            listen       8080;
            server_name  xx.xx.x.x;
            location /{
                root   /root/project/onlinevue/dist;
                index  index.html index.htm;

            }
            location /api{
               proxy_pass http://xx.xx.xx.xx:5555/;
               proxy_cookie_path / /api;
               proxy_redirect default;
               rewrite ^/api/(.*) /$1 break;
               client_max_body_size 500m;
            }

        }

3.配置完成后，进到sbin下

 执行 ./nginx 启动nginx

4.启动成功后，在浏览器访问开放的请求地址就可以了