Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)

2020-03-20T13:51:56+09:00

最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。
いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。
いままで試したものをまとめてみた。

ほしかったもの

主に開発してるのがCGM系のWebサービスなので、

動的なOGP画像などが設定できる(OGP芸)
カスタムドメインが使える
日次のランキング集計などの定期実行ができる

が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。

試した5つのパターン

試したのは以下の5パターン。試してみた順で記載。

Nuxt(SSR) + Cloud Function
起動がかなり遅かった。。実装も大変なのでNG
Nuxt(SPA) + Firebase Hosting
構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要
Nuxt(SPA) + Netlify
プレレンダリングでOGP芸が楽。定期実行はFunctionsでできる
Nuxt(SSR) + GAE(f1:256M)
メモリの制限きつく、たまに落ちる。。定期実行はcron.yamlでできる
Nuxt(SSR) + Heroku(free:512M) + Cloudflare
メモリ多くてよい。SSLはないのでCloudflareを併用。定期実行はHeroku Scheduler

SPAで十分であれば、「3.Nuxt(SPA) + Netlify」が構築も簡単で良かった。
積読ハウマッチは、現在この構成。

SSRの場合、「5. Nuxt(SSR) + Heroku(free:512M) + CloudFlare」が良い感じ。
へんあいマップがこの構成。

各パターンについて

1. Nuxt(SSR) + Cloud Function

一番はじめに積読ハウマッチでやろうとした構成。

細かいやり方は、以下の記事の「Firebase Cloud Functionsの設定してSSRできるようにする」あたりに。
・Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも) - くらげになりたい。

当時は動的ページのSEO対応するには、この方法が多く検索に出ていたので試したけど、
Cloud Functionのコールドスタートがつらすぎてお蔵入り。。SPAでいくことに。。

2. Nuxt(SPA) + Firebase Hosting

積読ハウマッチをリリースしたときの構成。

課題だった動的ページのSEOは、Cloud Functionsを経由して返す方法で対応。
こちらも当時よく検索に出てたけど、実装が大変そうだったので2番手に。

細かいやり方は、以下の記事に。（2020/03/22追記: OGP画像生成系の記事を追加）
・Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ - くらげになりたい。
・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと - Qiita
・Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。
・Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。

カスタムドメインについては、Firebase HostingでSSLと合わせて無料で設定可能。

定期実行は、Cloud Functionsでできるのでそれを利用した。
・関数のスケジュール設定 | Firebase
・Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita

ただ、Cloud Functionsの定期実行は、
「Googleアカウントごとに3つのジョブを無料で使用できる」
なので、注意が必要。プロジェクトごとじゃない。。

3. Nuxt(SPA) + Netlify

積読ハウマッチの現在の構成。

NetlifyのPrerenderingが無料化されて使えるようになり、よいという話を聞くように。。

実装が複雑で、変更もしにくかったので、この方法に。
Netlify自体がCDNも提供していているので、すこしはやくなった(気がする)

カスタムドメインも、NetlifyのDNSを設定して無料で対応できる。

定期実行は、2.と同じ感じで、Cloud Functionsのまま。

コード量も減って変更もしやすくなったので、OGP画像の改善とかが楽にできるように。。(´ω｀)

4. Nuxt(SSR) + GAE(f1:256M)

SPAの課題として、初期表示が遅いのでなんとかしたいなと、SSRの環境を模索しはじめ。。
公開していないけど、1つ作ってみた。

試してみたところ、起動するだけでメモリ上限すれすれで、複数アクセスがあったりすると、落ちる場合も。。
(ts-nodeで動かしているのも悪い気がしている。。)

ただ、定期実行はcron.yamlを用意すればURLに送信でき、無料範囲も広い。
料金も「その他のリソース」をみるとcronは無料のよう。
・cron.yaml を使用したジョブのスケジューリング

カスタムドメインやSSLも無料で利用できる感じ。(試してないので未確認)

5. Nuxt(SSR) + Heroku(free:512M) + Cloudflare

GAEでうまくいかなかったので、無料でメモリも多いHerokuを利用。
へんあいマップがこの構成で稼働中。

定期実行は無料のアドオン(Heroku Scheduler)が利用できる。
Nuxt側でserverMiddlewareを用意すればOK。

ただ、メモリは多く定期実行もが、Herokuの無料枠だと制限も多い。

SSLは非対応
30分アクセスがないとスリープする
クレジットカードの登録で1000時間/月xアカウント
(未認証だと550時間/月xアカウント)

1. SSLは非対応

単体だけだとSSLに対応していないので、Cloudflareを併用。
CloudflareがCDNも提供してくれるので良い感じに。

2. 30分アクセスがないとスリープする

これは、Heroku Schedulerを使えばOK。
任意のURLを叩けるため、15分毎などスリープしないようにしておく。

3. 無料枠は1000時間/月xアカウント

1000時間あれば、24時間x31日でも744時間なので、大丈夫な感じ。
ただ、アカウント単位での無料枠なので、複数アプリを無料で稼働はできない。。

実際のやりかたとかは、

以下の記事に。
・Heroku+CloudflareなNuxtでSSRしてみる - くらげになりたい。

まとめ

いろいろ試してみたけど、Nuxt.jsを無料で公開するときは、

SPAならNetlify
- prerenderingで動的ページのSEOも対応
- カスタムドメインやSSLもNetlifyでOK
- 定期実行はCloud Functionsで。
- ただし、定期実行は1アカウントにつき、3ジョブまで
SSRならHeroku
- SSRで動的ページのSEOも対応
- 定期実行はHeroku Schedulerで
- Cloudflareを併用し、SSL対応
- 無料枠は1アカウントにつき、1アプリが限界かも

SSRの方は他にCloud RunやZEIT nowがある。
Cloud Runは立ち上げがGAEより遅いときので後手だけど、
ZEIT nowは気になってるので試してみたい(´ω｀)

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで！

へんあいマップもリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!
へんあいマップも、Nuxt.js+Firebaseで開発してます!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

「GAE」の記事 - Crieit

Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)