静的サイトをホスティングできる Netlify 流行ってます。Git リポジトリを指定するだけでビルド・デプロイでき、CDN でリソースをキャッシュしてくれるので、PWA のホスティングにも向いています。
PWA を作る方法は色々とありますが Vue CLI で簡単にプロジェクト生成できるのでちょっと試してみました。
プロジェクト作成時にマニュアル選択にします。
フィーチャー選択で PWA Support を選択します。
あとは好みで選択してプロジェクトを生成。
PWA アプリは前に作ったトイ・ダイアグラムエディタを流用し GitHub にリポジトリを作りました。
Netlify に GitHub アカウントでサインアップして GitHub のリポジトリをピックアップ。
ビルド設定をして Deploy site
ボタンを押してしばらく待つとデプロイが完了します。
あっけなくデプロイが終わりました。Deploy log も Web UI で確認できるので、エラー原因の特定も簡単です。
デプロイされたサイトにアクセスして、PWA アプリをインストールしてみました。
ちゃんと動いてます。
iPad の Safari や Android の Chrome からも PWA としてインストールできました。
このサンプルはクライアントサイドだけで完結するので、Tumbr API を叩いて簡単な画面描画をするアプリを PWA にしてデプロイしてみました。
こちらも問題なく動作。
外部 API を叩いてちょっとしたタスクをこなすための PWA は手軽に作れるようになりました。
主にクライアント側の JavaScript と API で動的な処理を行い、HTML や CSS はデプロイ時に pre build するというアプリケーションアーキテクチャを JAMstack というそうです。
Netlify ではデプロイ時にプロジェクトのビルドスクリプトを実行して成果物をデプロイしてくれます。
- 静的サイトジェネレータでサイトをビルド -> 静的サイト公開
- Vue CLI などのアプリビルド -> PWA 公開
- ビルド時にJSON 生成 -> JSON データ公開
のように。他の API やサイトのスクレイピング結果などをアグリゲートするような用途にマッチします。
さらに、Functions を使えば AWS Lambda をラップしたサーバーレスな API も作ることができます。
JAMstack なアプリ開発を支援する機能どんどん実装されている感じがします。
以前 Web IDE である CodeSandbox を使ってみましたが、CodeSandbox に Netlify へのデプロイ機能が統合された模様です。
サーバーレスで、ブラウザだけでアプリの開発からデプロイまで完結してしまう・・。そんな時代になりました。