如何在 IIS 上部署 React？

Question

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

localhost:50001/index.html

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

例如，'Default Web Site' 在端口 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>

我在所有路径前加了一个.(点)得到：

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

这在大多数情况下都有效，并且所有脚本都会在初始时加载。但是我对结果不满意，因为我在应用程序中单击的任何链接和客户端路由（即来自 react-router）都将还原为假定该应用程序托管在网络服务器的根目录上。即

http://MYSERVERNAME/

http://MYSERVERNAME/Home

http://MYSERVERNAME/MyWorkOrder/

http://MYSERVERNAME/MyWorkOrder/123456

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

回顾一下。问题是在部署到 IIS 时，我需要始终维护 "true" 路径 http://MYSERVERNAME/myReactApp。怎么做？

Answer 1

来自docs：

相对路径构建

默认情况下，Create React App 会生成一个构建，假设您的应用托管在服务器根目录下。要覆盖它，请在 package.json 中指定 homepage，例如：

"homepage": "http://mywebsite.com/relativepath",

这将使 Create React App 正确推断根路径以在生成的 HTML 文件中使用。

例如：

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

将变为：

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

如果您使用的是 react-router@^4，则可以在任何 <Router> 上使用 basename 属性来获取 <Link> 的根。更多信息 here.

例如：

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

Answer 2

我最后做了什么

1) 在 npm 运行 build 之后，将 index.html 中的绝对路径更改为相对路径（示例 href="./etc..." 和 src="./etc... ")

2) 在中使用 basename（根据@mehamasum 的回答）

3) 最后，当在不存在的 SERVER 路由上进行页面刷新时，您需要将本来是 404 的内容重定向到 index.html，并让客户端 react-router图书馆做它的工作。如何？在 IIS 管理器中，转到 IIS section\Error Pages\double-click\Edit 404 状态代码，然后在 'Edit Custom Error Page' 对话框中，选择 'Execute a URL on this site'，然后输入绝对路径 /MyReactApp/index。 html

如何在 IIS 上部署 React？

How to deploy React on IIS?

web-deployment

reactjs

react-router