Angular 5项目如何在Firebase中部署Angular Universal渲染？

我帮你整理了Angular 5 Universal部署到Firebase的关键步骤，毕竟本地生产环境能正常跑，但云端出问题，大多是配置或部署流程没适配好，咱们一步步来：

一、先确认项目基础没问题 #

• 你已经能本地跑通npm run build:ssr && npm run serve:ssr，这一步就不用再折腾了，确保package.json里的build:ssr和serve:ssr脚本都正常执行就行。

二、适配 Firebase 的核心配置调整 #

1. 配置 Firebase 部署文件 #

在项目根目录新建firebase.json，内容要指定托管目录为编译后的客户端代码目录，同时把所有请求重写到服务端渲染的云函数：

{
  "hosting": {
    "public": "dist/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "functions": {
    "source": "dist/server"
  }
}

这里的ssr是咱们后面要创建的云函数名称，用来处理所有服务端渲染请求。

2. 修改服务端入口适配云函数 #

打开你的server.ts（或者项目里的服务端入口文件），把原本本地监听端口的代码改成适配Firebase云函数的形式：
原本地代码大概是这样：

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

替换成：

export const ssr = functions.https.onRequest(app);

别忘了在文件顶部导入Firebase Functions：

import * as functions from 'firebase-functions';

3. 安装 Firebase 相关依赖 #

先装全局的Firebase CLI，再装项目里的云函数依赖：

npm install -g firebase-tools
npm install firebase-functions firebase-admin --save

三、构建+部署全流程 #

1. 先执行本地构建，生成生产环境的客户端和服务端代码：

npm run build:ssr

2. 登录你的Firebase账号（没登过的话）：

firebase login

3. 初始化Firebase项目（还没初始化的话）：

firebase init

• 选择Hosting和Functions两个选项，关联你已经创建好的Firebase项目。
• 初始化Functions时选TypeScript，和Angular项目的技术栈更适配。

4. 最后部署到Firebase：

firebase deploy

四、常见坑排查 #

• 如果部署后出现500错误，去Firebase控制台的Functions->日志里看具体报错，大概率是依赖缺失或者路径不对：
  • 检查dist/server目录里有没有package.json，如果有，进去执行npm install再重新部署。
  • 确认server.ts里指向客户端资源的路径是对的，比如是不是../browser这种相对路径。
• 如果是404错误，检查firebase.json里的重写规则，确保所有请求都转发到ssr函数，没有漏写。

内容的提问来源于stack exchange，提问作者Fred