angular - 将 Angular Universal 部署到 Azure 或 Netify(dist 和 dist-server 文件夹)

Question

我有一个使用 Universal 的 Anugular 6 应用程序。

通用/服务器端渲染在本地工作。

我想知道如何将此应用程序部署到 azure 。考虑到它有两个 dist 文件夹(dist、dist-server)。

我可以设置 Azure 网站并添加 dist 文件夹，但我不确定如何部署这两个文件夹以启用服务器端渲染。

我也在考虑使用 Netlify 进行托管。

如何在这些提供商上设置这两个文件夹？有人成功做到过吗？

Answer 1

/server.ts - 将文件夹重新映射为 dist/browser 和 dist/server。

const DIST_FOLDER = join(process.cwd(), 'dist');
const APP_NAME = 'browser';

const {
  AppServerModuleNgFactory,
  LAZY_MODULE_MAP
} = require(`./dist/server/main`);

// other code //

app.set('views', join(DIST_FOLDER, APP_NAME));

// Static Assets
app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME), {
  maxAge: '1y'
}));

更新 angluar.json

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",

和

 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },

使用 Netlify，您可以指定您的分支和要在部署时运行的构建命令 - 例如“yarn run prod:ssr”，它应该复制您在本地工作的内容。