React 打包部署多级目录实践

背景

使用 react-create-app 创建项目，想实现打包后部署服务器的 3 级目录，经过多次调试跑通，并记录一下，方便自己后期使用，也方便其他伙伴有相同需求可以参考。

服务端部署后的域名及路由预期：
http://www.demo.com/webapp

想通过访问域名 */webapp 直接访问到 build 下的文件

本地的项目结构如下，项目目录是：webapp

- build（打包后目录）
  - index.html
  - static
  - ……（省略若干不重要的文件）
- src（开发目录）
  - components（自定义组件）
  - routes（路由）
    - index.tsx（路由文件）
  - ……（省略若干不重要的文件）
- package.json
- ……（省略若干不重要的文件）

主要配置 3 个点

1. Router 设置 basename

重点是设置属性：basename = "/webapp"

import App from '../App';
import Home from '../components/home';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Router = () => {
  return (
    
      
        } />
        } />
      
    
  );
}

export default Router

2. package.json 设置

package.json, 增加配置项：“homepage": "/webapp/dist/"

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "homepage": "/webapp/dist/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ……
}

3. Nginx 服务端配置

服务器使用了 Nginx，所有需要配置这里

server {
  listen       80;
  server_name  www.demo.com;
  root         /var/www;
  index        index.html;

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

服务端的目录结构

- var
  - www
    - webapp
      - build（打包后上传的目录）
        - index.html
        - static
        - ……（省略若干不重要的文件）

我大致总结一下我对于整个流程的理解

第一步：Nginx 定位入口文件

当访问域名 http://www.demo.com/webapp，其实是 Nginx 接管的，当匹配到 /webapp 时，会找到 /webapp/build/index.html 入口文件

第二步：homepage 定位静态资源（.js、.css ……）

当 index.html 开始加载各种静态资源时，就会在 homepage 对应的目录下去找到资源 /webapp/build。可以理解，如果不做这个配置，默认会到服务器的根目录去找资源的。

第三步：Router 路由的根路径

上两步分别找到了项目目录、资源目录，这一步是配置路由根路径，即：路由根路径从哪里开始，从而匹配对应的组件显示。这一步其实跟前两步配置相关的，因为只有匹配到了项目目录，找到了入口文件和 js 文件，才能轮到路由功能。可以理解为，路由生效的根路径，你也可以把 router 的 basename="/webapp" 改为：basename="/webapp/build"，我亲测是同样生效的，但不能改变第一级 webapp ，因为它用来匹配 nginx 和 homgpage 的。可以理解为，路由生效的根路径。