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

Question

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

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

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

• 压缩浏览器和服务器文件夹
• 添加了一个 index.js，以 main.js 为起点

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

如何让应用使用 SSR 运行？

Answer 1

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

Angular 应用需要 3 处更改：

1. 启用 SSR

ng add @nguniversal/express-engine

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

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

为确保应用容器启动并运行，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/server

当您的应用部署到 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：复制文件步骤：将服务器文件夹内容复制到新的dist文件夹

来源：

dist/YOUR_APP_NAME/server

目标：

client/YOUR_APP_NAME/deploy-dist

5. 复制文件步骤：将浏览器文件夹复制到新的dist文件夹中

来源：

client/browser/dist/YOUR_APP_NAME/browser

目标：

client/browser/deploy-dist/browser

第 4 步和第 5 步需要正确的文件夹结构。

6. 命令行：重命名 main.js

   rename main.js index.js

index.js 是快速运行所必需的。

1. 归档文件步骤：压缩 deploy-dist 文件夹

2. 发布管道工件步骤：发布 zip

发布管道步骤： 使用 Azure App Service deploy 部署工件