Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。
NetfilyのプレレンダリングがあるのでOGP芸が楽。
昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。
使ってみてよかったので、移行したときにやったことをまとめてみる。
Firebase Hostingで設定したのとかぶっているところもあり、nuxt.config.tsは変更なし。
参考: Netlify へデプロイするには? - NuxtJS
Netlifyでは、index.html以外は404になるので、
SPAの場合はstatic/_redirecs
というファイルを作成して、
以下の内容を記載しておく。
/* /index.html 200
参考] Rewrites and proxies | Netlify Docs
あとは、Netlifyにアクセスして、 「SPA モードで生成されたサイトの場合」にも書いてあるとおりの内容をNetlifyの設定に入力すればOK。
迷わなければ、5分くらいでできて、masterにpushと更新される(´ω`)
ベータ版だけど、Netlifyでプレレンダリングしてくれる機能がある。
この記事に書いてある感じで、
「FunctionsでheadだけのHTMLを生成→リダイレクト」
としていたのが不要になる感じ。
設定は簡単で、Netlify上で設定画面で有効化すればOK。
参考: Prerendering | Netlify Docs
あとは、以下の修正。
また、上で書いたとおり、static/_redirecs
で
/* /index.html 200
これを設定しておかないとボットがアクセスしたときに404になってOGPがでない。。
(これに気づかずかなりハマった。。)
プレレンダリングするかどうかは、UAを見て判断しているらしく、
curlだとこんな感じで、-A twitterbot
を指定するとよい。
$ curl -A twitterbot https://example.com/hoge/fuga -o fuga.html
参考: [Common Issue] Understanding and debugging prerendering
毎回、Twitter Card Validatorで確認するのはめんどくさいので、この方法だと便利。
積読ハウマッチでは、少し特殊なことをしていて、
一部のURLはheadだけのHTMLしか存在しないページがいくつかある。
なので、その部分を修正していく。方法としては以下の感じ。
asyncData()
でクエリパラメタを受け取り、created()
で削除
this.$router.push({ query: {} });
書籍やユーザのページなどは日々増えていくので、
サイトマップも動的に生成するようにしている。
Hostingの場合はFunctionsを呼び出せたけれど、
Netlifyに移行すると、それができないので対応が必要。
netlifyの_redirectsを使って直接Functionsへリダイレクトする方法で対応した。
こんな感じで各URLを該当のFunctionsにリダイレクトさせておく。
/sitemap https://us-central1-<project-id>.cloudfunctions.net/sitemap
/* /index.html 200
sitemap-moduleで動的なページの対応方法も乗っているが、
SPAなのでgenerateされてしまう...
Netlifyの設定画面に従い、カスタムドメインを設定していく。
ALIASを設定するようにいわれるが、
お名前ドットコムはALIASを設定できないらしいので、
NetlifyのDNSを使う形で対応
参考にした記事でも書いてあるとおり、
Aレコードでもできるが、CDNを活用できないらしいので同様の対応
あとは、設定画面にも書いてあるとおり、
*.netlify.com
から設定したドメインへリダイレクトを追加しておく。
[https://tsundoku.netlify.com/*](https://tsundoku.netlify.com/*) https://tsundoku.site/:splat 301!
/sitemap https://us-central1-<project-id>.cloudfunctions.net/sitemap
/* /index.html 200
これでリダイレクトされるようになるので、あとはDNSの反映を待てばOK!
以上!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント