Dockerでwebpack-dev-serverを起動してホストからアクセスする
Dockerコンテナ内でwebpack-dev-serverを起動して、ホスト側からアクセスを可能にする方法を紹介します。
以下のように、webpack-dev-serverのオプションにhost: '0.0.0.0'を設定すると、ホスト側からアクセスが可能になります。
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8080,
host: '0.0.0.0',
},起動スクリプトに記載する場合
package.jsonのスクリプトで指定する場合は以下のようにします。
"scripts": {
"dev": "webpack-dev-server --watch --hot --host 0.0.0.0",
},別コンテナと連携する方法
例えばこのコンテナではなくnginxなどの別コンテナと連携するには、proxyを使用します
(http://webのwebはnginxのコンテナ名です)
devServer: {
port: 3000,
host: '0.0.0.0',
proxy: {
'*': 'http://web'
},
},詳しくはDocker webpack-dev-serverをnginxのコンテナと連携するで紹介しています。