Ops design for Angular project

[snow-swallow]

Background We have 4 environments: dev, qa, staging and production. Each environment has different configurations, like: API entrypoint, web server (host, port, ssl, domain), compile params, deploy params, etc. So the purpose is to quickly build and deploy our web app on various environments thru simple cmd.

Design

1. create different environment files

   |-environments
   |-environment.dev.ts
   |-environment.prod.ts
   |-environment.qa.ts
   |-environment.stg.ts
   |-environment.ts

2. configure .angular-cli.json for corresponding environment files

     "environmentSource": "environments/environment.ts",
     "environments": {
       "local": "environments/environment.ts",
       "dev": "environments/environment.dev.ts",
       "qa": "environments/environment.qa.ts",
       "stg": "environments/environment.stg.ts",
       "prod": "environments/environment.prod.ts"
     }

3. create different proxy configurations

   |-proxy.conf.dev.json
   |-proxy.conf.qa.json
   |-proxy.conf.stg.json
   |-proxy.conf.prod.json

4. add start up commands for various environments

   "scripts": {
   "ng": "ng",
   "start": "ng serve --ssl --proxy-config proxy.conf.json --environment=local --deploy-url=/",
   "dev": "ng serve --ssl --proxy-config proxy.conf.dev.json --prod --environment=dev --sourcemaps --disable-host-check --deploy-url=/",
   "qa": "ng serve --ssl --proxy-config proxy.conf.qa.json --prod --environment=qa --sourcemaps --disable-host-check --deploy-url=/",
   "stg": "ng serve --ssl --proxy-config proxy.conf.stg.json --prod --environment=stg --sourcemaps --disable-host-check --deploy-url=/app/xyz/",
   "prod": "ng serve --ssl --proxy-config proxy.conf.prod.json --prod --sourcemaps --disable-host-check --deploy-url=/app/xyz/",
   ...

[snow-swallow]

Update at 20180802

Considering about the long time cost by aot and other build params that used on ng serve, we finally change our deployment to "prebuild + deploy".

1. prebuild: build Angular src into static resources (minified JS, CSS, IMG, etc)
2. deploy: we choose Nginx server as HTTP server, so just move the build outcome into the www dir.

Reference

https://angular.cn/guide/deployment