开发人员说明：使用 Azure 和 Github Actions 为 Node js 项目配置 CI/CD 管道

有人在 Twitter 上发帖说，当工程师做某件事时，他们应该写下他们是如何实现它的。它可以节省其他工程师寻找解决方案的时间。这就是我们在这里的原因。

在本文中，我们将使用 Azure 作为云提供商和 GitHub 操作为 Node js 项目配置 CI/CD 管道。

首先

1. 在 Microsoft Azure 上创建应用服务。

• 登录 Microsoft Azure 门户，如果没有帐户，请创建一个帐户。 （截至撰写本文时，他们为新帐户提供最高 200 美元的积分。

• 接下来，搜索 azure 应用程序。
  

• 选择“创建”>网络应用程序。然后在表格中填写详细信息。选择运行时堆栈作为 Node xx LTS。继续创建直至。

在此过程结束时，您应该拥有一个具有 Microsoft 默认页面的 Web 应用程序。

下一个，

2. 生成用于 Github 操作的 Azure 凭据。

这里记录了几种方法，但我们使用服务主体选项，因为它非常简单。

打开Azure cli，（如下图所示）

并运行以下命令：

az ad sp create-for-rbac --name "myApp" --角色贡献者 --scopes /subscriptions//resourceGroups//providers/Microsoft.Web/sites /; --json-auth

将 , 和 替换为 azure 应用服务仪表板中的正确详细信息。 “myApp”是服务主体的名称。

该命令将生成如下输出。

{
"clientId": "",
"clientSecret": "",
"subscriptionId": "",
"tenantId": "",
(...)
}

这个稍后会用到。

终于到了Github

3.添加secret，创建Github Action和触发器。

• 在存储库中导航到设置>;秘密和变量>行动。

• 单击添加新的存储库密钥。将 json 输出粘贴到机密字段中，并将 AZURE_CREDENTIALS 粘贴到名称字段中。

• 导航到“操作”选项卡，将 github 操作流添加到项目中。搜索“将 Node.js 部署到 Azure Web App”并单击“配置”继续。

  • 创建了一个工作流文件 azure-webapps-node.yml，可以在提交更改之前对其进行编辑。

编辑文件如下所示：

`于：
推：
分支：[“开发”]
工作流程_调度：

环境：
AZURE_WEBAPP_NAME: # 将其设置为您的应用程序名称
AZURE_WEBAPP_PACKAGE_PATH：“。” # 将其设置为您的 Web 应用程序项目的路径，默认为存储库根
NODE_VERSION: '' # 将其设置为要使用的节点版本

权限：
内容：阅读

工作：
构建和部署：
运行：ubuntu-latest
步骤：
- 名称：“查看 Github 操作”
使用：actions/checkout@v4

- uses: azure/login@v1
  with:
    creds: ${{ secrets.AZURE_CREDENTIALS }}

- name: Setup Node ${{ env.NODE_VERSION }}
  uses: actions/setup-node@v4
  with:
    node-version: ${{ env.NODE_VERSION }}
    cache: 'npm'

- name: npm install, build, and test
  run: |
    npm install

- uses: azure/webapps-deploy@v3
  with:
    app-name: ${{ env.AZURE_WEBAPP_NAME }}
    package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

# Azure logout 
- name: logout
  run: |
    az logout`

工作流文件在推送到开发分支时触发，并使用您之前保存在机密中的凭据登录到 azure 门户，然后继续构建和部署。

请记住相应地替换编辑网络应用程序名称、节点版本。

最终触发第一次运行的工作流程。 Azure 门户上的默认网页应该消失，并且您已为 CI/CD 管道配置了 Web 应用程序，该管道在推送到开发分支时触发。

希望这可以帮助其他工程师。

以上是开发人员说明：使用 Azure 和 Github Actions 为 Node js 项目配置 CI/CD 管道的详细内容。更多信息请关注PHP中文网其他相关文章！