通过

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

教程：在 Azure Static Web Apps 上部署 Bitbucket 存储库

Azure Static Web Apps 具有灵活的部署选项，允许使用各种提供商。 在此教程中，使用 Linux 虚拟机将 Bitbucket 中托管的 Web 应用程序部署到 Azure Static Web Apps。

注意

Static Web Apps 管道任务目前只适用于 Linux 计算机。

在本教程中，学习：

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

先决条件

创建存储库

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

  1. 登录到 Bitbucket。

  2. 转到 https://bitbucket.org/repo/import 以开始导入过程。

  3. 在“旧存储库”标签下的“URL”框中，输入所选框架的存储库 URL。

  4. 在“项目”标签旁边，选择“创建新项目”。

  5. 输入“MyStaticWebApp”。

  6. 选择“导入存储库”，并等待网站创建你的存储库。

设置主分支

模板存储库有时会有多个分支。 使用以下步骤确保 Bitbucket 将“主”标记映射到存储库中的主分支。

  1. 选择“存储库设置”。
  2. 展开“高级”部分。
  3. 在“主分支”标签下，确保在下拉列表中选择“主”。
  4. 如果进行了更改，请选择“保存更改”。
  5. 选择“返回”。

创建静态 Web 应用

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

  1. 转到 Azure 门户。

  2. 选择“创建资源”。

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

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

  5. 选择“创建” 。

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

    设置 Value
    Azure 订阅 选择 Azure 订阅。
    资源组 选择“新建”链接并输入 static-web-apps-bitbucket。
    名称 输入 my-first-static-web-app。
    计划类型 选择“免费”。
    Azure Functions API 和过渡环境的区域 选择离你最近的区域。
    Source 选择“其他”。

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

  8. 选择“创建”。

  9. 选择“转到资源”。

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

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

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

在 Bitbucket 中创建管道任务

  1. 转到 Bitbucket 中的存储库。

  2. 选择“源”菜单项。

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

  4. 选择“Pipelines”。

  5. 选择文本链接“创建第一个管道”。

  6. 在“初学者管道”卡上，选择“选择”。

  7. 在配置文件中输入以下 YAML。

    pipelines:
  branches:
   main:
    - step: 
        name: Deploy to test
        deployment: test
        script:
          - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
          - pipe: microsoft/azure-static-web-apps-deploy:main
            variables:
                APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                API_TOKEN: $deployment_token

    注意

    在此示例中，pipe 的值设置为 microsoft/azure-static-web-apps-deploy:main。 如果希望管道使用其他分支，请将 main 替换为所需的分支名称。

    以下配置属性在静态 Web 应用的配置文件中使用。

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

    属性 说明 示例 必选
    app_location 应用程序代码的位置。 如果应用程序源代码位于存储库的根目录中，请输入 /；如果应用程序代码位于 app 目录中，则输入 /app。 是
    api_location Azure Functions 代码的位置。 如果 api 代码位于名为 api 文件夹中，请输入 /api。 如果未在文件夹中检测到 Azure Functions 应用，生成不会发生故障，而工作流会假定你不需要 API。 否
    output_location 与 app_location 相对应的生成输出目录的位置。 例如，如果应用程序源代码位于 /app 中，并且生成脚本将文件输出到 /app/build 文件夹，则将 build 设置为 output_location 值。 否

接下来，定义 API_TOKEN 变量的值。

  1. 选择“添加变量”。
  2. 在“名称”框中，输入 deployment_token，该名称与工作流中的名称匹配。
  3. 在“值”框中，粘贴你在上一步中预留的部署令牌值。
  4. 选中“安全”复选框。
  5. 选择 添加 。
  6. 选择“提交文件”并返回到“管道”选项卡。

在“管道”窗口中等待片刻，此时将显示部署状态。 一旦部署运行完成，就可以在浏览器中查看该网站。

查看网站

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

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

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

  1. 返回到 Azure 门户中的静态 Web 应用。
  2. 转到“概述”窗口。
  3. 选择 URL 标签下的链接。 你的网站将加载到新标签页中。

清理资源

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

  1. 从“概述”部分选择 static-web-apps-bitbucket 资源组。
  2. 选择资源组“概述”顶部的“删除资源组”。
  3. 在“是否确实要删除 "static-web-apps-bitbucket"?”确认对话框中输入资源组名称 static-web-apps-bitbucket。
  4. 选择“删除”。

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

后续步骤

添加 API