「FirebaseHosting」の記事 - Crieit

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

2020-01-07T21:31:01+09:00

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。

NetfilyのプレレンダリングがあるのでOGP芸が楽。
昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。

使ってみてよかったので、移行したときにやったことをまとめてみる。

移行するときにやったこと

nuxt.config.tsなどの変更

1. Nuxtなどの公式サイトを見て設定

Firebase Hostingで設定したのとかぶっているところもあり、nuxt.config.tsは変更なし。

参考: Netlify へデプロイするには？ - NuxtJS

2. _redirectsファイルの作成

Netlifyでは、index.html以外は404になるので、
SPAの場合はstatic/_redirecsというファイルを作成して、
以下の内容を記載しておく。

/*    /index.html   200

参考] Rewrites and proxies | Netlify Docs

3. Netlify側の設定

あとは、Netlifyにアクセスして、「SPA モードで生成されたサイトの場合」にも書いてあるとおりの内容をNetlifyの設定に入力すればOK。

迷わなければ、5分くらいでできて、masterにpushと更新される(´ω｀)

プレレンダリング

ベータ版だけど、Netlifyでプレレンダリングしてくれる機能がある。

この記事に書いてある感じで、
「FunctionsでheadだけのHTMLを生成→リダイレクト」
としていたのが不要になる感じ。

Netlifyの画面で設定

設定は簡単で、Netlify上で設定画面で有効化すればOK。
参考: Prerendering | Netlify Docs

その他の修正点

あとは、以下の修正。

OPGのためにrouterでリダイレクトしていた設定を削除
各ページでメタ情報を適切になるように変更

また、上で書いたとおり、static/_redirecsで

/*    /index.html   200

これを設定しておかないとボットがアクセスしたときに404になってOGPがでない。。

(これに気づかずかなりハマった。。)

小ネタ: プレレンダリングの結果を確認する

プレレンダリングするかどうかは、UAを見て判断しているらしく、

UAを指定してすると、プレレンダリングされた結果を確認でき、
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の対応

積読ハウマッチでは、少し特殊なことをしていて、
一部のURLはheadだけのHTMLしか存在しないページがいくつかある。

なので、その部分を修正していく。方法としては以下の感じ。

nuxt.config.tsでrouterに、クエリパラメタ付きでリダイレクトを追加する
- リダイレクトとエイリアス | Vue Router
asyncData()でクエリパラメタを受け取り、created()で削除
- this.$router.push({ query: {} });
- Vuejs vue-router クエリパラメータの一部だけを取り除く - SIerだけど技術やりたいブログ

動的なサイトマップの対応

書籍やユーザのページなどは日々増えていくので、
サイトマップも動的に生成するようにしている。

Hostingの場合はFunctionsを呼び出せたけれど、
Netlifyに移行すると、それができないので対応が必要。

netlifyの_redirectsを使って直接Functionsへリダイレクトする方法で対応した。

こんな感じで各URLを該当のFunctionsにリダイレクトさせておく。

/sitemap  https://us-central1-.cloudfunctions.net/sitemap
/*        /index.html   200

sitemap-moduleだとダメだった...

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-.cloudfunctions.net/sitemap
/*        /index.html   200

これでリダイレクトされるようになるので、あとはDNSの反映を待てばOK！

以上!!

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

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

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

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

参考にしたサイト

Nuxt.js(SPA)+FirebaseなWebサービスで強制的に更新する(リビジョンアップ対策)

2019-10-17T19:20:16+09:00

SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。
たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。

この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、
Nuxt.jsでもできないかやってみたときの備忘録。

ざっくりとした流れ

流れとしては、こんな感じ。

staticディレクトリにJSONファイルでバージョン番号を用意
環境変数にリビジョン番号を保持するように設定
JSONファイルと環境変数のバージョン番号が異なっていたら、強制リロードする

用意するJSONファイルはこんな感じ

{"version":1}

やりかた

バージョンチェックするタイミングや更新の契機はいろいろあるけど、
ページ遷移時にチェックするよう、middlewareで対応。

参考記事)にあるような、ダイアログを出すパターンもある。

バージョンをチェックするmiddlewareを用意

middleware/checkUpdate.tsとして、バージョンをチェックするミドルウェアを追加する。

import axios from "axios";

export default async function() {
  try {
    // revision.jsonファイルから最新のバージョンを取得
    const res = await axios.get("/version.json");
    const data = res.data;
    const latestVersion = data.version;

    // 環境変数から現在のバージョンを取得
    const curVersion = !!process.env.VERSION ? Number(process.env.VERSION) : 0;

    // 最新バージョンよりも古かったら、強制的にリロードする
    if (curVersion < latestVersion) location.reload(true);
  } catch(error) {
    console.error(error);
    // エラーのときはなにもしない
  }
}

location.reload(true)を使うとキャッシュを無視して、強制的にリロードするらしい
・参考: Location.reload() - Web APIs | MDN

nuxt.config.tsの設定

middlewareを使うようにするのとあわせて、

環境変数(VERSION)の設定したり、
JSONファイル(version.json)を生成する

import fs from "fs";
import NuxtConfiguration from "@nuxt/config";


// バージョン番号を設定
const VERSION = 1;
// revision.jsonをstatic配下に生成
fs.writeFileSync("static/version.json", JSON.stringify({ version: VERSION }));

const config: NuxtConfiguration = {
  env: {
    VERSION: VERSION // 環境変数にバージョンを設定
  },

  router: {
    middleware: ["checkUpdate"] // バージョンチェックのmiddlewareを設定
  }
}

firebase.jsonで`version.json`をキャッシュしないように

そのままだと、version.json自体もキャッシュされてしまうので、
あまり意味がない感じになる。。

なので、firebase.jsonでversion.jsonをキャッシュしないように設定

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/node_modules/**", "**/README.md"],
    "headers": [
      {
        "source": "/version.json",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "private, no-store, no-cache, must-revalidate"
          }
        ]
      }
    ]
  },
}

以上!!

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

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

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

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