将 JavaScript 应用部署到 Azure 概述

若要将基于 JavaScript 的应用部署到 Azure，请将文件或文件集移动到 Azure，以便通过 HTTP 终结点提供。 移动文件的过程称为部署。

先决条件

• Azure 订阅 - 免费创建订阅。
• Node.js LTS。
• 如果计划从 GitHub 存储库进行部署，则需要一个 GitHub 帐户。

部署工具

Azure提供各种部署工具以满足不同的需求。 下面是一些常见方法：

其他部署工具基于特定服务存在。 例如，Azure应用服务支持各种部署工具：

• 从 ZIP 文件
• 通过 FTP
• Dropbox 或 OneDrive
• 本地 Git
• cURL
• SSH

即使未使用该方法最初部署，也可以使用任何提供的方法重新部署到应用服务。 如果要切换方法，可能需要在重新部署之前进行一些配置。

适用于 JavaScript 应用的 Azure 托管服务

首先，选择最适合应用的托管服务。 选择服务后，请使用建议的部署路径更快地进入正确的教程。

有关选择正确的托管服务的详细信息，请参阅 Azure 上的托管应用程序。

借助工具的部署方法

选择托管服务后，选择适合工作方式的部署方法。

• 在部署前构建：对于复杂或耗时的构建，请将应用程序打包到 zip 文件中并部署它。 部署包允许您在部署之前控制和测试构建。
• 部署期间生成：对于更简单的版本，请使用 Azure 提供的环境变量 SCM_DO_BUILD_DURING_DEPLOYMENT=true 在部署期间生成应用。

如果要部署到应用服务，其他部署方法也可用：

Azure 应用服务中的部署槽位 可用于为过渡和生产创建单独的环境。 使用插槽可以在过渡阶段测试应用，然后再将其切换到生产阶段，确保部署顺利无误。 详细了解部署槽位。

不要使用部署槽位混合不同的部署目的。 所有部署槽位共享应用服务，因此需要确保流量模式和所有槽的预期用途相同。 如果您需要一个应作为单独应用服务的托管测试环境或阶段环境。

使用 Azure 开发人员 CLI 进行部署

若要获得预配Azure资源和部署应用的最快端到端路径，请从Azure开发人员 CLI （azd） 开始。

Azure开发人员 CLI 简化了将应用部署到Azure的过程。 按照以下步骤操作：

1. 安装 Azure Developer CLI。

2. 查找一个现有项目，它使用了许多与您的项目相同的资源。

3. 初始化项目的本地版本，以用作你自己的项目的基础结构模板。

4. 创建资源并将代码部署到 Azure。

   azd auth login
   azd init --template <template-name>
   azd up
   

需要一个用于基础结构、部署和可重复环境的工作流时，请使用此路径。

使用 Visual Studio Code 进行部署

如果需要编辑器中的引导式部署流，请使用Visual Studio Code的Azure扩展。

若要使用Visual Studio Code部署或重新部署应用服务应用，请完成以下步骤：

1. 安装相关的Azure扩展，例如Azure 应用服务或Azure Functions。

2. 打开 Azure 浏览器。 选择主侧栏中的 Azure 图标或使用键盘快捷方式（Shift + Alt + A）。

3. 在资源组中，选择订阅和服务。

4. 右键单击你的服务，然后选择部署到 Web 应用...。

   

服务专属的后续步骤

选择托管服务和部署方法后，请继续使用与应用匹配的服务特定路径。

部署到 Azure Static Web Apps

Azure 静态 Web 应用非常适合使用 JavaScript 框架构建的新式 Web 应用程序。 部署：

1. 安装适用于 Visual Studio Code 的 Azure Static Web Apps 扩展 。
2. 在本地生成应用程序，确保应用程序按预期工作。
3. 在Visual Studio Code中，打开Azure资源管理器，找到Azure Static Web Apps。
4. 右键单击订阅，然后选择“ 创建静态 Web 应用”。
5. 按照提示连接 GitHub 存储库。 Azure 会自动创建 GitHub Actions 工作流。
6. 将更改推送到存储库以触发自动部署。

有关详细信息，请参阅 将 Web 应用部署到 Azure 静态 Web 应用。

将应用部署到 Azure 应用服务

当你需要为 Web 应用或 API 提供托管时，Azure 应用服务 非常适合。 可以使用、Visual Studio Code、Azure CLI或GitHub Actions进行部署azd。

即使未使用该方法最初部署，也可以使用任何可用方法重新部署到应用服务。 如果要切换方法，可能需要在重新部署之前进行一些配置。

对于特定于服务的部署路径，请从以下教程之一开始：

• 将 Node.js 和 MongoDB Web 应用部署到Azure 应用服务
• 使用 GitHub Actions 部署到应用服务
• 从 ZIP 包部署到应用服务

使用 Azure CLI 进行部署

若要使用 Azure CLI 部署 JavaScript 应用，请执行以下步骤：

1. 安装Azure CLI（如果尚未安装）。

2. 登录 Azure 帐户。

   az login
   

3. 创建或使用现有的应用服务计划和应用服务。

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. 将应用程序代码部署为 ZIP 文件或本地 Git 存储库。

   对于 ZIP 部署：

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   对于本地 Git 部署：

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

使用 GitHub Actions 进行部署

每当将更改推送到GitHub存储库时，GitHub Actions会自动执行部署过程。 若要为Azure部署设置GitHub Actions，请执行以下操作：

1. 在GitHub存储库中，创建目录.github/workflows/（如果不存在）。

2. 创建定义部署步骤的工作流文件（例如 azure-deploy.yml）。

3. 使用Azure登录操作对Azure进行身份验证。 推荐： 使用 OpenID Connect（OIDC）增强安全性，而不是将凭据存储为机密。

   选项 A：OpenID Connect（建议）

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   有关设置说明，请参阅使用 GitHub Actions配置 OpenID Connect。

   选项 B：基于凭据的身份验证（旧版）

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. 添加适用于托管服务的部署步骤（应用服务、Static Web Apps或容器应用）。

5. 提交工作流文件并将其推送到存储库，以激活自动部署。

有关更详细的指南，请参阅使用GitHub Actions进行部署。

部署到 "Azure Functions"

Azure Functions非常适合事件驱动的 JavaScript 应用和无服务器 API。

从 Visual Studio Code 进行部署：

1. 安装Azure Functions扩展。
2. 打开Azure资源管理器，然后选择Azure订阅。
3. 创建或选择函数应用。
4. 使用扩展命令发布本地项目。

有关服务指南，请参阅Azure Functions文档和 Functions 概述。

部署到 Azure 容器应用

Azure 容器应用为 JavaScript 应用程序提供无服务器容器托管。 部署：

1. 使用 Docker 容器化应用程序。 在项目根目录中创建一个 Dockerfile 。
2. 在本地生成和测试容器。
3. 将容器映像推送到 Azure 容器注册表。
4. 使用 Azure 容器应用扩展 或 Azure CLI 创建和部署容器应用。

有关完整指南，请参阅 Azure 容器应用上的 JavaScript 概述。

生成步骤

选择服务和部署路径后，决定何时进行构建。

根据应用程序的复杂性和部署需求，可以选择在部署之前或部署期间生成 JavaScript 应用：

• 在部署前构建：对于复杂或耗时的构建，请将应用程序打包到 zip 文件中并部署它。 部署包可让你控制生成过程，并允许在部署之前对其进行测试。
• 部署期间生成：对于更简单的版本，请使用Azure提供的环境变量SCM_DO_BUILD_DURING_DEPLOYMENT=true在部署期间生成应用。

部署槽位

当你已有一个正在运行的 App Service 应用，并且需要更安全的发布流程时，请使用部署槽位。

Azure 应用服务中的部署槽位 可用于为过渡和生产创建单独的环境。 通过使用槽，可以在过渡环境中测试应用，然后再将其与生产槽交换，确保部署顺畅且无错误。

不要使用部署槽位混合不同的部署目的。 所有部署槽位共享应用服务，因此需要确保流量模式和所有槽的预期用途相同。 如果需要托管的测试或阶段环境，请使用单独的应用服务。

连接到 Azure 托管环境

• 若要手动或偶尔访问托管环境，请参阅如何在 Azure 托管环境中查看文件。
• 对于自动或一致访问，请考虑采取措施来设置其中一种部署方法。

查看 Azure 托管环境中的文件

可通过多种方式立即查看托管的 Azure Web 应用或函数应用中的文件。 如果在托管资源中使用槽，则需要在查看文件之前确保位于正确的槽位上。

• Azure 门户 中查看文件 - 在托管资源的开发工具下选择 控制台。

• 在 VS Code 扩展中查看文件 - 在活动栏中选择Azure图标。 在“资源”部分中，选择订阅和服务。 文件节点提供了远程文件的视图。

  • Azure 应用服务和Azure Functions扩展都提供远程文件的视图。

  

在 Azure 门户中查看 HTTP 终结点

从 Azure 门户上的服务的“概览”页查看 HTTP 终结点。

相关内容

• 使用 Visual Studio Code 的部署教程
• 在 Azure 上托管应用
• Azure Static Web Apps 文档
• Azure 容器应用文档
• Azure 应用服务文档
• Azure Functions 文档