使用 Github 操作構建 Node/Express 並部署到 Azure Web 應用程序

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 上運行 NodeJ 時遇到了很多問題，我只能依靠容器來真正讓 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"]

有關 MS Docs 的更多信息

Answer 2

我已經使用您提到的第二個選項完成了此操作，使用 GitHub 操作部署到 Azure Web 應用程序。

以下是package.json中的相關腳本：

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

運行build-prod腳本將在您的根目錄中創建一個dist文件夾，其中包含已編譯的 JavaScript。

要部署到 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 操作進行部署，我使用了以下.yml文件。 這將在您為 Azure Web 應用程序從 Z3A5850F142898FBC3677 設置 GitHub 操作集成時自動創建。 我只是將構建步驟修改為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: .

這將觸發每次構建和部署以推送到您的分支。