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