Azure 实践 第1天

Source: Dev.to

项目设置

1. 克隆仓库

在 VS Code 中的步骤：

git init
git clone 
cd 

• 现在本地已经拥有源代码
• 接下来的步骤：
  • 安装 npm 依赖
  • 构建项目
  • 通过 Azure Web App 部署

步骤 2：创建 Azure DevOps 项目

前往

• 点击 New Project（新建项目）
• 输入项目名称
• 项目创建成功

步骤 3：将代码推送到 Azure Repos

（此处省略细节 – 将本地仓库推送到前一步创建的 Azure Repos。）

步骤 4：Azure App Service – 托管应用

• 创建一个 Web App
• 前往
• 搜索 App Services（应用服务）
• 点击 Create → Web App（创建 → Web 应用）

配置详情

• Subscription（订阅）
• Resource Group（资源组）
• App Name（应用名称）
• Publish（发布方式）
• Runtime Stack（运行时堆栈）
• Version（版本）
• OS（操作系统）
• Region（地区）
• 选择一个 App Service Plan（应用服务计划）

验证应用：

• 点击 Browse（浏览）
• 默认的 Azure App Service 页面出现（尚未部署代码）

步骤 5：构建流水线 – Classic Editor（经典编辑器）

• Azure DevOps → Pipelines（流水线） → Create Pipeline（创建流水线）
• 选择 Use Classic Editor（使用经典编辑器）

流水线任务

1. npm install

   • 任务：npm
   • 命令：install
   • 工作目录：root

2. npm build

   • 任务：npm
   • 命令：custom
   • 自定义命令：run build

3. Publish Build Artifacts（发布构建产物）

   • 任务：Publish Build Artifacts
   • 路径：build
   • 产物名称：drop

4. Azure App Service Deploy（Azure 应用服务部署）

   • 任务：Azure App Service Deploy
   • 服务连接：Authorize（授权，创建服务主体）
   • 应用类型：Web App on Linux（Linux 上的 Web 应用）
   • 应用名称：Created App Service（已创建的应用服务）
   • 包路径：build
   • 运行时堆栈：Static Site（静态站点）

步骤 6：应用设置

进入 App Service → Configuration → Application Settings（应用服务 → 配置 → 应用设置），并添加：

保存并 Restart（重启）应用服务。

应用成功加载

YAML 流水线 – 从头开始

trigger:
- main

stages:
- stage: Build
  jobs:
  - job: BuildJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: Npm@1
      inputs:
        command: install

    - task: Npm@1
      inputs:
        command: custom
        customCommand: run build

    - task: PublishBuildArtifacts@1
      inputs:
        pathToPublish: build
        artifactName: drop

- stage: Deploy
  jobs:
  - job: DeployJob
    pool:
      vmImage: ubuntu-latest
    steps:
    - task: DownloadBuildArtifacts@0
      inputs:
        artifactName: drop

    - task: AzureWebApp@1
      inputs:
        appType: webAppLinux
        appName: 
        package: $(System.DefaultWorkingDirectory)/drop/build
        runtimeStack: STATIC

最终结果

• 构建阶段 ✔
• 部署阶段 ✔
• 产物已创建 ✔
• 应用已部署 ✔
• 网站正常工作 ✔

清理提醒

删除 Resource Group（资源组）以避免产生不必要的 Azure 计费。