自作の Codelab を Netlify にデプロイしたけど、コンテンツだけ 404 になる
起きていること
自作の Codelab を Netlify にデプロイして、トップページにはアクセスできた。
でも、Codelab のコンテンツにアクセスしようとすると 404 になる。 トップページにはコンテンツへのリンクがあるのだけど、本体がないという不思議な状態。 ローカルでは問題なくアクセスできる。この差が何かわからない。
原因
原因は、Codelab のコンテンツの実態がシンボリックリンクだったから。
ビルドすると /dist が生成され、/dist/codelabs にコンテンツがあるはずが、その実態は /dist/../codelabs のシンボリックリンク。
よって、/dist の中にコンテンツ本体は存在せず、/dist だけをデプロイしてもコンテンツにはアクセスできない。
解決策
シンボリックリンクではなくコンテンツそのものがコピーされるように、ビルド処理を書き換える (もっとスマートなやり方がありそう)。
/dist 配下に /codelabs を追加する処理は gulpfile.js の ensureSymlinkSync() というメソッドで行われているので、
これを copy に置換する (2 カ所)。
gulpfile.js
848 if (CODELABS_FILTER === '*' && VIEWS_FILTER === '*') {
849 const source = path.join(CODELABS_DIR);
850 const target = path.join(dest, CODELABS_NAMESPACE);
851 - fs.ensureSymlinkSync(source, target, 'dir');
852 + fs.copy(source, target);
853 return
854 }gulpfile.js
858 const codelab = codelabs[i];
859 const source = path.join(CODELABS_DIR, codelab.id);
860 const target = path.join(dest, CODELABS_NAMESPACE, codelab.id);
861 - fs.ensureSymlinkSync(source, target, 'dir');
862 + fs.copy(source, target);
863 }
864 };