如何使用ng cli在Heroku上部署Angular应用程序？

Question

我有以下package.json：

{
  "name": "app",
  "version": "1.0.0",
  "engines": {
    "node": "11.13.0",
    "npm": "6.9.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "devDependencies": {
    "@angular/cli": "^8.0.2",
    "typescript": "3.4.5",
    ...
  }
  ...
}

和以下.gitlab-ci.yml：

before_script:
  - echo "Execute scripts which are required to bootstrap the application. !"

after_script:
  - echo "Clean up activity can be done here !."

# Cache modules in between jobs
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
  - node_modules/

stages:
  - deploy

deploy_staging:
  stage: deploy
  image: ruby:2.3
  script:
    - apt-get update -qy
    - apt-get install -y ruby-dev
    - gem install dpl
    - dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
  environment:
    name: staging
    url: https://$HEROKU_APP_STAGING.herokuapp.com
  only:
    - master

[当我尝试在Heroku上部署我的应用程序时，我获得了成功的部署，但是在启动应用程序时失败了：sh: 1: ng: not found。

在heroku上使用ng是否可能/很好？我想念什么？

Answer 1

在deploy_staging文件的.gitlab-ci.yml部分中，将提取不包含已安装的ruby:2.3或npm的图像angular-cli（因此可能会导致ng: not found错误）。看来，您需要在分配给用于构建Angular应用程序的build上添加.gitlab-ci.yml阶段并生成捆绑文件（Angular应用程序的主目录中的dist文件夹）。例如，.gitlab-ci.yml文件可能看起来像这样：

⋮

stages:
    - build
    - deploy

# New stage for building your Angular app
build_staging:
    stage: build
    image: trion/ng-cli
    allow_failure: false
    script:
        - npm install
        - ng build --prod

deploy_staging:
    stage: deploy
    image: ruby:2.3
    when: on_success
    dependencies: 
        - build
    script:
        - apt-get update -qy
        - apt-get install -y ruby-dev
        - gem install dpl
        - dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
    environment:
        name: staging
        url: https://$HEROKU_APP_STAGING.herokuapp.com
    only:
        - master

⋮