如何在发布ASP.NET Core React应用时指定对应.env环境文件

我有一个简单的ASP.NET Core React Web应用，此前直接发布至Azure的流程一切正常。近期新增了生产（prod）与开发（dev）两个环境，希望实现发布到生产环境时使用.env文件，发布到开发环境时使用.env.dev文件。

说明：

• 使用VS Enterprise进行构建操作
• 通过VS Enterprise（右键→发布）完成部署
• 了解可以修改packages.json中的scripts部分，但认为VS IDE执行发布操作时不会调用这些脚本
• 想知道是否存在指定脚本的方式，例如：build:dev使用.env.development构建，build:prod使用.env构建

更新
在.csproj文件中发现以下内容：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

步骤1：配置package.json的环境构建脚本 #

先在package.json中添加对应环境的build命令，需要先安装env-cmd依赖来指定加载的.env文件：

npm install env-cmd --save-dev

然后修改scripts节点：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "build:dev": "env-cmd -f .env.dev react-scripts build",
  "build:prod": "env-cmd -f .env react-scripts build"
  // 保留原有其他脚本
}

步骤2：修改.csproj文件，关联发布配置与npm脚本 #

VS发布时会执行.csproj中的PublishRunWebpack目标，我们可以通过发布配置（Debug/Release）来动态切换执行的npm命令。修改后的PublishRunWebpack目标如下：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    
    <!-- 根据发布配置选择对应build脚本 -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:dev" Condition="'$(Configuration)' == 'Debug'" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:prod" Condition="'$(Configuration)' == 'Release'" />

    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

如果你的发布配置名称不是默认的Debug/Release，直接修改Condition中的配置名称即可。

步骤3：绑定VS发布配置与环境 #

右键项目→打开发布配置文件，在「配置」下拉框中选择对应配置：

• 发布到开发环境时选择Debug
• 发布到生产环境时选择Release
  保存配置后，发布时会自动执行对应build脚本，加载正确的.env文件。

备选方案：无需依赖的环境变量方式 #

如果不想使用env-cmd，可以直接在.csproj中设置环境变量，React的react-scripts会自动加载对应后缀的.env文件（规则为.env.[环境名]）：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    
    <!-- Debug环境设置环境变量，自动加载.env.dev -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="set REACT_APP_ENV=development &amp;&amp; npm run build" Condition="'$(Configuration)' == 'Debug'" />
    <!-- Release环境默认加载.env -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" Condition="'$(Configuration)' == 'Release'" />

    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

内容的提问来源于stack exchange，提问作者AlvinfromDiaspar