Angularでng deployコマンドを使ってみる

angular-cli@8.3.0からdeployコマンドが使えるようになったみたいなので早速使ってみたいと思います

ng deploy

angular cliのコマンドserveやgenerateなどに加えてdeployというコマンドが使えるようになりました

プロジェクトにng addでライブラリを追加することで使えるようになります

deployで追加できるライブラリは公式によると下記があります

Firebase hosting
Azure
Now(Zeit)
Netlify
GitHub pages

Angular - Deployment

angular.io

今回はGitHub pagesへデプロイするようにしてみます

angular-cli-ghpages

angular-schule/angular-cli-ghpages: 🚀 Deploy your 🅰️Angular app to GitHub pages directly from the Angular CLI! Available on NPM.

github.com

すでにangular-cli-ghpagesを使っている場合一度uninstallしてから ng addで追加します

まだRCが取れていないのでただ追加すると対応されてないバージョンがインストールされてしまうので@nextつけてます（2019-08-24現在）

npm uninstall angular-cli-ghpages
npx ng add angular-cli-ghpages@next

未対応のバージョンだと追加時に下記メッセージが出力される

The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

追加が成功するとangular.jsonのprojects.{project-name}.architect.deployに設定が追加されます

ng xxxで使えるコマンドが追加されたということですね

angular.json

             "exclude": []
           }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {}
         }
       }

デプロイ

GitHub pagesだとよくあるbase-hrefに関しては以前と同様のオプションを追加してあげればOK

gh-pagesブランチへのpush時にCIのプロセスをトリガーさせたくない場合などはこちらも以前と同様オプションを追加すればOK

$ npx ng deploy --base-href=/ngx-sample/ --message="[skip ci] deploy to GitHub Pages"
📦 Building "ngx-sample". Configuration: "production". Your base-href: "/ngx-sample/"

chunk {0} runtime.e4ad693c7aeac9a909d0.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.a6a735778041614d4db9.js (main) 2.2 MB [initial] [rendered]
chunk {2} polyfills.baad0f4292ddf7c90873.js (polyfills) 62.4 kB [initial] [rendered]
chunk {3} polyfills-es5.26f53a9590f0c8238c0d.js (polyfills-es5) 135 kB [initial] [rendered]
chunk {4} styles.2568d58e57a6400f789b.css (styles) 770 kB [initial] [rendered]
chunk {scripts} scripts.d56bc44d788e51855ba7.js (scripts) 209 kB [entry] [rendered]
Date: 2019-08-23T20:51:30.435Z - Hash: 1a09b88637d4de69973f - Time: 202054ms
🚀 Successfully published via angular-cli-ghpages! Have a nice day!

デプロイできました

angular.jsonのoptionsに記述しても適用されるみたいですね

angular.json

deploy": {
 "builder": "angular-cli-ghpages:deploy",
 "options": {
   "base-href": "/ngx-sample/",
   "message": "[skip ci] deploy to GitHub Pages"
 }

ビルド設定

コマンド実行時にはangular.json -> deploy.builder ->angular-cli-ghpages:deployが呼ばれていますが

中身を追ってみるとビルドとデプロイ両方行っているようでした

BuilderContext.scheduleTargetでビルドを行っている
BuilderContextはangular-cliに実装されている

以前はビルドとパブリッシュのコマンドを分けてCircleCIからデプロイするようにしていました

build

npx ng build --aot --no-progress --base-href '/ngx-sample/'

publish

ngh -m '[skip ci] deploy to GitHub pages' --dir dist/

今回ng deployでサクッとデプロイができるようになりましたがビルド時の設定をカスタマイズしている場合はどこかで読み込ませる必要があります

このあたりはbuilderの実装次第だと思いますがangular-cli-ghpagesの場合はビルド時の設定まではdeploy.optionsに書いてもコマンドラインオプション経由でも渡せるようにはなってなさそうです（もしかしたらオプションによるかも）

こちらはangular.jsonのarchitect.build.configurations.productionの中の設定を変更することでビルドオプションを変更できます

angular.json（一部抜粋）

"production": {
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "progress": false,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
}