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

}

}

前后端分离Nginx部署解决方案相关推荐

前后端分离前端部署方案是什么？
这段时间,粉丝朋友会经常问到一个问题,即:前后端分离如何部署?前端部署方案是什么?虽然我们回复了很多次,但是依然有不少朋友有疑问.今天,小编就给大家整理出来,如果对这个问题感兴趣,就可以收藏起来随时查 ...
前后端分离项目部署（服务器或本地）
文章目录前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 后端部署(以Springboot项目为例) 补充前后端分离项目部署(服务器或本地) 前端部署(以vue项目为例) 部署环境 ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...
web前后端分离开发部署模式
web前后端分离开发部署模式在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/ ...
如何让kibana零等待时间升级插件（前后端分离的部署）
正如官方文档所自豪宣称的那样.Kibana更多的是一个平台,一个可以让插件独立开发,"独立部署"的可扩展性平台,可以让我们自由的发挥自己的想象力和能力,根据自己的需求往上添加原生K ...
若依前后端分离框架部署Linux服务器
若依前后端分离框架部署Linux服务器第一次使用若依框架进行部署Linux服务器,出现了很多的问题,也可能是自身对若依框架的不太熟悉导致接下来说一下我的部署第一步:首先我们把我们的前端打包,如果不 ...
前后端分离项目部署(部署在同一台服务器)
前后端分离项目部署(部署在同一台服务器) 博主现在参与的项目是前后端分离的,前端是用vue写的并用npm构建的,后端是用java写的用maven构建的,但是前端和后端在同一个项目中,之前的部署方式是前 ...
前后端分离nginx配置，同时解决跨域问题
背景现在,web开发的前后端分离技术越来越火爆,由于最近的公司官网使用了前后端分离的方案,这里就来记录一下前后端分离的项目部署.这里我们使用的前端框架是Vue.js,后台使用Laravel7提供数据 ...
若依前后端分离项目部署最简单的方式（推荐）
对应若依前后端分离项目来说,部署的方式有很多种: 第1种方式:可以将前端打包整合到后端部署第2种方式:可以使用tomcat部署(后端打war包+前端打dist包) 第3种方式:可以使用tomcat+ ...

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

前后端分离Nginx部署解决方案相关推荐

最新文章

热门文章