Question

我正在尝试在CloudFoundry上部署Angular（6）应用程序。我想将我的应用映射到http://myapp.domain.com/ mycontextpath 之类的路径上，因此有路径。为此，我使用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/

OR

ng build --prod --stats-json

我总是有404未找到结果。如果我将应用程序部署在没有路径的路由上（并且没有angular --base-href），那么一切都会很好地工作。我还尝试添加具有 pushstate：enabled 内容的 Staticfile 文件，但是在这种情况下，总是返回我的index.html。

感谢帮助

Answer 1

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

要使用Angular 6做到这一点，您可以使用以下命令更新angular.json文件：

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

并压缩 dist 文件夹内容。

Answer 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）使用以下命令设置您的./Static文件：

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属性需要自定义root）。这是推送到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"/>

如何使用带有http：// myapp / mycontextpath之类的路径的路由在Cloud Foundry上部署Angular应用程序？

2 个答案: