Vue SPA通过GitHub Actions部署Azure App Service失败，报模块找不到错误

核心问题 #

本地构建运行正常，但GitHub Actions部署后/home/site/wwwroot目录无文件，导致应用启动失败，需从构建流程、部署配置、Azure运行时三个维度排查。

1. 确认构建阶段是否生成dist产物 #

• 首先检查package.json中是否存在build脚本，比如Vue CLI项目应为：

  "scripts": {
    "build": "vue-cli-service build"
  }
  

  若脚本缺失，npm run build --if-present会直接跳过构建，导致无dist目录。
• 在GitHub Actions的build步骤中添加日志验证，修改npm install, build, and test步骤的命令：

  npm install
  npm run build --if-present
  ls -la dist/
  

  运行后查看Action日志，确认dist目录下是否有index.html及静态资源文件。

2. 修正GitHub Actions的产物上传与部署逻辑 #

• 上传产物时确保包含所有文件：当前upload-artifact的path: dist/可能仅上传目录结构，改为：

  - name: Upload artifact for deployment job
    uses: actions/upload-artifact@v2
    with:
      name: node-app
      path: dist/**
  

  确保dist下的所有文件都被打包上传。
• 验证部署时的文件路径：deploy步骤中download-artifact会将文件下载到当前目录，package: .配置正确，但可在deploy步骤添加ls -la命令，确认文件是否存在：

  - name: Download artifact from build job
    uses: actions/download-artifact@v2
    with:
      name: node-app
  - name: Check deployed files
    run: ls -la
  

3. 调整Azure App Service的运行时配置 #

Vue SPA是静态资源，无需Node.js运行时，推荐两种配置方式：

方式一：启用静态网站模式 #

在Azure Portal进入应用服务→配置→静态网站，启用后设置：

• 默认文档：index.html
• 错误文档：index.html（解决SPA路由刷新404问题）
  启用后Azure会自动托管静态文件，无需额外服务。

方式二：用Node.js托管静态资源（保留Node.js运行时） #

如果需要保留Node.js环境，在项目根目录创建server.js：

const express = require('express');
const path = require('path');
const app = express();

// 托管dist目录的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

// 处理SPA路由，所有请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 监听Azure分配的端口
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

同时在package.json中添加启动脚本：

"scripts": {
  "start": "node server.js",
  "build": "vue-cli-service build"
}

修改GitHub Actions的上传逻辑，将server.js和package.json也加入artifact：

- name: Upload artifact for deployment job
  uses: actions/upload-artifact@v2
  with:
    name: node-app
    path: |
      dist/**
      server.js
      package.json

4. 查看详细日志定位问题 #

• GitHub Actions日志：进入仓库的Actions页面，查看对应build和deploy任务的完整日志，确认是否有构建失败、上传失败或部署错误信息。
• Azure部署日志：在Azure Portal→应用服务→部署中心→日志，查看部署过程的文件上传记录。
• Azure应用日志流：进入应用服务→监控→日志流，实时查看应用启动时的错误输出，定位具体失败原因。

5. 升级依赖版本避免环境问题 #

将actions/setup-node@v1升级为最新版本actions/setup-node@v4，确保Node.js环境配置正确：

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

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