如何从 github 部署到 Azure 应用服务

Question

我正在尝试将基本 angular 9 应用程序部署到 Azure 应用程序服务。

到目前为止我做了什么。

我已经创建了一个网络应用程序实例

然后我按照启动网站的建议去了部署中心，并通过部署中心连接了我的 github 存储库

它将此工作流 yml 文件添加到我的存储库中我确实注释掉了 npm 运行测试，因为它是 angular 的默认应用程序，无需浪费时间运行应用

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

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

on:
  push:
    branches:
      - master

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

    steps:
    - uses: actions/checkout@master

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

    - name: npm install, build, and test
      run: |
        npm install
        npm run build -prod --if-present
        # npm run test --if-present
    - name: 'Deploy to Azure Web App'
      uses: azure/webapps-deploy@v1
      with:
        app-name: 'someapp'
        slot-name: 'production'
        publish-profile: ${{ secrets.AzureAppService_PublishProfile}}
        package: .

在运行连接管道后，它会在初始获取时给出一个带有 503 错误代码的应用程序错误。

我尝试通过 ssh 进入服务器以查看文件结构，但要么我无法登录，要么如果我登录，它会在几秒钟后让我退出。

有谁知道我是否错过了部署到 Azure 或文件结构所需的某些步骤？我尝试四处搜索更多最新的教程或问题，但大多数看起来都过时了。

Answer 1

您可以通过两种方式完成此操作，一种是使用 Github Actions ，您可以在其中使用操作构建自己的管道。由于这似乎是一个 angular 应用程序，请在同一

上关注我的 blog

第二种方法是使用 Azure Devops 项目，创建项目并添加自己的自定义代码。

关于实际错误：我怀疑你的文件是否部署到appservice，你可以使用Kudu检查是否有正确的文件。

Answer 2

应用服务是静态网站的错误服务。我遇到了这些帮助我快速设置网站的文档。正如 Sajeetharan 所建议的那样，您必须使用 devops 管道才能获得与部署应用服务中的部署中心相同的效果。

创建一个"Storage Account"并转到静态网站，并启用静态网站
在 Azure Devops 中创建一个项目，单击管道并创建一个新项目。在配置 setp select Node.js 和 Angular 上。我 link 使用 github 存储库编辑我的。这会将 azure pipeline yml 添加到您 selected 的任何部署分支。

您将需要生成一个工件，因此您需要向您的 yml 添加一个额外的任务。例如

- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: dist/Nebulous
    artifactName: drop

你完整的 yml 应该是这样的

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: dist/Nebulous
    artifactName: drop

useful link about adding artifact

在此之后我们准备将我们的工件推送到我们的存储帐户

从 azure Devops 转到发布

在工件卡下单击添加，并将我们刚刚创建的 Pipline 添加到此。如果您想要连续部署，请单击角落的闪电螺栓并启用它。
现在单击阶段 1 下的 link，上面写着“1 个作业，0 个任务”，然后单击代理作业行上的加号以添加新任务。搜索 AzureBlob 文件副本。

来源：select 您制作的管道并将其导航到您在之前步骤中管理的工件文件夹

目标类型是 Azure Blob

Select 您之前创建的存储帐户名称

容器名称 = $web

现在您可以手动启动或推送到您的分支，它将部署到 azure。

https://docs.microsoft.com/en-us/azure/javascript/tutorial-vscode-static-website-node-01?tabs=bash

Answer 3

这是我用来将 Angular 应用程序部署到存储帐户的 Blob 存储的 YAML。我没有发现默认的 Angular 部署对我有用。管道永远不会运行第二个 npm install 命令。您需要确保在存储帐户的“功能”下启用“静态网站”，这将创建 $web 容器，除此之外，更新以下 YAML 中的变量，它应该可以工作 as-is。

这是整个 YAML，然后我将逐节解释它以提供更多上下文：

variables:
- name: storageContainer
  value: myStorageaccount
- name: subscription
  value: Subscription (8217a062-4d59-45f6-bc03-b6f559a1e58a)
trigger:
  branches:
    include:
    - master
stages:
- stage: __default
  jobs:
  - job: Job
    pool:
      vmImage: windows-latest
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '14.17.4'
        force32bit: true
    - task: CmdLine@2
      displayName: npm install
      inputs:
        script: |
          npm install
    - task: CmdLine@2
      displayName: ng build
      inputs:
        script: |
          set PATH=%PATH%;%CD%\node_modules\.bin;C:\npm\prefix
          ng build --subresource-integrity --output-hashing none
    - task: AzureFileCopy@2
      displayName: Deploy Files
      inputs:
        SourcePath: '$(System.DefaultWorkingDirectory)\dist$(Build.Repository.Name)'
        azureSubscription: $(subscription)
        Destination: 'AzureBlob'
        storage: $(storageContainer)
        ContainerName: '$web'
        BlobPrefix: ''
    - task: AzureCLI@2
      displayName: Delete Old Files
      inputs:
        azureSubscription: $(subscription)
        scriptType: 'pscore'
        scriptLocation: 'inlineScript'
        inlineScript: 'az storage blob delete-batch -s `$web --account-name $(storageContainer) --if-unmodified-since $(Get-Date ((Get-Date).addMinutes(-5)) -UFORMAT +%Y-%m-%dT%H:%MZ)'

好了，下面是一段一段的：

以下设置变量 storageContainer 和 subscription 的值，以用于其余命令。当您使用 $(storageContainer) 类型语法时，变量将被替换。

variables:
- name: storageContainer
  value: myStorageaccount
- name: subscription
  value: Subscription (8217a062-4d59-45f6-bc03-b6f559a1e58a)

当代码返回到 master 分支时，以下设置持续构建/交付，并告诉所有内容部署到具有最新构建 Windows 的 vm。稍后一些 azure cli 命令需要 Windows：

trigger:
  branches:
    include:
    - master
stages:
- stage: __default
  jobs:
  - job: Job
    pool:
      vmImage: windows-latest

以下任务将节点版本 14.17.4 安装到系统上以便使用它。我让它使用了 32 位版本的节点，但这真的不重要。

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.17.4'
    force32bit: true

以下执行 npm install 并安装 packages.json 中的所有内容。我将 angular/cli 添加到我的开发依赖项中，因此它与此一起安装。如果您不想这样做，您将需要一个安装 angular cli 的命令。请记住，Azure DevOps 似乎不喜欢在一个 CmdLine 块中安装多个节点，因此您需要另一个块。

- task: CmdLine@2
  displayName: npm install
  inputs:
    script: |
      npm install

以下是 Angular 构建 (ng build)。我做的第一件事是适当地设置路径，以便它可以在开发依赖项中找到 Angular cli。我还将它添加 c:\npm\prefix 到路径，这显然是全局 npm 安装的位置。这很难找到/弄清楚；所以当我找到它时，我把它留在了路上。在我的 Angular 构建中，我有两个标志。 --subresource-integrity 标志使脚本标签具有完整性属性，该属性具有 JavaScript 文件的哈希值。这被认为是安全最佳实践。我也设置了 --output-hashing none 。这使得文件只是 main.js 而不是 JS 文件中带有散列的较长名称。这只是我的喜好。

- task: CmdLine@2
  displayName: ng build
  inputs:
    script: |
      set PATH=%PATH%;%CD%\node_modules\.bin;C:\npm\prefix
      ng build --subresource-integrity --output-hashing none

以下 Azure Cli 命令将所有文件复制到存储帐户的 $web 容器中。默认情况下，Angular 构建命令会从 angular.json 的“outputPath”中列出的任何内容中放置这些文件。默认情况下，这是 dist 目录下的一个文件夹。该文件夹恰好与我的 Git 存储库同名，我认为是正常的。这就是为什么我有从 be '$(System.DefaultWorkingDirectory)\dist$(Build.Repository.Name)' 抓取文件的来源。我认为这应该适用于你 out-of-the-box 我的方式，但如果不是，请将 "dist$(Build.Repository.Name)" 替换为你 angular.json 的 outputPath 中设置的任何内容。

- task: AzureFileCopy@2
  displayName: Deploy Files
  inputs:
    SourcePath: '$(System.DefaultWorkingDirectory)\dist$(Build.Repository.Name)'
    azureSubscription: $(subscription)
    Destination: 'AzureBlob'
    storage: $(storageContainer)
    ContainerName: '$web'
    BlobPrefix: ''

将文件复制到 Azure 存储帐户时，默认情况下会覆盖同名文件。但是，它不会对不再使用且未被覆盖的文件执行任何操作。因此，最后一部分将删除过去 5 分钟内未修改的所有文件。这个构建过程平均需要大约 4 分钟，所以我认为任何早于 5 分钟的东西都是来自之前的构建。

- task: AzureCLI@2
  displayName: Delete Old Files
  inputs:
    azureSubscription: $(subscription)
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: 'az storage blob delete-batch -s `$web --account-name $(storageContainer) --if-unmodified-since $(Get-Date ((Get-Date).addMinutes(-5)) -UFORMAT +%Y-%m-%dT%H:%MZ)'

希望这有助于节省一些时间。这比我预期的正确组合花费的时间要多得多。

如何从 github 部署到 Azure 应用服务

How to Deploy from github to Azure App Service

deployment

github

azure

http-status-code-503

angular