在Azure应用服务上使用CI/CD管道部署Web应用的分步指南。

# Web 开发# 云计算

介绍

利用 CI/CD 管道在 Azure 应用服务上部署 Web 应用程序有助于提高开发和发布流程的效率。Azure 可与 GitHub、Azure DevOps 和各种 CI/CD 工具等平台顺利集成，从而实现自动部署、测试和扩展。本指南概述了使用 CI/CD 管道在 Azure 应用服务上配置和启动 Web 应用程序的详细分步方法。

**分步指南**

**1. 先决条件**

  • Azure 帐户：确保您拥有有效的 Azure 订阅。
  • 源代码存储库：托管在 GitHub、Azure Repos 或 Bitbucket 等平台上的代码库。
  • 已安装的工具：
  • Azure CLI
  • Git
  • 代码编辑器（例如 VS Code）
  • Web 应用程序：您所需框架（Node.js、Python、.NET 等）中的示例应用程序。

    • **2. 创建 Azure 应用服务计划**

  • 登录 Azure 门户。
  • 导航到应用服务> 创建。
    • Image descriptionImage description

    **填写所需详细信息：**

  • 订阅：选择您的订阅。
  • 资源组：创建一个新的资源组或使用现有的资源组。
  • 名称：为您的应用服务计划提供一个唯一的名称。
  • 操作系统：Linux
  • 区域：选择最近的数据中心。
  • 定价方案：选择定价计划
  • 区域冗余：选择一个适用的
    • Image description
  • 单击“审阅 + 创建”，然后单击“创建”。
    • Image descriptionImage description

    **3. 创建 Azure 应用服务**

  • 登录 Azure 门户。
  • 导航到应用服务> 创建> Web 应用。
    • Image description

    **填写所需详细信息：**

  • 订阅：选择您的订阅。
  • 资源组：创建一个新的资源组或使用现有的资源组。
  • 名称：为您的应用提供一个唯一的名称。
  • 运行时堆栈：选择运行时环境（例如，.NET、Node.js、Python、PHP）。
  • 区域：选择最近的数据中心。
  • 单击“审阅 + 创建”，然后单击“创建”。
    • Image descriptionImage description

    **3. 使用 Vscode 在本地设置你的 Web 应用**

    Image description

    **4. 在 github 上创建一个新的存储库并连接到你的 Vscode**

    **- 在 github 上创建一个新的存储库**

    Image description

    **- 将 Vscode 连接到 Github**

  • 在 Vscode 终端上运行代码 - git init
  • 从 github 上新创建的存储库复制并运行“remote add origin”代码
    • Image descriptionImage description

    **- 运行以下代码即可完成与你的 Github 的连接**

  • git 添加“index.php”
  • git 状态
  • git commit -m“我的第一次提交”
  • git push origin master
    • Image descriptionImage description

    **5.将 Github 存储库连接到 Azure 应用服务**

  • 在我们之前部署的 Azure 应用服务上，找到并单击部署刀片
  • 点击部署中心
    • Image description

    **在部署中心页面上选择以下内容**

  • 来源-Github
    • Image descriptionImage description

    等待部署完成

    Image description

    **复制您的应用服务默认域链接以检查您的应用是否已部署**

    Image description

    **下图确认该应用已上线**

    Image description

    **结论**

    通过利用本指南，您已在 Azure 应用服务上建立了一个配备强大 CI/CD 管道的 Web 应用程序。此配置可确保持续集成、自动部署和实时监控，从而增强您的开发和部署工作流程。Azure 和 GitHub 以及 Azure DevOps 之间的协同作用简化了流程，使您能够专注于开发和完善应用程序。