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

Question

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

到目前为止我做了什么。

• 我创建了一个 web 应用程序实例

• 然后我按照启动网站的建议去了部署中心，并通过部署中心连接了我的 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

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

1. 创建“存储帐户”和 go 到 STatic 网站，并启用 Static 网站

2. 在 Azure 中创建一个项目 Devops 点击管道并创建一个新的。 在配置 setp select Node.js 和 Angular 上。 我将我的链接与 github 存储库。 这会将 azure 管道 yml 添加到您选择的任何部署分支。

您将需要生成一个工件，因此您需要向您的 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

关于添加工件的有用链接

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

Go 从 azure 发布

3. 在 artifacts 卡下单击 add，并将我们刚刚创建的 Pipline 添加到此。 如果您想要持续部署，请单击角落处的闪电并启用它。

4. 现在单击阶段 1 下显示“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 2

您可以通过两种方式做到这一点，一种方法是使用 Github 操作，您可以在其中使用操作构建自己的管道。 由于这似乎是一个 angular 应用程序，请关注我的博客

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

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

Answer 3

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

这是整个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)'

好的，这是逐节的：

下面设置要在命令 rest 中使用的变量 storageContainer 和 subscription 的值。 当您使用 $(storageContainer) 类型语法时，变量将被替换。

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

当代码返回到 master 分支时，以下设置连续构建/交付，并告诉所有内容部署到具有最新版本 Windows 的虚拟机。稍后一些 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 安装并安装 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 文件的 hash。 这被认为是安全最佳实践。 我还设置了--output-hashing none。 这使得文件只是 main.js 而不是 JS 文件中带有 hash 的较长名称。 这只是我的一个偏好。

- 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 存储库同名，我认为这是正常的。 这就是为什么我有源代码可以从 '$(System.DefaultWorkingDirectory)\dist$(Build.Repository.Name)' 中获取文件。 我认为这应该像我拥有的那样开箱即用，但如果不是，请将“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)'

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