将react编写的web项目发布到IIS站点中

本文主要讲解了下日常开发 -> 发布到服务器的一般流程，以及 react 项目部署到服务器后，刷新 404 问题的处理方法。

本篇博文基于：

  • react 16.8.4
  • IIS7

打包react项目

1
npm run build

  • 正常情况下可直接打包成功。

  • 非正常情况，可先运行下 npm install 安装下依赖包

发布到IIS

将打包生成的 build 文件夹复制到对应站点路径

如：

创建站点

修改应用程序池

管道模式调整为经典：

启用 32 位应用程序：

其他FAQ

  • 无法访问：查看防火墙是否开启，相关端口是否已允许访问。# 其他FAQ

非本机无法访问：

查看防火墙是否开启，相关端口是否已允许访问。

在非根目录下刷新页面报 404 ：

解决方法：需安装 UrlRewrite 模块，方式如下：

web.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>

<configuration> 
  <system.webServer> 
    <rewrite> 
      <rules> 
        <rule name="React" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules> 
    </rewrite> 
    <staticContent>
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent> 
  </system.webServer> 
</configuration>