2

我正在尝试在 CloudFoundry 上部署我的 Angular (6) 应用程序。我想将我的应用程序映射到http://myapp.domain.com/mycontextpath之类的路线上，所以WITH A PATH。为此，我使用 yml 文件部署我的应用程序（CF PUSH），例如：

---
[...]
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
applications:
- name: myangularapp
  routes:
    - route: myapp.domain.com/mycontextpath

事实上，我尝试了多种方法，例如使用或不使用 --base-href 参数构建我的应用程序。

ng build --prod --stats-json --base-href /mycontextpath/

或者

ng build --prod --stats-json

我总是有一个 404 not found 结果。如果我在没有路径的路线上部署应用程序（并且没有角度 --base-href），那么一切都运行良好。我也尝试使用pushstate : enabled添加静态文件文件但在这种情况下，总是返回我的 index.html。

感谢帮助

4

2 回答 2

3

事实上，我通过向我推送到 Cloud Foundry 的 dist.zip 文件添加一个额外的mycontextpath根目录来解决我的问题。

要使用 Angular 6 执行此操作，您可以使用以下命令更新 angular.json 文件：

{
  [...]
  "projects": {
    "myangularapp": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            "outputPath": "dist/mycontextpath",
  [...]

和 zip dist文件夹内容。

于 2018-08-01T10:35:16.987 回答
2

实际上，您需要在最终工件中使用 contextpath 文件夹，并在构建时使用 base-href 选项。但是如果你想要 pushstate，你需要一些额外的步骤（见下文）

所以，完整的答案是：

1) 在构建命令中添加 base-href 选项：

ng build --prod --base-href /mycontextpath/

2）添加一个对应于 mycontextpath 的额外文件夹（几乎从 Angular 6 完成）：

{
  [...]
  "projects": {
    "myangularapp": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            "outputPath": "dist/mycontextpath",
  [...]

3）在清单文件中设置路线：

---
[...]
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
applications:
- name: myangularapp
  routes:
    - route: myapp.domain.com/mycontextpath

4）设置你的 ./Staticfile ：

root: dist 
location_include: includes/*.conf

5) 在 ./nginx/conf/includes/push_state.conf 中创建您的自定义位置配置：

location /mycontextpath/ {

    if (!-e $request_filename) {
      rewrite ^(.*)$ /mycontextpath/ break;
    }

    index index.html index.htm Default.htm;

}

6）推送 dist 文件夹而不是 mycontextpath （这是因为 location_include 属性需要自定义根目录）。这是推送到 CF 的最终结构：

./Staticfile
./nginx/conf/includes/push_state.conf
./dist/mycontextpath/index.html
./dist/mycontextpath/main-es2015.543563456.js
...

7) 关于静态资产，请务必使用相对于 base-href 的路径：

<img alt="unicorn" src="./assets/unicorn.png"/>
于 2020-02-25T10:24:45.897 回答