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

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

本篇博文基于:

  • react 16.8.4
  • IIS7

打包react项目

npm run build

  • 正常情况下可直接打包成功。
  • 非正常情况,可先运行下 npm install 安装下依赖包

发布到IIS

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

如:

创建站点

修改应用程序池

管道模式调整为经典:

启用 32 位应用程序:

其他FAQ

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

    非本机无法访问:

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

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

解决方法:需安装 UrlRewrite 模块,方式如下:

web.config

<?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>

常言道:学然后知不足,教然后知困。

我知道你的焦虑,一起共进加油:P

关不关注都无所谓,会根据生活节奏紧凑都定期分享些开发经验、搬砖生涯、痛点、感悟。

欢迎关注我的订阅号:P