背景
使用 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 (
<BrowserRouter basename="/webapp">
<Routes>
<Route path="/" element={<App />} />
<Route path="/home" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
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 的。可以理解为，路由生效的根路径。
