通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：在 Azure 静态 Web 应用上部署 GitLab 存储库

Azure Static Web Apps 具有灵活的部署选项，允许使用各种提供商。 本文介绍如何将在 GitLab 中托管的 Web 应用程序部署到 Azure Static Web Apps。

在本教程中，学习：

  • 将存储库导入 GitLab
  • 创建静态 Web 应用
  • 配置 GitLab 存储库以部署到 Azure Static Web Apps

先决条件

创建存储库

本文使用 GitHub 存储库作为将代码导入 GitLab 存储库的源。

  1. 登录到 GitLab 帐户并转到 https://gitlab.com/projects/new#import_project

  2. 选择“按 URL 访问存储库”。

  3. 在“Git 存储库 URL”框中，输入你选择的框架的存储库 URL。

  4. 在“项目 Slug”框中，输入 my-first-static-web-app。

  5. 选择“创建项目”并等待存储库设置完毕。

创建静态 Web 应用

现在，已经创建了存储库，可以从 Azure 门户创建静态 Web 应用。

  1. 转到 Azure 门户。

  2. 选择“创建资源”。

  3. 搜索“静态 Web 应用”。

  4. 选择“静态 Web 应用”。

  5. 选择“创建” 。

  6. 在“基础”部分中，首先配置你的新应用。

    设置 Value
    Azure 订阅 选择 Azure 订阅。
    资源组 选择“新建”链接并输入 static-web-apps-gitlab。
    名称 输入 my-first-static-web-app。
    计划类型 选择“免费”。
    Source 选择“其他”。

  7. 选择“查看 + 创建”。

  8. 选择“创建” 。

  9. 选择“转到资源”。

  10. 选择“管理部署令牌”。

  11. 复制部署令牌值并将其放在编辑器中供以后使用。

  12. 在“管理部署令牌”窗口中选择“关闭”。

在 GitLab 中创建管道任务

现在，你已拥有部署令牌，可以添加负责在进行更改时生成和部署站点的工作流任务。

添加部署令牌

执行以下步骤时，请确保为环境部分选择 *。 它可能会显示默认值为 all，但你需要选择下拉列表并手动选择 *。

  1. 转到 GitLab 中的存储库。

  2. 选择“设置”。

  3. 选择 CI/CD。

  4. 在“变量”部分旁边，选择“展开”。

  5. 选择“添加变量”。

  6. 在“密钥”框中，输入 DEPLOYMENT_TOKEN。

  7. 在“值”框中，粘贴你在上一步中预留的部署令牌值。

  8. 选择“添加变量”。

添加文件

  1. 返回到 GitLab 中的存储库主屏幕。

  2. 选择“编辑”按钮，然后选择“Web IDE”。

  3. 确保在分支下拉列表中选择了“主”分支。

  4. 在存储库的根目录下创建一个名为 .gitlab-ci.yml 的新文件。 （确保文件扩展名是 .yml。）

  5. 在文件中输入以下 YAML。

    variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/src'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

    .gitlab-ci.yml 文件中使用以下配置属性来配置你的静态 Web 应用。

    在生成过程中，$CI_PROJECT_DIR 变量映射到存储库的根文件夹位置。

    属性 说明 示例 必选
    APP_PATH 应用程序代码的位置。 如果应用程序源代码位于存储库的根目录中，请输入 $CI_PROJECT_DIR/；如果应用程序代码位于名为 $CI_PROJECT_DIR/app 的文件夹中，则输入 app。 是
    API_PATH Azure Functions 代码的位置。 如果应用代码位于名为 $CI_PROJECT_DIR/api 文件夹中，请输入 api。 否
    OUTPUT_PATH 生成输出文件夹相对于 APP_PATH。 例如，如果应用程序源代码位于 $CI_PROJECT_DIR/app 中，并且生成脚本将文件输出到 $CI_PROJECT_DIR/app/build 文件夹，则将 $CI_PROJECT_DIR/app/build 设置为 OUTPUT_PATH 值。 否
    API_TOKEN 用于部署的 API 令牌。 API_TOKEN: $DEPLOYMENT_TOKEN 是

  6. 提交对主分支的更改并关闭 Web IDE。

  7. 返回到站点>，然后选择“设置”>“CI/CD”“常规管道”菜单项以查看部署进度。

部署完成后，你可以查看你的网站。

查看网站

通过两个方面来部署静态应用。 第一步创建构成应用的基础 Azure 资源。 第二个是生成和发布应用程序的 GitLab 工作流。

在转到新静态站点之前，必须先完成部署生成的运行。

静态 Web 应用“概述”窗口显示了一系列链接，可帮助你与 Web 应用进行交互。

  1. 返回到 Azure 门户中的静态 Web 应用。

  2. 转到“概述”窗口。

  3. 选择 URL 标签下的链接。 你的网站将加载到新标签页中。

清理资源

如果不打算继续使用此应用程序，可以通过删除资源组来删除 Azure Static Web Apps 实例和所有关联的服务。

  1. 从“概述”部分选择 static-web-apps-gitlab 资源组。

  2. 选择资源组“概述”顶部的“删除资源组”。

  3. 在“是否确实要删除 "static-web-apps-gitlab"?”确认对话框中输入资源组名称 static-web-apps-gitlab。

  4. 选择“删除”。

删除资源组的过程可能需要几分钟才能完成。

后续步骤

添加 API

  • Last updated on