Question

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

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

我想知道如何将该应用程序部署为天蓝色。考虑到它有两个dist文件夹（dist，dist-server）。

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

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

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

Answer 1

/server.ts-将文件夹重新映射为dist /浏览器和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”，应复制您在本地工作的内容。

将Angular Universal部署到Azure或Netify（dist和dist-server文件夹）

1 个答案: