如何在Azure Web App Service部署Vite React应用？部署遇阻求助

一、Vite React 部署步骤 #

Azure Web App 虽未明确标注支持 Vite，但通过以下步骤可顺利部署：

1. 本地构建生产包 #

首先确保本地项目可正常构建：

npm run build

执行完成后会生成 dist 文件夹，这是需要部署的生产环境文件。

2. 配置 SPA 路由重定向 #

Vite 构建的单页应用需要处理路由重定向（比如刷新非根路径页面时返回 404），需根据 Azure Web App 的操作系统环境配置：

• Linux 环境（默认）：在 dist 文件夹下创建 .nginx.conf 文件，内容如下：

  location / {
      try_files $uri $uri/ /index.html;
  }
  

• Windows 环境：在 dist 文件夹下创建 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" />
            </conditions>
            <action type="Rewrite" url="/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

3. 部署到 Azure Web App #

可选以下任意一种部署方式：

• Azure Portal 部署中心：选择本地 Git、GitHub 或 FTP，将包含配置文件的 dist 文件夹内容上传到 /home/site/wwwroot（Linux）或 D:\home\site\wwwroot（Windows）目录。
• Azure CLI：使用命令直接部署本地 dist 文件夹：

  az webapp deploy --resource-group <你的资源组名> --name <你的Web App名> --src-path ./dist --type static
  

• GitHub Actions：配置自动构建部署工作流，核心步骤是构建后将 dist 同步到 Azure Web App 的 wwwroot 目录。

二、SSH 相关问题排查 #

1. 无法克隆 GitHub 仓库 #

• 先测试网络连通性：在 SSH 会话中执行 ping github.com，如果无法访问，需检查 Web App 的网络配置（比如是否在虚拟网络中，是否开启了出站规则限制）。
• 使用 HTTPS 克隆并验证凭证：GitHub 已不再支持账号密码登录，需使用**个人访问令牌（PAT）**作为密码，命令示例：

  git clone https://<你的GitHub用户名>:<你的PAT>@github.com/<用户名>/<仓库名>.git
  

• 若使用 SSH 克隆，需在 Web App 的临时会话中配置 SSH 密钥（但会话结束后密钥会丢失，更推荐 HTTPS 方式）。

2. 查看上传文件出错 #

• 确认文件路径：SSH 登录后先切换到 Web App 的根目录：

  # Linux 环境
  cd /home/site/wwwroot
  # Windows 环境
  cd D:\home\site\wwwroot
  

  再用 ls（Linux）或 dir（Windows）查看文件是否存在。
• 检查部署完整性：如果是通过 FTP 或部署中心上传，确认是否遗漏了 dist 文件夹中的文件（包括路由配置文件）。
• 若使用自动部署工具（如 GitHub Actions），检查工作流日志，确认文件同步步骤是否执行成功。

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