Gatsby V3が発表されました！
目玉は更なる高速化とIncrement Buildのオープンソース化でしょうか。gatsby-plugin-mage などのプラグインもBetaが取れています。
Gatsby cloudにHosting機能が追加され、Functionsのプレビュー募集も始まっています！Next.jsにおけるVercel、Gatsby.jsにおけるGatsby Cloudとして比較できる存在になりそうですね。Firebaseは汎用的に使われるのでプレイヤーとしては別になると思いますが、SPAのフレームワークごとにホスティング環境を提供するのが流行っています。
新しいものに触っていくべく、軽量なサークルサイトで移行をお試しします。
ToDo
V3 Migrate
パッケージアップデート
npm-check-updateをつかって一気にやっていきます。
ncu //確認 ncu -u //package.json更新 rm -rf ./node_module rm -rf package-lock.json npm install
結果
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: gensoucycle-portfolio-and-circle-website@1.0.0 npm ERR! Found: gatsby@3.0.0 npm ERR! node_modules/gatsby npm ERR! gatsby@"^3.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer gatsby@"^2.12.1" from gatsby-plugin-graphql-codegen@2.7.1 npm ERR! node_modules/gatsby-plugin-graphql-codegen npm ERR! gatsby-plugin-graphql-codegen@"^2.7.1" from the root project
graphql-codegenが3.0.0に対応していませんね…そもそもgraphql-typegenに入れ替えないといけないまま放置していたので、いったんこのプラグインを外して作業を進めます。 gatsby-plugin-preconnectも未対応です。
ここからは公式ガイドに従います。
npm outdated
アップデートし損ねたものがないか確認します。
Deprecated API対応
V3に伴って廃止されたAPIの対応をします。代表例のLinkコンポーネントはこちら。
The APIs
push,replace&navigateToin gatsby-link (an internal package) were deprecated in v2 and now with v3 completely removed. Please usenavigateinstead.
とはいえ、ほとんど対応は必要なく、graphql コマンドの明示的なImportだけ対応する必要があるかと思ったのですが、TypeScriptでは未宣言ではトランスパイルできないため、既に明示してありました。つまりほぼコードは書き換えていません。
image plugin
粛々とやります
ローカル確認
npm run devで動かしてみるのですが、ページ遷移時に色々エラーが起きます。lintかけたところ、emotionのアップデートでimport先が変わっていたのを忘れていました。
とりあえず動きます。
Hosting 対応
Code
プラグインのインストールが必要です。
リダイレクト設定はjsonファイルに書き換えます。もともとはvercel.jsonにあった内容を下記のように転記して、gatsby-node.js でインポートします。これはちょっとイケてないな…
redirect.json
[ { "source": "/portfolio/md2doujin/", "destination": "https://gensobunya-tech.hatenablog.com/entry/2018/12/20/000000" }, { "source": "/portfolio/qiitopset/", "destination": "https://gensobunya-tech.hatenablog.com/entry/2019/11/08/220510" }, { "source": "/portfolio/wp2hugo/", "destination": "https://gensobunya-tech.hatenablog.com/entry/2017/10/11/000000" }, { "source": "/portfolio/blggrtowp-2/", "destination": "https://gensobunya-tech.hatenablog.com/entry/2017/10/07/211800" }, { "source": "/portfolio/blgger-to-wp-to-hugo-1/", "destination": "https://gensobunya-tech.hatenablog.com/entry/2017/10/07/125200" } ]
gatsby-node.js
~~~ exports.createPages = async ({ graphql, actions }) => { const { createRedirect } = actions; redirects.forEach(redirect => createRedirect({ fromPath: redirect.source, toPath: redirect.destination, redirectInBrowser: true, isPermanent: true }) ) } ~~~
ホスティング設定
ポチポチして有効化
Githubリポジトリ内でプルリクを出して、Previewを確認しながらリダイレクトも機能をチェックします。クライアントサイドリダイレクトはダサい気がしますがしょうがない。
ドメイン移行
Add Domainから指定されたDNSレコードを貼り付けます。自動的にApexドメインも紐付けられます。
Apexドメインレコードも指定されるため、GoogleDomainsを使っている場合、合成レコードなるApex→wwwのリダイレクト用レコードを削除する必要がありました。
証明書の作成プロセスは、通常使うサブドメインのレコードが更新された時点で開始されます。
DNSレコードをすべて変更したら、あとは反映を待つだけです。
まとめ
サイトの規模が小さい、DeprecatedなAPIを使っていなかったこともアリ、Gatsbyのバージョンアップよりもホスティング環境の設定が面倒でした。 静的サイトジェネレーターはビルド結果そのものは汎用的に使えますが、実際にWEBサイトとして運用する場合はホスティング環境設定も必要になるので、ポータビリティにはこれらの特性も加味する必要があります。
とはいえ、最近のサービスは殆どの設定をファイルベースで設定を行えることが多いので、正規表現なりプログラムで生成するなりして使いまわせるかと思います。
