使用 Nginx 部署多个 React 项目

前言

最近需要重写一个已上线的 React 后台管理项目，但是这个项目比较久远，代码不规范，比较混乱，混杂了很多的 UI 框架，如 material-ui (一个叫 react-admin 的库用到了它)、reactbulma (可能是想丰富下 UI 组件)、antd 等，这让界面看上去风格很不统一，我接手时也一脸懵，不知道现在得用哪一个 UI 组件库。

所以，我提出了另起炉灶，重写项目的想法。为了让项目已上线的功能不受影响，我打算将新项目部署到域名的/v2/路径上，原来的项目依旧在/根路径上不受干扰，老项目重写好的功能通过location.replace('/v2/')方法跳转到新项目进行使用，新加的功能就直接在新项目上开发了。

新项目配置

新项目使用了create-react-app脚手架创建，那么，直接可以在package.json文件中添加homepage键：

{
  "name": "admin-v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "homepage": "/v2"
}

主要就是为了修改webpack打包时的publicPath配置，另外create-react-app也可以通过.env文件配置PUBLIC_URL环境变量来改变。

Nginx 配置

server {
    listen 80;
    listen [::]:80;
    server_name localhost;

    index index.html;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html =404;
    }

    location /v2/ {
        alias /usr/share/nginx/html_v2/;
        try_files $uri $uri/ /v2/index.html =404;
    }

    error_page 404 /;
}

新增了/v2的 location 配置块，让用户访问/v2/时使用新的项目。

新项目构建后build文件夹下的静态文件放在/usr/share/nginx/html_v2/下，使用alias代替了root关键字，当访问/v2/时会自动访问html_v2文件夹下的文件。

root和alias的区别

location /v2 {
    root /usr/share/nginx/html;
}

我们访问/v2，实际访问的是/usr/share/nginx/html/v2/；

我们访问/v2/index.html，实际访问的是/usr/share/nginx/html/v2/index.html。

可见，使用 root 会让 location 的路径加到 root 配置的路径后进行访问

location /v2 {
    # 必须以 / 结束
    alias /usr/share/nginx/html/;
}

我们访问/v2，实际访问的是/usr/share/nginx/html/；

我们访问/v2/index.html，实际访问的是/usr/share/nginx/html/index.html。

可见，使用 alias 会让访问 location 路径时就是访问的 alias 配置的路径，也就是一个别名

所以我们的场景下需要使用alias进行配置。

版权声明：

Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。

包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。

请尊重他人劳动成果，用爱发电十分不易，谢谢！

请注明出处：

本文出自：Anand's Blog

本文永久链接：https://anandzhang.com/posts/server/9