如何在cPanel上部署Angular 17 SSR应用？

直接将dist目录上传到public_html不可行，因为Angular SSR依赖Node.js运行服务器端渲染逻辑，而cPanel默认仅支持静态文件托管。以下是具体部署步骤：

1. 确认主机Node.js支持 #

• 登录cPanel，找到「Node.js管理器」功能，确认主机提供Node.js环境，版本需≥v18（Angular 17的最低要求）。

2. 整理部署文件 #

• 本地打包完成后，从dist/my-project目录中提取以下内容：
  • browser文件夹（前端静态资源）
  • server文件夹（服务器端渲染逻辑）
  • prerendered-routes.json（若启用了预渲染）
• 将这些文件打包为zip，剔除.DS_Store这类冗余文件。

3. 上传文件到主机 #

• 进入cPanel「文件管理器」，在根目录（如home/你的用户名）下新建文件夹（例如angular-ssr），将zip文件上传后解压至该文件夹。

4. 创建Node.js应用 #

• 打开cPanel「Node.js管理器」，点击「创建应用程序」：
  • 应用根目录：选择刚才新建的angular-ssr文件夹
  • 应用启动文件：填写server/server.mjs（Angular 17 SSR的服务器入口文件）
  • 环境选择「Production」
  • 端口由系统自动分配，无需手动修改
  • 点击「创建」完成应用配置

5. 配置反向代理（核心步骤） #

Node应用在指定端口运行，需通过反向代理将域名请求转发到Node服务：

• 进入cPanel「Apache配置」→「反向代理」：
  • 代理名称：自定义（如AngularSSR）
  • 目录：填写/（表示整个域名的请求都代理）
  • 目标URL：填写Node.js管理器中显示的应用地址（格式如http://127.0.0.1:XXXX，端口需与创建应用时分配的一致）
• 保存配置，Apache会自动生成对应的代理规则。

6. 优化静态资源托管（可选） #

为提升性能，可让Apache直接处理静态资源，仅将动态请求转发到Node服务：

• 将browser文件夹内的assets、*.js、*.css、favicon.ico等静态文件复制到public_html目录
• 在反向代理规则中添加例外：对/assets/*、/*.js、/*.css、/favicon.ico这类路径，跳过代理直接由Apache返回静态文件。

7. 启动并测试应用 #

• 返回Node.js管理器，找到创建的应用，点击「启动」
• 访问你的域名，查看页面源代码：若能看到页面的完整HTML渲染内容（而非仅Angular占位符），说明SSR部署成功。

注意事项 #

• 权限设置：确保angular-ssr文件夹权限为755，文件权限为644，避免运行时权限错误
• 环境变量：若项目依赖环境变量（如API地址），在Node.js管理器的「设置」中添加对应变量
• 预渲染路由：若包含prerendered-routes.json，Node服务会自动优先使用预渲染页面，无需额外配置

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