前后台Nginx部署同域名路径区分配置_Redis

这篇主要讲的是，前后台用同一个域名部署时，怎么通过不同路径来区分前台、后台的静态文件，还有api，应用程序编程接口）接口。另外也会适配vue router的history（历史）模式，保证页面刷新、路由跳转都正常，不报错。

1 nginx 核心配置

server {
    listen 80;
    server_name nature.us.com;  # 把这个改成你自己的域名
    root /usr/local/nginx/html;
    # 前台静态文件配置（访问根路径就是前台）
    location / {
        root /usr/local/nginx/html/client;  # 前台文件存在这个文件夹里
        index index.html;
        try_files $uri $uri/ /index.html;  # 解决vue router的history（历史）模式刷新404的问题
    }
    # 后台静态文件配置（访问/manger路径就是后台）
    location /manger {
        alias /usr/local/nginx/html/manger;  # 后台文件存在这个文件夹里
        index index.html;
        try_files $uri $uri/ /manger/index.html;  # 后台也解决vue router的history（历史）模式刷新404的问题
    }
    # api（application programming interface，应用程序编程接口）请求代理（访问/prod-api开头的路径，会转发到后端）
    location /prod-api/ {
        proxy_pass http://localhost:8080/;  # 改成你自己的后端服务地址，末尾的/千万别删
        proxy_set_header host $host;  # host（主机）请求头设置
        proxy_set_header x-real-ip $remote_addr;  # x-real-ip（真实ip）请求头设置
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;  # x-forwarded-for（转发ip列表）请求头设置
        proxy_set_header x-forwarded-proto $scheme;  # x-forwarded-proto（协议类型）请求头设置
    }
}

2 nginx 目录结构

下面是文件存放的目录结构，一看就懂：

nginx：
└── html：
    ├── client：  # 前台的静态文件都放这里，访问根路径就找这个文件夹
    └── manger：  # 后台的静态文件都放这里，访问/manger路径就找这个文件夹

3 前端配置（vue 项目）

3.1 后台项目配置（访问路径带/manger前缀）

1. vue.config.js 配置（给后台路径加个统一前缀/manger，和nginx配置对应上）：

module.exports = {
  publicpath: "/manger", // 后台所有路径都加/manger前缀，和nginx的/manger路径匹配
}

2. router.js 配置（去掉url（uniform resource locator，统一资源定位符）里的#，设置基础路径）：

export default new router({
  base: "/manger",  // 基础路径和上面的publicpath一样，都是/manger
  mode: "history",  // 去掉url（uniform resource locator，统一资源定位符）里的#，这个配置需要nginx配合上面的try_files才能用
  scrollbehavior: () => ({ y: 0 }),
  routes: constantroutes,
});

3.2 前台项目配置（api请求设置）

axios 配置（给api（application programming interface，应用程序编程接口）请求加个前缀/prod-api，和nginx的代理路径对应）：

import axios from 'axios'
// 创建axios实例，设置请求基础路径
export const request = axios.create({
  baseurl: "/prod-api",  // 所有api（application programming interface，应用程序编程接口）请求都带/prod-api前缀，和nginx的/prod-api路径匹配
  timeout: 5000,  // 请求超时时间，5秒没响应就报错
  headers: {
    "content-type": "application/json",  // content-type（内容类型）请求头，设置为json格式
  },
});
// 请求拦截器（举个例子：给请求加token（令牌），实现登录认证）
request.interceptors.request.use(
  (config) => {
    const token = localstorage.getitem("token");  // 从localstorage（本地存储）拿token（令牌）
    if (token) {
      config.headers.authorization = ` ${token}`;  // 把token（令牌）放到authorization（授权）请求头里传给后端
    }
    return config;
  },
  (error) => {
    return promise.reject(error);  // promise（承诺）是异步编程的解决方案，此处返回错误信息
  }
);
export default request;

4 配置说明（关键注意点，一定要看！）

路径匹配顺序：nginx是按location的配置顺序来匹配路径的，所以/manger（后台）和/prod-api（api，application programming interface，应用程序编程接口）的配置，一定要放在/（前台）的前面。不然所有请求都会被根路径拦截，后台和api（application programming interface，应用程序编程接口）就访问不到了。
vue history模式刷新404 ：之所以加try_files配置，就是为了解决刷新页面报404的问题。前台要配成/index.html，后台要配成/manger/index.html，必须和前面设置的base路径一致，不然没用。这里的history指的是vue router的history（历史）模式。
proxy_pass末尾的/别删：配置api（application programming interface，应用程序编程接口）代理时，proxy_pass后面的地址（比如http://localhost:8080/），末尾的/一定要保留。如果删掉，nginx会把/prod-api这个前缀一起传给后端，要是后端接口里没有/prod-api，请求就会报错。
前后端路径要对齐：前端配置的publicpath、router.base，必须和nginx里对应的location路径一致；axios的baseurl，也要和nginx的api（application programming interface，应用程序编程接口）代理路径一致。只要有一个对不上，就会出现访问不到页面、接口请求失败的问题。

到此这篇关于前后台nginx部署同域名路径区分配置的文章就介绍到这了,更多相关nginx同域名路径区分内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！