如何通过GitHub Actions将项目中的Node Express服务部署到Azure Web App

一、先给server端做独立运行准备 #

• 如果你的src/server文件夹还没有独立的package.json，可以新建一个，把服务需要的依赖和启动脚本写进去：

{
  "name": "api-server",
  "dependencies": {
    "express": "^4.18.2",
    // 其他服务依赖都放这
  },
  "scripts": {
    "start": "node --env-file ../../.env server.js"
  }
}

• 要是不想拆分根目录的package.json，就在根文件里加个专门的生产启动脚本：

"scripts": {
  // 保留原来的脚本
  "server:prod": "cd src/server && node --env-file ../../.env server.js"
}

二、写GitHub Actions部署工作流 #

在项目根目录新建.github/workflows/deploy-server.yml，把下面内容填进去，注意替换占位符：

name: 部署Node服务到Azure Web App

on:
  push:
    branches: [ main ] # 改成你要触发部署的分支

jobs:
  构建并部署:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # 安装依赖：如果server有独立package.json，就进目录安装；没有就直接装根目录的生产依赖
      - name: 安装依赖
        run: |
          # 选一种方式执行：
          # 方式1：server有独立package.json
          # cd src/server
          # npm install --production
          # 方式2：用根package.json
          npm install --production

      # 准备部署文件：只把server相关内容挑出来，避免带React前端文件
      - name: 整理部署文件
        run: |
          mkdir -p deploy/server
          cp -r src/server/* deploy/server/
          cp package.json deploy/
          # 注意：.env文件别提交到GitHub，敏感变量去Azure门户配置，或者用GitHub Secrets传递

      # 部署到Azure
      - name: 部署到Azure Web App
        uses: azure/webapps-deploy@v2
        with:
          app-name: 你的Azure应用名称 # 替换成你的Web App名字
          slot-name: production
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} # 在GitHub仓库的Secrets里配置这个值
          package: ./deploy # 指定刚才整理好的部署目录

三、配置Azure Web App的启动命令 #

登录Azure门户，找到你的Web App，进入配置-常规设置，设置启动命令：

• 用根package脚本的话：npm run server:prod
• 用server独立package的话：cd src/server && npm start

重点提醒 #

• 别在GitHub Actions里直接运行node src/server/server，这会在GitHub的临时服务器上启动服务，根本没部署到Azure。正确操作是把代码打包后推给Azure，让Azure自己启动服务。
• 环境变量别存.env里提交，去Azure Web App的配置-应用程序设置里加，敏感信息要加密。
• 只安装server需要的依赖能加快部署速度，别装React的一堆依赖浪费时间。

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