使用 create-react-app 和 react-router 在自定义根路径“/app”下部署反应的问题
Issues deploying react under custom root path "/app" with create-react-app and react-router
我正在具有以下设置的主机上部署应用程序：
我需要在自定义根路径 /app 下部署我的 React 应用程序，该应用程序将位于此保护伞下。我正在使用 react-router v5 和 create-react-app.
问题
当我构建应用程序时（我正在使用 vercel's serve），我得到一个空白页面。当我转到 localhost:5000/app/ 时，什么也没有显示。
我按照 here and here 中的所有建议进行了操作，但仍然无法加载我的应用程序。
我也很困惑：使用react-router的basename和CRA的homepage字段有什么区别？我应该同时使用两者，还是两者兼用？
编辑：可能发现了问题。设置 homepage=/app 还会更改我的 JS 包的路径，它无法识别（因此出现空白页）。我在我的 build 目录中手动添加了一个 app 文件夹，如下所示： build/app/static 并且它起作用了。 CRA 不应该自动执行此操作吗？
我的设置
app.tsx
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
package.json
scripts: {
"build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",
在本地提供产品构建的命令
> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000
The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
我导航到 http://0.0.0.0:5000/app/ 并得到一个空白页面（没有网络调用）。
我试过的
"homepage": "https://example.com/app",
虽然这是一种变通方法，但我已经成功了。
正如 Mohit 的评论所提到的，homepage 字段使得所有资产都是 pre-pended sub-path 在 homepage 中定义的。我得到一个空白屏幕，因为它找不到我的 JS 包的新路径，也就是从服务 /build/static/js/.. 到 /build/app/static/js/..。
解决方案（解决方法）
- 在
build 目录下创建一个名为 app 的新文件夹（或任何新的根路径名称）。
- 将您的
/build/static 文件夹移动到 build/app/static。
- 这是
Dockerfile 的样子：
RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)
你可以去掉 pwd 和 echo 行，我添加了它所以我可以看到它工作。
我不知道为什么CRA默认不这样做。可能是因为我正在使用 react-app-rewired，它与 CRA 的 webpack 配置混淆？
我正在具有以下设置的主机上部署应用程序：
我需要在自定义根路径 /app 下部署我的 React 应用程序，该应用程序将位于此保护伞下。我正在使用 react-router v5 和 create-react-app.
问题
当我构建应用程序时（我正在使用 vercel's serve），我得到一个空白页面。当我转到 localhost:5000/app/ 时，什么也没有显示。
我按照 here and here 中的所有建议进行了操作，但仍然无法加载我的应用程序。
我也很困惑：使用react-router的basename和CRA的homepage字段有什么区别？我应该同时使用两者，还是两者兼用？
编辑：可能发现了问题。设置 homepage=/app 还会更改我的 JS 包的路径，它无法识别（因此出现空白页）。我在我的 build 目录中手动添加了一个 app 文件夹，如下所示： build/app/static 并且它起作用了。 CRA 不应该自动执行此操作吗？
我的设置
app.tsx
<Router basename={process.env.PUBLIC_URL}>
...
</Router>
package.json
scripts: {
"build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",
在本地提供产品构建的命令
> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000
The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
bit.ly/CRA-deploy
我导航到 http://0.0.0.0:5000/app/ 并得到一个空白页面（没有网络调用）。
我试过的
"homepage": "https://example.com/app",
虽然这是一种变通方法，但我已经成功了。
正如 Mohit 的评论所提到的，homepage 字段使得所有资产都是 pre-pended sub-path 在 homepage 中定义的。我得到一个空白屏幕，因为它找不到我的 JS 包的新路径，也就是从服务 /build/static/js/.. 到 /build/app/static/js/..。
解决方案（解决方法）
- 在
build目录下创建一个名为app的新文件夹（或任何新的根路径名称）。 - 将您的
/build/static文件夹移动到build/app/static。 - 这是
Dockerfile的样子：
RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)
你可以去掉 pwd 和 echo 行，我添加了它所以我可以看到它工作。
我不知道为什么CRA默认不这样做。可能是因为我正在使用 react-app-rewired，它与 CRA 的 webpack 配置混淆？