Nginx 前端配置与二级路由详解

前端的 Vue React 项目打包后需要配置才能正常访问

前端配置

Vue 配置

module.exports = {
  publicPath:
    process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
};

React 配置

后面待补充

Nginx 常规配置

location / {
  try_files $uri $uri/ /index.html;
}

有些情况下需要配置二级路由

server {
  listen 80;
  server_name iot.commchina.net;

  location /admin {
    try_files $uri $uri/ /index.html = 404;
    alias /home/deploy/apps/admin_vue/current/dist/;
  }

  location /customer {
    try_files $uri $uri/ /index.html = 404;
    alias /home/deploy/apps/customer_vue/current/dist/;
  }
}

location ^~/A {
  alias /XX/A;//此处为A的路径
  index index.html;
  try_files $uri $uri/ /A/index.html;
}
location ^~/B {
  alias /XX/B;//此处为B的路径
  index index.html;
  try_files $uri $uri/ /B/index.html;
}
location /app-a {
  root   /app;
  index  index.html;
  try_files $uri $uri/ /app-a/index.html;
}
location ^~ /webapp {
   alias /var/www/myapp/build;
   try_files $uri $uri/ /webapp/index.html;
}
location /reactApp {
  root /var/www;
  index  index.html;
  try_files $uri $uri/ /reactApp/index.html;
}

笔记

访问路径为根域名：https://abc.com/

本地

1. router: base: process.env.NODE_ENV==‘development’ ? ’/’ : ’/’,
2. vue.config.js: publicPath: process.env.NODE_ENV==‘development’ ? ’/’ : ’/’,
3. axios baseURL: process.env.NODE_ENV == ‘development’ ? ‘/api’ : ‘/api’,

Nginx

方法 1

location ^~ /api/ {
  proxy_pass https://www.baidu.com/; # 转发地址
}

注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;

方法 2

location ^~ /api/ {
  rewrite  ^/api/(.*)$  /$1  break;  # 重写路径将  api 替换为空
  proxy_pass https://www.baidu.com/;后面 / 可加可不加;
}

解释：在 nginx 中配置 proxy_pass 时，当在后面的 url 加上了/，相当于是绝对根路径，则 nginx 不会把 location 中匹配的路径（/api）代理走;如果没有/，则会把匹配的路径也给代理走。

访问路径不是根域名：https://abc.com/demo/ 且不做 SLB

本地

1. router: base: process.env.NODE_ENV==‘development’ ? ’/’ : ‘/demo/’,
2. vue.config.js: publicPath: process.env.NODE_ENV==‘development’ ? ’/’ : ’/’,
3. axios baseURL: process.env.NODE_ENV == ‘development’ ? ‘/api’ : ‘/api’,

Nginx

方法 1

location ^~ /api/ {
  proxy_pass https://www.baidu.com/; # 转发地址
}

注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;

方法 2

location ^~ /api/ {
  rewrite  ^/api/(.*)$  /$1  break;  # 重写路径将  api 替换为空
  proxy_pass https://www.baidu.com/;后面 / 可加可不加;
}

访问路径不是根域名：https://abc.com/demo/ 要做 SLB，SLB 匹配路径是：https://abc.com/demo/

本地

1. router: base: process.env.NODE_ENV==‘development’ ? ’/’ : ‘/demo/’,
2. vue.config.js: publicPath: process.env.NODE_ENV==‘development’ ? ’/’ : ‘/demo/’,
3. vue.config.js: outputDir: ‘dist/demo’, //否则找不到静态资源
4. axios baseURL: process.env.NODE_ENV == ‘development’ ? ‘/api’ : ‘/demo/api’, //否则 nginx 不能转发请求的接口

Nginx

基础配置

location /demo {
  root /mnt/project/h5-cbi360-net/dist; //指定根路径
  index index.html index.html;
  try_files $uri $uri/ /demo/index.html;//history 路由配置，此处的 /demo 必须写在此处，不能写到上面 root 后面
}

方法 1

location ^~ /demo/api/ {
  proxy_pass https://www.baidu.com/; # 转发地址
}

注意：proxy_pass https://www.baidu.com/; 后面要加 / 表示绝对路径;

方法 2

location ^~ /demo/api/ {
  rewrite  ^/api/(.*)$  /$1  break;  # 重写路径将  /demo/api 替换为空
  proxy_pass https://www.baidu.com/; # 后面 / 可加可不加;
}

解释：具体的配置与本地项目有关系，与 nginx 配置有关系，与 SLB 配置有关系，与访问路径是否是根域有关系。

带 / 和不带 / 的区别

URL 参数原则

• URL 必须以 http 或 https 开头；
• URL 中可以携带变量；
• URL 中是否带 URI，会直接影响发往上游请求的 URL；

接下来让我们来看看两种常见的 URL 用法：

• proxy_pass http://192.168.100.33:8081
• proxy_pass http://192.168.100.33:8081/

这两种用法的区别就是带 / 和不带 /，在配置代理时它们的区别可大了：

不带 / 意味着 Nginx 不会修改用户 URL，而是直接透传给上游的应用服务器；可以理解为相对路径； 带 / 意味着 Nginx 会修改用户 URL，修改方法是将 location 后的 URL 从用户 URL 中删除；可以理解为绝对路径；

不带 / 的用法：

location /bbs/{
  proxy_pass http://127.0.0.1:8080;
}

分析

用户请求 URL： /bbs/abc/test.html 请求到达 Nginx 的 URL： /bbs/abc/test.html 请求到达上游应用服务器的 URL： /bbs/abc/test.html

带 / 的用法

location /bbs/{
  proxy_pass http://127.0.0.1:8080/;
}

分析

1. 用户请求 URL： /bbs/abc/test.html
2. 请求到达 Nginx 的 URL： /bbs/abc/test.html
3. 请求到达上游应用服务器的 URL： /abc/test.html

Nginx 虚拟目录 alias 和 root 目录

nginx 是通过 alias 设置虚拟目录，在 nginx 的配置中，alias 目录和 root 目录是有区别的：

1. alias 指定的目录是准确的，即 location 匹配访问的 path 目录下的文件直接是在 alias 目录下查找的；
2. root 指定的目录是 location 匹配访问的 path 目录的上一级目录，这个 path 目录一定要是真实存在 root 指定目录下的；
3. 使用 alias 标签的目录块中不能使用 rewrite 的 break（具体原因不明）；另外，alias 指定的目录后面必须要加上”/“符号！！
4. alias 虚拟目录配置中，location 匹配的 path 目录如果后面不带”/“，那么访问的 url 地址中这个 path 目录后面加不加”/“不影响访问，访问时它会自动加上”/”； 但是如果 location 匹配的 path 目录后面加上”/“，那么访问的 url 地址中这个 path 目录必须要加上”/“，访问时它不会自动加上”/“。如果不加上”/“，访问就会失败！
5. root 目录配置中，location 匹配的 path 目录后面带不带”/“，都不会影响访问。

举例说明（比如 nginx 配置的域名是 www.wangshibo.com）：

示例一

location /huan/ {
   alias /home/www/huan/;
}

在上面 alias 虚拟目录配置下，访问 http://www.wangshibo.com/huan/a.html 实际指定的是/home/www/huan/a.html。

注意：alias 指定的目录后面必须要加上”/“，即/home/www/huan/不能改成/home/www/huan

上面的配置也可以改成 root 目录配置，如下，这样 nginx 就会去/home/www/huan 下寻找 http://www.wangshibo.com/huan 的访问资源，两者配置后的访问效果是一样的！

location /huan/ {
  root /home/www/;
}

示例二

上面的例子中 alias 设置的目录名和 location 匹配访问的 path 目录名一致，这样可以直接改成 root 目录配置；那要是不一致呢？

再看一例：

location /web/ {
alias /home/www/html/;
}

访问 http://www.wangshibo.com/web 的时候就会去/home/www/html/下寻找访问资源。

这样的话，还不能直接改成 root 目录配置。

如果非要改成 root 目录配置，就只能在/home/www 下将 html->web（做软连接，即快捷方式），如下：

location /web/ {
  root /home/www/;
}

ln -s /home/www/web /home/www/html //即保持/home/www/web 和/home/www/html 内容一直

所以，一般情况下，在 nginx 配置中的良好习惯是：

1. 在 location /中配置 root 目录；
2. 在 location /path 中配置 alias 虚拟目录。

如下一例：

server {
listen 80;
server_name www.wangshibo.com;
index index.html index.php index.htm;
access_log /usr/local/nginx/logs/image.log;

    location / {
      root /var/www/html;
    }

location /haha { //匹配的 path 目录 haha 不需要真实存在 alias 指定的目录中
alias /var/www/html/ops/; //后面的"/"符号一定要带上
rewrite ^/opp/hen.php(._)$ /opp/hen.php?s=$1 last; # rewrite ^/opp/(._)$ /opp/hen.php?s=$1 last;
}

location /wang { //匹配的 path 目录 wang 一定要真实存在 root 指定的目录中（就/var/www/html 下一定要有 wang 目录存在）
root /var/www/html;
}

}

server {
listen 80;
server_name www.kevin.com;

      access_log  /data/nginx/logs/www.kevin.com-access.log main;
      error_log  /data/nginx/logs/www.kevin.com-error.log;


location / {
root /data/web/kevin;
index index.php index.html index.htm;
}

location /document/ {
alias /data/web/document/;
}

}

如上配置后，则：

访问 http://www.kevin.com/admin 就会找到/data/web/kevin/admin 目录

访问 http://www.kevin.com/document 就会找到/data/web/document 目录 (里面是一些静态资源)

后记

• https://www.cnblogs.com/kevingrace/p/6187482.html
• https://blog.csdn.net/tuoni123/article/details/79712246
• https://www.cnblogs.com/fengff/p/12015858.html
• https://dev.to/danielkun/nginx-everything-about-proxypass-2ona