如何在 IIS 服务器上部署 React 应用程序

什么是 IIS？

如何启用 IIS？

创建一个简单的 React 应用程序

今天，我将向您展示如何将 React App 部署到 IIS 服务器，所以让我们喝杯咖啡开始编码吧。

什么是 IIS？

IIS 代表“Internet 信息服务”，它是 Microsoft 提供的用于托管网站和网络上的其他内容的网络服务器。

如何启用 IIS？

如果您已启用 IIS，则可以跳过此步骤。如果您尚未启用，请按照以下步骤操作：

1. 打开控制面板，然后单击“程序和功能”。
2. 点击“打开或关闭 Windows 功能”。
3. 选择 Internet 信息服务并单击“确定”按钮。
4. 要查看 IIS 是否已启用，请按下Windows + R键并键入inetmgr，然后单击“确定”。
5. IIS 管理器已打开。

创建一个简单的 React 应用程序

打开命令提示符或您最喜欢的终端并输入以下命令来创建一个反应应用程序。

> npx create-react-app my-react-app

成功创建应用程序后转到新应用程序。

> cd my-react-app

要查看它的外观，请输入以下命令

npm start

它将启动开发服务器并导航到
http://localhost:3000/

您可以看到默认的登陆页面：

要在任何 Web 服务器中托管应用，我们首先需要创建一个生产版本。使用以下命令创建 React 应用的生产版本。

> npm run build

上述命令的输出在项目内部创建一个包含生产构建的新构建文件夹。

到目前为止，我们已经创建了一个 React 应用，并创建了该应用的生产版本。
下一步是将其部署到 IIS 上。

按下Windows + R键并写入inetmgr以打开 IIS 管理器。您将看到以下屏幕。

首先，我们将创建一个新的应用程序池，右键单击“应用程序池”，然后单击“添加应用程序池”。然后根据需要为其命名，然后单击“确定”按钮。

之后，右键单击新的应用程序池，并选择“高级设置”。您将看到以下窗口。

然后单击“身份”并选择“自定义帐户”，单击“设置”按钮，然后添加您的 Windows 凭据并单击“确定”。

之后，右键单击“站点”，然后点击“添加网站”。添加站点名称并选择我们之前创建的应用程序池。之后，在“物理路径”部分，您需要提供构建文件夹的路径以及要托管的端口号。

现在右键单击新网站，即ReactApp ->管理网站->浏览。您的 React 应用现已成功部署。

下一步是在我们的 React 应用中添加路由。我创建了两个组件，并添加了react-router-dom用于路由的包。这里我们就不详细介绍 React 路由了。

主页：

博客页面：

再次创建生产版本，并尝试浏览我们托管在 IIS 上的应用程序。您将看到应用程序运行正常，但现在尝试刷新页面并查看会发生什么。您将收到以下错误。

因此，要解决此问题，您必须安装URL Rewrite模块。安装成功后，您需要在应用程序文件夹web.config下创建一个文件public，并将以下内容复制粘贴到其中。

web.config

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <rewrite>
 <rules>
 <rule name="React Routes" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

再次在生产模式下构建应用程序并浏览。现在，如果您刷新应用程序，您将不会收到错误，并且能够看到正确的页面。就这样，您已成功创建 React 应用程序并将其部署到 IIS 服务器中。

我希望您喜欢这篇文章，并且请随时向我发送您的想法或评论，告诉我哪些地方可以做得更好。

编码愉快！！