使用 Github Actions 构建 Node/Express 并部署到 Azure Web App

问题描述

我有一个 Node/Express 项目，它使用 azure-ts-node-starter 项目。默认情况下，它将 Typescript 从 /src 编译到 /dist（下面的 package.json）

每次上传到 Github 存储库的 master 分支时，我都想将其 delpoy 到 Azure，但我不确定如何处理 src/dist 文件夹。

我是否应该在我的 PC 上构建，然后提交所有内容，我认为会让我选择使用 Azure 部署中心或 Github 操作（不确定的区别）部署整个项目或...
我可以将 /dist 文件夹放在 gitignore 中，只上传 src 文件，然后每次推送到 master 时都以某种方式构建它吗？

如果我选择第二个选项，它是否只会部署 /dist 文件夹的内容而不将所有源文件发送到 Azure？这看起来很合理，但它是否需要来自主目录的一些文件，例如 package.json 文件，以便它知道如何启动？

如果这个问题没有很好地形成，我很抱歉，我不确定我需要问什么。我想问题是提交和部署使用 dist 目录的项目的标准方式是什么？

这是 package.json 文件中的脚本。

    "scripts": {
        "build": "npm run build-ts && npm run copy-static-assets","build-ts": "tsc","copy-static-assets": "ts-node copyStaticAssets.ts","serve": "node dist/server.js","start": "npm run serve","watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run watch-node\"","watch-node": "nodemon dist/server.js","watch-ts": "tsc -w"
    },

解决方法

没有直接回答你想要什么，但在过去的 3 年里，我在 Azure 上运行 NodeJs 时遇到了很多问题，我只能依靠容器来让 nodeJs 应用程序顺利运行......

为此，我的 GitHub 操作是这样的

.github/workflows/azure.yml

name: Azure deploy
on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    # checkout the repo
    - name: 'Checkout GitHub Action' 
      uses: actions/checkout@master
    
    - name: 'Login via Azure CLI'
      uses: azure/login@v1
      with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
    
    - uses: azure/docker-login@v1
      with:
        login-server: my_domain.azurecr.io
        username: ${{ secrets.REGISTRY_USERNAME }}
        password: ${{ secrets.REGISTRY_PASSWORD }}
    
    - run: |
        docker build . -t my_domain.azurecr.io/teamcalendar:latest
        docker push my_domain.azurecr.io/teamcalendar:latest

Dockerfile

FROM node:lts-alpine

WORKDIR /usr/app

COPY package*.json ./
RUN npm install
COPY . .

CMD ["npm","start"]

更多info on MS Docs

我已使用您提到的第二个选项完成此操作，即使用 GitHub Actions 部署到 Azure Web 应用程序。

以下是 package.json 中的相关脚本：

"scripts": {
    "build": "tsc --project .","build-prod": "npm install && npm run build"
}

运行 build-prod 脚本将使用已编译的 JavaScript 在您的根目录中创建一个 dist 文件夹。

要部署到 Azure Web App，您的根文件夹中需要一个 web.config 文件。下面是 Node 项目的标准 web.config，我已经对其进行了修改以说明 dist 文件夹。

<?xml version="1.0"?>

<configuration>
    <system.webServer>
        <handlers>
            <!-- indicates that the server.js file is a node.js application to be handled by the iisnode module -->
            <add name="iisnode" path="dist/server.js" verb="*" modules="iisnode" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
            <!-- Do not interfere with requests for node-inspector debugging -->
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                  <match url="^server.js\/debug[\/]?" />
                </rule>
        
                <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
                <rule name="StaticContent">
                  <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
        
                <!-- All other URLs are mapped to the node.js site entry point -->
                <rule name="DynamicContent">
                  <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                  </conditions>
                  <action type="Rewrite" url="dist/server.js"/>
                </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>

为了使用 GitHub Actions 进行部署，我使用了以下 .yml 文件。当您从 Azure 门户为您的 Azure Web 应用set up the GitHub Actions integration 时，将自动创建此文件。我只是将构建步骤修改为我在 npm run build-prod 中指定的 package.json。

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

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: windows-latest

    steps:
      - name: 'Checkout Github Action'
        uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: "14.x"

      - name: npm install,build
        run: npm run build-prod

      - name: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "xxx"
          slot-name: "xxx"
          publish-profile: ${{ secrets.AzureAppService_PublishProfile_xxxx }}
          package: .

这将每次触发构建和部署以推送到您的分支。

azure azure azure-deployment github github-actions