Question

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

localhost：50001 / index.html

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

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

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

所以现在要进入我的React App，我有一条额外的路径 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）都将还原为假定该应用程序托管在Web服务器的根目录下。即

http://MYSERVERNAME/

http://MYSERVERNAME/Home

http://MYSERVERNAME/MyWorkOrder/

http://MYSERVERNAME/MyWorkOrder/123456

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

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

Answer 1

来自docs：

建立相对路径

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

"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，则可以使用<Link>道具将basename植根到任何<Router>上。更多信息here。

例如：

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

Answer 2

我最终要做什么

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

2）在中使用基本名称（根据@mehamasum的回答）

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

如何在IIS上部署React？

2 个答案: