[小ネタ]ngコマンドを使ってNetlifyにデプロイしてみる

どうも！大阪オフィスの西村祐二です。

NetlifyはUIや操作がシンプルで簡単なアプリケーションを公開するときなどで利用しています。

Netlifyへアプリケーションをデプロイする方法はWebからであったりCLIからなどいくつかあります。

今回はAngularのng deployコマンドを使ってNetlifyにデプロイできるnetlify-builderを紹介したいと思います。

試してみる

環境

Angular CLI: 8.3.23
Node: 12.13.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

前提条件

すでにNetlify上でサイトを作成済である前提で進めていきます。

セットアップ

netlify-deploy-testというAngularアプリケーションを作成します。

必要なライブラリをインストールします。

$ ng add @netlify-builder/deploy

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? API ID( Site ID ) of Netlify project xxxxx-xxxx-xxxxx-xxxx-xxxxxx
? Personal Access Tokens of Netlify Account　そのままEnter
    ✅️ Added "@netlify-builder/deploy" into dependencies
UPDATE angular.json (4056 bytes)
UPDATE package.json (1346 bytes)

API IDはNetlifyのWebサイトから作成したサイトの「Settings」=>Site Informationに記載されていますので、それを入力します。

その次にPersonal Access Tokensの入力を求められますが、誰でも見ることができる公開ファイルに機密情報を含めることは避けたいため、ココではそのままEnterします。入力しなくても環境変数からとってきてくれます。

設定

Netlifyから「Personal access tokens」を取得します。

サイトのhttps://app.netlify.com/user/applicationsから「New access token」からトークンを取得できます。

このトークンは環境変数に設定して利用します。

動作確認

NETLIFY_TOKENに環境変数として設定し、ng deployします。これNetlifyにアプリケーションをデプロイできます。

$ NETLIFY_TOKEN=xxxxxxxxxxxxxxxxxxx ng deploy
Executing netlify deploy command ...... 
? Building "netlify-deploy-test". Configuration: "production".
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {0} runtime-es2015.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.2987770fde9daa1d8a2e.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} polyfills-es5.6696c533341b95a3d617.js (polyfills-es5) 123 kB [initial] [rendered]
chunk {1} main-es2015.3ab6b009b58306a11f8c.js (main) 245 kB [initial] [rendered]
chunk {1} main-es5.3ab6b009b58306a11f8c.js (main) 294 kB [initial] [rendered]
chunk {4} styles.09e2c710755c8867a460.css (styles) 0 bytes [initial] [rendered]
Date: 2020-01-19T05:19:10.723Z - Hash: defe1296f4727c8769b3 - Time: 21237ms
✔ Build Completed
✔ User Verified
✔ Site ID Confirmed
Deploying project from the location ?  ./"dist/netlify-deploy-test

 ✔ Your updated site ? is running at https://xxxxxxxxxxxx.netlify.com

スクリプト化する

毎回、環境変数に設定するは面倒なので参考サイトをもとにスクリプト化しておきます。

スニペットに追加するとか、他にもいろんな方法があるかと思います。

今回は~/.bashrcに関数として設定する方法です。zshなどの環境が違う人は.zshrcなどに置き換えてください。

下記関数を設定します。

netliLove() {
  NETLIFY_TOKEN=<token> ng deploy
}

下記コマンドでデプロイすることができます。

$ netliLive

さいごに

Angularのng deployコマンドを使ってNetlifyにデプロイする方法を紹介しました。

このライブラリを使うことでNetlifyへのデプロイを効率化できそうです。また、「Personal access tokens」はファイルに埋め込まなくても環境変数でとってくることができるので、 CI/CD環境を作るときにも使えるかもしれません。

Angular CLIはng addでライブラリを追加するだけで、面倒な設定など必要なくなるのでとても便利だなと感じています。

自分でも時間があるときに何か作ってみたいと思います。

誰かの参考になれば幸いです。

参考サイト

https://www.netlify.com/blog/2019/09/17/using-the-angular-builder-for-netlify/