Netlify と PWA で JAMstack を目指す

静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。

PWA を作る方法は色々とありますが Vue CLI で簡単にプロジェクト生成できるのでちょっと試してみました。

プロジェクト作成時にマニュアル選択にします。

f:id:kondoumh:20190526084153p:plain:w330

フィーチャー選択で PWA Support を選択します。

f:id:kondoumh:20190526084212p:plain

あとは好みで選択してプロジェクトを生成。

PWA アプリは前に作ったトイ・ダイアグラムエディタを流用し GitHub にリポジトリを作りました。

blog.kondoumh.com

Netlify に GitHub アカウントでサインアップして GitHub のリポジトリをピックアップ。

f:id:kondoumh:20190526094434p:plain

ビルド設定をして Deploy site ボタンを押してしばらく待つとデプロイが完了します。

f:id:kondoumh:20190526094317p:plain

あっけなくデプロイが終わりました。Deploy log も Web UI で確認できるので、エラー原因の特定も簡単です。

f:id:kondoumh:20190526095201p:plain

デプロイされたサイトにアクセスして、PWA アプリをインストールしてみました。

f:id:kondoumh:20190526095431p:plain

ちゃんと動いてます。

iPad の Safari や Android の Chrome からも PWA としてインストールできました。

このサンプルはクライアントサイドだけで完結するので、Tumbr API を叩いて簡単な画面描画をするアプリを PWA にしてデプロイしてみました。

blog.kondoumh.com

こちらも問題なく動作。

外部 API を叩いてちょっとしたタスクをこなすための PWA は手軽に作れるようになりました。

主にクライアント側の JavaScript と API で動的な処理を行い、HTML や CSS はデプロイ時に pre build するというアプリケーションアーキテクチャを JAMstack というそうです。

jamstack.org

Netlify ではデプロイ時にプロジェクトのビルドスクリプトを実行して成果物をデプロイしてくれます。

  • 静的サイトジェネレータでサイトをビルド -> 静的サイト公開
  • Vue CLI などのアプリビルド -> PWA 公開
  • ビルド時にJSON 生成 -> JSON データ公開

のように。他の API やサイトのスクレイピング結果などをアグリゲートするような用途にマッチします。

さらに、Functions を使えば AWS Lambda をラップしたサーバーレスな API も作ることができます。

www.netlify.com

JAMstack なアプリ開発を支援する機能どんどん実装されている感じがします。

以前 Web IDE である CodeSandbox を使ってみましたが、CodeSandbox に Netlify へのデプロイ機能が統合された模様です。

blog.kondoumh.com

www.netlify.com

サーバーレスで、ブラウザだけでアプリの開発からデプロイまで完結してしまう・・。そんな時代になりました。