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