时间戳

首页 > 解决方案 > 在 Linux 运行节点上将 Angular 8 通用应用程序部署到 Azure 应用程序服务

angular - 在 Linux 运行节点上将 Angular 8 通用应用程序部署到 Azure 应用程序服务

问题描述

我已将标准 Angular 应用程序部署到 Azure。我只是将使用 express 的 index.js 文件添加到根目录，压缩 dist 文件夹并使用 web deploy 来发布应用程序。

Angular Universal 应用的输出是不同的；有两个文件夹，一个用于浏览器，一个用于服务器。

到目前为止我已经尝试过：

这只是输出 main.js 的内容。

如何让应用程序使用 SSR 运行？

标签： angularazureazure-devops

解决方案

要使其正常工作，需要对 Angular 应用程序进行更改并正确配置 DevOps 管道。

Angular 应用需要 3 处更改：

  1. 启用 SSR

ng add @nguniversal/express-engine

  1. 将通配符路由添加到 app-routing.module.ts

const routes: Routes = [ { ... { path: "**", redirectTo: "" } ];

为确保 App 容器启动并运行，Azure 将向 robots933456.txt 发送请求。如果未处理该路线，则应用程序将无法启动。

  1. 为生产更新 server.ts

替换 server.ts 中的这一行：

const distFolder = join(process.cwd(), 'dist/YOUR_APP_NAME/browser');

和：

let distFolder = join(process.cwd(), "browser");
if (!existsSync(distFolder)) {
 distFolder = join(process.cwd(), "dist/YOUR_APP_NAME/browser");
}

为什么？因为当您构建 Angular Universal 应用程序时，会输出两个文件夹：

  1. dist/YOUR_APP_NAME/浏览器
  2. dist/YOUR_APP_NAME/服务器

当您的应用程序部署到 Azure 时，服务器文件夹的内容将位于根目录，因此为确保本地构建和生产构建都能正常工作，需要为每个环境配置不同的 dist 文件夹。

这就是 Angular 更改的内容，其余工作在 Azure DevOps 中完成。

构建管道步骤：

  1. npm 步骤：在构建服务器上安装 Angular CLI

    install @angular/cli -g

  2. npm 步骤：安装节点包

    npm install

  3. 命令行步骤：使用 SSR 构建 Angular 应用程序

    npm run build:ssr

4: Copy files step: copy the server folder contents to a new dist folder

Source:

dist/YOUR_APP_NAME/server

Target:

client/YOUR_APP_NAME/deploy-dist
  1. Copy files step: copy the browser folder to the new dist folder

Source:

client/browser/dist/YOUR_APP_NAME/browser

Target:

client/browser/deploy-dist/browser

Steps 4 & 5 are required to have the correct folder structure.

  1. Command line: rename main.js

    rename main.js index.js

index.js is required to get express running.

  1. Archive files step: zip the deploy-dist folder

  2. Publish Pipeline Artifacts step: publish the zip

Release Pipeline step: Deploy the artifact using Azure App Service deploy

推荐阅读