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

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

### ほしかったもの

主に開発してるのが[CGM系のWebサービス](https://tsundoku.site)なので、

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

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

### 試した5つのパターン

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

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

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

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


### 各パターンについて

#### 1. Nuxt(SSR) + Cloud Function

一番はじめに[積読ハウマッチ](https://tsundoku.site)でやろうとした構成。  

<img width="870" alt="スクリーンショット 2020-03-20 11.43.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/7fa5a956-cec1-9117-1d5d-f769eae53a32.png">


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

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

#### 2. Nuxt(SPA) + Firebase Hosting

[積読ハウマッチ](https://tsundoku.site)をリリースしたときの構成。

<img width="910" alt="スクリーンショット 2020-03-20 11.37.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/37459683-872a-5047-a383-71c33f0c640e.png">

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

細かいやり方は、以下の記事に。(2020/03/22追記: OGP画像生成の記事も追加)
・[Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ - くらげになりたい。](https://www.memory-lovers.blog/entry/2019/08/07/150000)
・[Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと - Qiita](https://qiita.com/kira_puka/items/8c1d1240c3aa200cbec0)
・[Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。](https://www.memory-lovers.blog/entry/2019/06/26/194500)
・[Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。](https://www.memory-lovers.blog/entry/2020/02/19/150000)

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

定期実行は、Cloud Functionsでできるのでそれを利用した。
・[関数のスケジュール設定  |  Firebase](https://firebase.google.com/docs/functions/schedule-functions?hl=ja)
・[Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita](https://qiita.com/kira_puka/items/1f164dd8d1a5a281d9c1)

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

#### 3. Nuxt(SPA) + Netlify

[積読ハウマッチ](https://tsundoku.site)の現在の構成。

<img width="775" alt="スクリーンショット 2020-03-20 11.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/5010c13a-98a9-c9e0-ae3b-767d18cd8006.png">

[NetlifyのPrerendering](https://docs.netlify.com/site-deploys/post-processing/prerendering/#set-up-prerendering)が無料化されて使えるようになり、よいという話を聞くように。。

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

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

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

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


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

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

<img width="798" alt="スクリーンショット 2020-03-20 13.17.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/c24ce0b2-64b3-1ea4-9bd2-e2150ba13d14.png">

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

<img width="561" alt="スクリーンショット 2020-03-20 12.22.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/e3940627-4141-4c17-3c82-b2ee13ca1e14.png">

ただ、定期実行はcron.yamlを用意すればURLに送信でき、無料範囲も広い。
料金も「[その他のリソース](https://cloud.google.com/appengine/pricing?hl=ja#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9)」をみるとcronは無料のよう。
・[cron.yaml を使用したジョブのスケジューリング](https://cloud.google.com/appengine/docs/flexible/nodejs/scheduling-jobs-with-cron-yaml?hl=ja)

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


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

GAEでうまくいかなかったので、無料でメモリも多いHerokuを利用。
[へんあいマップ](https://hen-ai.net/)がこの構成で稼働中。

<img width="885" alt="スクリーンショット 2020-03-20 13.24.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/60f2ab5c-3f4a-9b4b-ac45-341ed99c4667.png">


定期実行は無料のアドオン([Heroku Scheduler](https://elements.heroku.com/addons/scheduler))が利用できる。
Nuxt側で[serverMiddleware](https://ja.nuxtjs.org/api/configuration-servermiddleware/)を用意すればOK。


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

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

##### 1. SSLは非対応

単体だけだとSSLに対応していないので、[Cloudflare](https://www.cloudflare.com/ja-jp/)を併用。
CloudflareがCDNも提供してくれるので良い感じに。

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

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

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

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

##### 実際のやりかたとかは、

以下の記事に。
・[Heroku+CloudflareなNuxtでSSRしてみる - くらげになりたい。](https://www.memory-lovers.blog/entry/2020/01/25/120000)


### まとめ

いろいろ試してみたけど、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](https://cloud.google.com/run?hl=ja)や[ZEIT now](https://zeit.co/)がある。
Cloud Runは立ち上げがGAEより遅いときので後手だけど、
ZEIT nowは気になってるので試してみたい(*´ω｀*)

以上!!

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/>

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

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


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

「偏愛マップ」を簡単に作れるWebアプリです!
[へんあいマップ](https://hen-ai.net)も、Nuxt.js+Firebaseで開発してます!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/63686f5c-390b-0b09-3f9a-0ce6676c3cce.png" width="600"/>

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

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