为 React 应用程序配置 Azure 应用服务时出现问题

Question

我有一个 React 应用程序，使用 Vite 构建并托管在 Azure 应用服务上。我遇到一些有关配置的问题：

• 压缩不起作用，我们已经部署了 gzip 压缩文件，但服务器永远不会发送它们，只有未压缩的文件
• Wasm 文件使用错误的内容类型提供服务。响应的内容类型为

  text/plain

  而不是

  application/wasm

我添加了以下内容

Web.config

但根本没有任何效果：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />
    <staticContent>
      <remove fileExtension=".wasm" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
    </staticContent>
  </system.webServer>
  <httpCompression>
    <dynamicTypes>
      <clear />
      <add mimeType="text/*" enabled="true" />
      <add mimeType="message/*" enabled="true" />
      <add mimeType="application/javascript" enabled="true" />
      <add mimeType="*/*" enabled="false" />
    </dynamicTypes>
    <staticTypes>
      <clear />
      <add mimeType="text/*" enabled="true" />
      <add mimeType="message/*" enabled="true" />
      <add mimeType="application/javascript" enabled="true" />
      <add mimeType="*/*" enabled="false" />
    </staticTypes>
  </httpCompression>
</configuration>

Answer 1

下面的方法适用于我将 gzip 文件中的 React 应用程序部署到 azure Web 应用程序。

要使用压缩文件运行Web应用程序，

WEBSITE_RUN_FROM_PACKAGE

设置为

1

，并且仅支持

.zip

文件。

我使用 GitHub Action 部署了我的 Web 应用程序

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - reactvite2sep

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
          
      - name: Zipping files in gzip
        run: tar --exclude='./output.tar.gz' -czf output.tar.gz ./*
      
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: output.tar.gz

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write #This is required for requesting the JWT

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app
      
      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_xxxxxxxxxxx }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_xxxxxxxxxxx }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_xxxxxxxxxxx }}

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v3
        id: deploy-to-webapp
        with:
          app-name: 'reactvite2sep'
          slot-name: 'Production'
          package: .

OUTPUT

：