在Cloud Foundry中部署Angular应用的技术咨询

你已经完成了本地验证和生产构建的关键步骤，不过从你描述的操作和配置来看，有几个容易导致部署失败或异常的细节需要调整，我来一一说明：

1. 修复manifest.yml的语法问题 #

YAML对格式要求非常严格，你给出的配置存在语法错误，正确的写法应该是这样：

applications:
- name: deploy-ng4
  memory: 128M
  buildpack: staticfile_buildpack

需要注意这几点：

• applications是数组类型，每个应用项必须以-开头并缩进
• 每个属性（比如name、memory）要相对于上级项缩进2个空格（保持统一缩进即可）
• 静态文件构建包不需要写完整的GitHub地址，直接使用官方提供的staticfile_buildpack别名，Cloud Foundry会自动拉取最新的稳定版本

2. 调整部署目录的结构 #

你把dist文件夹复制到新目录后，要确保部署目录的结构符合CF的要求：
推荐的目录结构是：

部署目录/
├── manifest.yml
└── dist/
    ├── index.html
    ├── main.[hash].js
    └── 其他编译后的静态资源

或者更省心的方式：把dist文件夹里的所有内容直接复制到部署目录的根目录，这样CF可以直接读取到入口文件index.html，避免路径匹配问题。

如果保留dist文件夹的结构，需要在manifest.yml里添加path字段指定静态资源的位置：

applications:
- name: deploy-ng4
  memory: 128M
  buildpack: staticfile_buildpack
  path: ./dist

3. 执行正确的部署命令 #

进入部署目录后，直接执行以下命令即可触发部署：

cf push

如果部署过程中遇到错误，想要查看详细的日志信息，可以添加--verbose参数：

cf push --verbose

4. 解决静态资源加载404的问题 #

如果部署成功后打开应用出现资源加载失败的情况，大概率是Angular构建时的基础路径配置不对。你可以在执行生产构建时指定--base-href参数，匹配Cloud Foundry分配的应用路由：

ng build --prod --base-href "/deploy-ng4/"

这里的/deploy-ng4/要和你manifest.yml里的name字段一致，因为CF默认的应用路由格式是应用名.你的CF平台域名。

5. 内存配置的小建议 #

128M的内存配额对于纯静态的Angular应用来说完全足够，但如果后续你需要添加额外的服务或者出现内存不足的错误，可以考虑把内存调整到256M，提升稳定性。

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