如何在 IIS 上部署 React？

Question

在本地主机上工作时，假定应用程序位于本地开发服务器的根目录上

本地主机：50001/index.html

但是当部署到远程 IIS 服务器时，还有其他 Web 应用程序在那里运行，并且每个单独的应用程序都必须创建为“应用程序”（IIS 术语）

例如，“默认网站”在端口 80 上；其他应用程序（也在端口 80 上）有自己的 AppName。

MYSERVERNAME/App1/
MYSERVERNAME/App2/
MYSERVERNAME/MyReactApp/

所以现在要访问我的 React 应用程序，我有一个额外的路径 http://MYSERVERNAME/MyReactApp/index.html

'npm run build' 生成的 index.html 包含绝对路径；为了使我的部署工作，我手动编辑了 index.html 以包含相对路径

因此，例如，而不是：

<script type="text/javascript" src="/static/js/main.d17bed58.js"></script>

我在所有路径前添加了一个 .(dot) 以获得：

<script type="text/javascript" src="./static/js/main.d17bed58.js"></script>

这主要有效，并且所有脚本最初都会加载。但我对结果并不满意，因为我在应用程序中单击的任何链接和客户端路由（即来自 react-router）将恢复为假设该应用程序托管在网络服务器的根目录上。IE

http://MYSERVERNAME/

http://MYSERVERNAME/主页

http://MYSERVERNAME/MyWorkOrder/

http://MYSERVERNAME/MyWorkOrder/123456

此外，如果我直接在浏览器上输入任何链接（或刷新页面），它显然会失败。

回顾一下。问题是我需要在部署到 IIS 时始终保持“真实”路径http://MYSERVERNAME/myReactApp。怎么做？

Answer 1

我最终做了什么

1）npm run build后，将index.html中的绝对路径更改为相对路径（例如href =“./etc ...”和src =“./etc ...”）

2）在<BrowserRouter basename =“/ MyReactApp”/>中使用basename（根据@mehamasum的答案）

3) 最后，当在不存在的 SERVER 路由上进行页面刷新时，您需要将 404 重定向到 index.html，并让客户端的 React-router 库完成其工作。如何？在 IIS 管理器中，转到 IIS 部分\错误页面\双击\编辑 404 状态代码，然后在“编辑自定义错误页面”对话框中，选择“在此站点上执行 URL”，然后输入绝对路径 /MyReactApp /index.html