前后端分离Nginx部署解决方案

前后端分离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;

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieChan_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值