最近JAMStackに関して調べる事が多く、Netlifyの簡単さに感動したので紹介する。Nuxt.jsは動的Webサイトでも利用される事も多いが、静的Webサイトジェネレーターとしても優秀で柔軟性がある。今回はNuxt.jsが正式なTypeScriptサポートがアナウンスされたので、nuxt-ts
を用いて、GithubのプロジェクトをNetlifyにページ公開する所まで辿る。
静的WebサイトホスティングサービスのSaaS。Github/GitLab連携、自動ビルド・デプロイ、Functions、A/B Testingなど様々な機能がAll-In-Oneで入った凄いやつ。
既にサンプルは用意したので、以下のレポジトリからCloneするかForkして、Github上にプロジェクトを作っておく。
git clone https://github.com/tamanyan/nuxt-ts-netlify.git <project-name>
cd <project-name>
yarn or npm install
New site from Git
ボタンからプロジェクトを作成。
Githubを選択して、自分がデプロイしたいプロジェクトを選択する。
自分で作成したNuxt TypeScriptのプロジェクトを選択する。
以下の三点を設定する
yarn generate
dist
追加のビルド設定だと、環境変数なども組み込めるようだ。
正直に書いてて言うのも何だが簡単なので、この指示を見なくとも殆どの人が作成できるだろう。
次はプロジェクトのトップページに飛ぶので、 Deploys
のタブを選択して、ビルド及びデプロイ状況を確認する。
Netlifyはブランチへのプッシュごとに自動ビルド・デプロイが走るので、CI/CDサービスと連携する必要がない。普通だとCI/CDサービスにデプロイ用のCLIツールをインストールして、コンフィグyamlファイルにコマンドを書いて、アクセスキーとなる環境変数を設定するなど意外と面倒くさい事が待っているが、Netlifyではそれらの事を全くしなくとも良い。
先程設定した、ビルドコマンドが走ってるのが見える。ビルドが終わったら、もう公開準備は終了。
このあとトップページに行くと、公開URLが見えているので、それをクリックすると終わり。わーすごい簡単。頭が馬鹿になりそう。完成したサンプルはここのURLに置いておく。
私がNetlifyに感動したのはJAMStackなアプリ、静的Webサイト+マイクロAPIでサービスを組む上でこれ程、丁度良いサービスが揃っているのは見たことなかった。あまりにも簡単でブログにまとめるほどの事なのだろうか?若干気を揉んだが、ここで終わりでは面白くないので、次回はSplit Testing
やFunctions
を試してみる。