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
とオプションを付けてビルドすることで諸々のパスが解決される。