Gatsby.js + A-FrameでSSGしつつ3Dオブジェクトをレンダリングしてみる その2

これ(https://coneta.jp/article/show/2996)の続き。

5. デプロイ用にビルドしてみる

gatsby build

でデプロイしてみると、エラーが色々と出力される。

WebpackError: ReferenceError: window is not defined

とのことなので、サーバサイドレンダリングあるあるのサーバサイドでフロントの要素を呼び出してしまっているためのエラーだと気づく。
恐らくこの段階で

import 'aframe'

とA-Frameをインポートしていると思うが、以下の記述に書き換える

if (typeof window !== `undefined`) {
  require("aframe")
}

windowのある場合(ブラウザ側でのレンダリング) のみ、A-Frameを読み込むようにする。
これでビルド時のエラーは消えるはず。

5.5 ルートでないディレクトリにデプロイする場合

ルートでないディレクトリに配置する場合、gatsby-config.jsに

module.exports = {
  pathPrefix: `/subDir/`,
  ...

と追加し、

gatsby build --prefix-paths

とオプションを付けてビルドすることで諸々のパスが解決される。