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

Question

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

每次我上传到我的 Github 存储库的主分支时，我都想去 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"
    },

Answer 1

没有直接回答你想要什么，但是在过去的 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

Answer 2

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

这里是package.json中的相关脚本：

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

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

要部署到 Azure Web 应用，您需要在根文件夹中有一个 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 时，这将自动创建。我只是将构建步骤修改为在package.json 中指定的npm run build-prod。

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: .

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