前后端分离Nginx部署解决方案
转自：https://www.yuque.com/dukang-hfttn/mo27v1/po8zc3
一、获取前端代码编译发布步骤
获取FE前端源码
安装Nodejs 最新版，Nodejs官网下载地址：https://nodejs.org/zh-cn/download/
执行cnpm install/npm install安装项目依赖
执行npm run build构建编译生成dist文件该文件即为【项目发版代码】
二、服务器安装部署
硬件要求：1U2G20G(服务器最低配置)
安装Nginx
将代码放置在你认为合适的目录该目录为Nginx server 中需要执行项目的路径【参考下面配置示例】
Nginx server中需要如下配置
三、解决vue使用的是vue-router的history模式时需要此配置
location / {
try_files $uri $uri/ /index.html;
}
// 5.由于项目为前后分离部署需要为前端提供接口调用使用
// Nginx server需要proxy如下配置 ，proxy 指向地址为后端服务地址
// 配置proxy代理路径 可以配置多个proxy
location ~ /api/ {
proxy_pass http://api.xxxxx.com;//此地址为后端API服务器地址
}
或
location ~ /api/ {
proxy_pass http://api.xxxxx.com:8081;//此地址为后端API服务器地址
}
// Nginx server 配置示例如下：
server {
listen 80;//此为端口配置
server_name localhost;//此为网站域名配置
set $root_path ‘/opt/fe-code/dist’;//此为项目代码路径配置
root $root_path;
index index.html index.htm index.php;
try_files $uri $uri/ @rewrite;
if ( $host ~* (.).(.).(.) ) {
set $domain KaTeX parse error: Expected 'EOF', got '}' at position 15: 1; }̲ … /index.php?_url=/KaTeX parse error: Expected 'EOF', got '&' at position 2: 1&̲_ename=domain;
}
location ~ ^/(css|img|js|flv|swf|download)/(.+)$ {
root $root_path;
}
#解决vue使用的是vue-router的history模式时刷新页面出现404的问题
location / {
try_files $uri $uri/ /index.html;
}
//此为proxy 配置地址为API请求地址 proxy /api/ 为正则匹配路由如果匹配到则跳转到后端服务，否则走前段路由
location ~ /api/ {
proxy_pass http://api.xxxxx.com;//此地址为API请求地址
}
//此为proxy 配置地址为API请求地址 proxy /upload/ 为正则匹配路由如果匹配到则跳转到后端服务，否则走前段路由
location ~ /upload/ {
proxy_pass http://127.0.0.1:8080;//此地址为API请求地址
}
location ~ /.ht {
deny all;
}
}
