angular-cli@8.3.0からdeployコマンドが使えるようになったみたいなので早速使ってみたいと思います
ng deploy
angular cliのコマンドserveやgenerateなどに加えてdeployというコマンドが使えるようになりました
プロジェクトにng addでライブラリを追加することで使えるようになります
deployで追加できるライブラリは公式によると下記があります
- Firebase hosting
- Azure
- Now(Zeit)
- Netlify
- GitHub pages
今回はGitHub pagesへデプロイするようにしてみます
angular-cli-ghpages
すでに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" } }
ng build --prod時の設定をここで行うということですね
おわり
ということでng deployよさそうですね
普段コマンドラインオプションばかりでごにょごにょやっていたのでangular.jsonの中身を知るいい機会になりました
時間を見てNetlifyやFirebase hostingなども試してみたいと思います
