最近JAMStackに関して調べる事が多く、Netlifyの簡単さに感動したので紹介する。Nuxt.jsは動的Webサイトでも利用される事も多いが、静的Webサイトジェネレーターとしても優秀で柔軟性がある。今回はNuxt.jsが正式なTypeScriptサポートがアナウンスされたので、nuxt-tsを用いて、GithubのプロジェクトをNetlifyにページ公開する所まで辿る。

Netlifyとは？

静的WebサイトホスティングサービスのSaaS。Github/GitLab連携、自動ビルド・デプロイ、Functions、A/B Testingなど様々な機能がAll-In-Oneで入った凄いやつ。

Nuxt TypeScriptのサンプルプロジェクトをClone

既にサンプルは用意したので、以下のレポジトリからCloneするかForkして、Github上にプロジェクトを作っておく。

git clone https://github.com/tamanyan/nuxt-ts-netlify.git <project-name>
cd <project-name>
yarn or npm install

GitHubからNetlifyプロジェクト作成

New site from Gitボタンからプロジェクトを作成。

デプロイしたいWebサイトのレポジトリをGitHubから選択

Githubを選択して、自分がデプロイしたいプロジェクトを選択する。

自分で作成したNuxt TypeScriptのプロジェクトを選択する。

Netlify上にWebサイトをビルド

以下の三点を設定する

• ビルドするブランチ
• 静的Webサイトをビルドするコマンドを設定。ここではyarn generate
• ビルド先のディレクトリを指定。ここではdist

追加のビルド設定だと、環境変数なども組み込めるようだ。

正直に書いてて言うのも何だが簡単なので、この指示を見なくとも殆どの人が作成できるだろう。

Webサイトが公開されているかを確認する

次はプロジェクトのトップページに飛ぶので、 Deploysのタブを選択して、ビルド及びデプロイ状況を確認する。

Netlifyはブランチへのプッシュごとに自動ビルド・デプロイが走るので、CI/CDサービスと連携する必要がない。普通だとCI/CDサービスにデプロイ用のCLIツールをインストールして、コンフィグyamlファイルにコマンドを書いて、アクセスキーとなる環境変数を設定するなど意外と面倒くさい事が待っているが、Netlifyではそれらの事を全くしなくとも良い。

先程設定した、ビルドコマンドが走ってるのが見える。ビルドが終わったら、もう公開準備は終了。

このあとトップページに行くと、公開URLが見えているので、それをクリックすると終わり。わーすごい簡単。頭が馬鹿になりそう。完成したサンプルはここのURLに置いておく。

最後に

私がNetlifyに感動したのはJAMStackなアプリ、静的Webサイト+マイクロAPIでサービスを組む上でこれ程、丁度良いサービスが揃っているのは見たことなかった。あまりにも簡単でブログにまとめるほどの事なのだろうか？若干気を揉んだが、ここで終わりでは面白くないので、次回はSplit TestingやFunctionsを試してみる。