はじめに
ExpressをserverlessにしてNetifyで公開したが、その際にrequire.contextで特定のディレクトリ以下のファイル全てをバンドルするというやり方をしていて躓いたのでその備忘録を残しておく。
※NetifyでBuild・Deployした時にだけ起きたのが理解できていないため、何かわかる方がいましたらご教示頂けると幸いです。（ローカルでBuildする分にはdistに.jpgファイルはちゃんと展開されていました(distフォルダ以下に出力されていました)）。
どういう状況での話か？
以下のソースのように、.jpgを画面上にある場面で表示させるため各.jpgバンドルさせたいが、コメントアウトした部分のように1つ1つをimportするのは現実的でないので、require.contextでバンドルさせていた（動的なバンドルになってしまうが。）
index.js
// 省略
// import all img
// import './img/strong_positive.jpg';
// import './img/positive.jpg';
// import './img/neutral.jpg';
// import './img/negative.jpg';
// import './img/strong_negative.jpg';
// import './img/none.jpg';
const importAll = (r) => r.keys().forEach(r);
importAll(require.context('../', true, /\.jpg$/));
// 省略
});
この時に、ローカルでBuildしている分には、.jpgがdistにちゃんと出力されたが、Netify上でBuildすると以下の図のように404になってしまった。
どうやって解決したか？
CopyWebpackPluginを用いて、明示的にdist以下に.jpgをコピーするようにした。これにより以下の図のように404にはならなくなった。
※この解決方法で正しいのかは不明・・・
webpack.configについては以下のような感じ。
webpack.prod.js
const path = require('path')
const CopyWebpackPlugin = require("copy-webpack-plugin")
// 省略
module.exports = {
entry: './src/client/index.js',
mode: 'production',
output: {
path: path.join(__dirname, 'dist'),
},
module: {
rules: [{
// 省略
}, {
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
}
}]
},
plugins: [
// 省略
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/client/img'),
to: path.resolve(__dirname, "dist"),
},
]
}),
]
}
ソースコード
ソースコード全体は以下。Netify上でサイトも公開している。