Netlify
Githubでリポジトリ管理してあるAngularアプリケーションをNetlifyによって自動デプロイするまでをメモ。
簡単にステージング環境を作成したい方や、デプロイをサクッとやりたい方向け。
Netlifyはホスティングサービス。
Web Projectsのビルドからデプロイ、管理まで色々やってくれるサービスで、Github(のほかGitLabやBitbucket)でリポジトリ管理しているのを自動デプロイしてくれたりとても便利。
前提
- AngularアプリをGithubで管理済み(最新版をcommit,remote add,push等してある状態と仮定)
- Angularはバージョン2以降でangular-cliを導入済
Netlifyでデプロイ
GithubアカウントでNetlifyにsign up
https://www.netlify.com/ のSign upからGithubアカウントでsign up（2回目以降ならSign in）-
リポジトリ選択
- 「New site from Git」ボタンを押す
- Continuous DeploymentでGitHubを選択
- デプロイしたいGithubのリポジトリを選択 -> organizationアカウントのリポジトリが表示されない場合はこちら
-
リポジトリ設定
- Build command: ng build --prod
- Publish directory: dist/
- Production branch: master
以上の設定をし、Deploy siteボタンを押す。package.jsonがあれば自動でinstall,buildなどが始まりデプロイされる。
これだけで簡単にデプロイ終了。
Githubのリポジトリと連携するのがとても手軽にできますね。
Githubのorganizationsでデプロイの場合
Githubのorganizationsアカウントの場合、注意が必要。
Github側
「organization settings」の「Third-party access」タブにある
「Third-party application access policy」が「No restrictions」
になっていないと連携できない！！
なっていない場合はそのrestrictionをremoveすると、organizationsアカウントのリポジトリもNetlify側で表示されるようになる