像 Hipster 一样使用 GitHub Actions 在 Azure 上部署你的网站

我一直想提升一下 GitHub Actions 的技能。你知道你的代码库里那个“Actions”标签页吗？我一直点不进去。

最近，我决定咬紧牙关，加入进来。我学到了一些东西，我想与大家分享，以便您也可以使用 GitHub Action Workflow 来部署您的应用程序，并像那些酷炫的 DevOps 孩子一样享受所有甜蜜的 CI/CD。

问题：我有一个用 Vue.js 构建的 Azure 托管网站。实际上，它是一个帮助你区分斑点狗和冰淇淋的网站，这是一个关键的业务用例。改天再详细讨论。每次我将代码推送到它的 GitHub 仓库时，我都需要重新构建并部署它。

以前，我是通过 Azure Pipelines 完成的。但我发现，一旦搞清楚了方法，通过从头编写工作流，使用 GitHub Actions 设置基本的 CI/CD 会更快。不过，这里有几个小技巧。

首先，虽然你可以尝试使用一些预构建的模块来熟悉 GitHub Actions，但最好从头开始构建，以便完全控制创建的路径。要探索这些预构建的操作，只需Actions在任意 GitHub 仓库中点击相应的标签页（照做！），你就能找到它们：

为您的 Vue.js 网站设置良好、干净的持续集成和交付（CI/CD）有四个步骤。

步骤 1.github ：在网站根目录下创建一个名为 的文件夹。在该文件夹中，再创建一个名为 的文件夹workflows。最后，在该文件夹中，创建一个名为 的文件deploy.yml。这是一个 YAML 文件，包含 GitHub Actions 构建和部署网站所需的命令。

步骤 2：在 中deploy.yml添加以下代码：

on:
  push:
    branches:
      - master

env:
  AZURE_WEBAPP_NAME: "icecreamordog" # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: "dist" # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: "10.x" # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: npm install, build, and test
        run: |
          # Build and test the project, then
          # deploy to Azure Web App.
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: "Deploy to Azure WebApp"
        uses: azure/webapps-deploy@v1
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.PORTAL_PUBLISH_PROFILE }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

只需 33 行 YAML 代码，每次将代码推送到主分支时，你的网站就构建并部署完毕了。注意，由于我们的 Vue.js 网站构建到该dist文件夹​​，因此我们将其设置为应用程序项目路径。

步骤 3：快完成了！接下来，您需要将部署链接到secrets.PORTAL_PUBLISH_PROFILE一个密钥，该密钥需要从 Azure 门户导出并导入 GitHub，以创建握手。这里有一些很好的说明，但我将在这里概述一下：

• 转到托管 Web 应用的Azure 门户。单击“获取发布配置文件”以下载文件。

• 在你的 GitHub 仓库中，前往“设置”>“Secrets”。将该文件的内容复制并粘贴到同名的新 Secret 中PORTAL_PUBLISH_PROFILE，然后保存。

步骤 4：现在您可以将代码推送到您的代码库了。这对我来说有点棘手，因为GitHub Desktop 之前通过 OAuth 连接到 GitHub，因此推送工作流不太容易。为了获得更好的体验，请务必升级到 GitHub Desktop 2.2 或更高版本！您可能需要重新进行身份验证才能启用此推送功能。

推送此文件夹和 .yml 文件后，GitHub Actions 会检测其状态并启动构建。现在，你的网站将在每次代码推送时进行构建和部署！太棒了！

您可以探索更多有趣的工作流程和酷炫的 GitHub Action 自动化功能，提升您的开发体验。不妨一试！

有关在 Azure 上构建和托管网站的更多有趣内容，请查看我的其他文章：

Azure for Spoiled People
Azure for Spoiled People 2：使用 Azure Pipelines 部署您的应用程序
Azure for Spoiled People 3：迁移数据库