docker

Docker + Webpack4でReactの環境構築

WebpackでのReactの環境構築をDocker上で行いたかったので色々調べたのですが、Webpackの仕様変更等もありうまく動作するサンプルが見つけられなかったので簡単なものを作ってみました。

create-react-app を利用すると楽だったのですが、今回はWebpackに必要最低限のパッケージを入れ、webpack-dev-serverで開発用サーバーを立てています。

Dockerfileはこのような感じです。


FROM node:7.9.0

WORKDIR /app
ADD ./app/webpack.config.js /app/webpack.config.js
ADD ./app/dist /app/dist

RUN npm init -y
RUN npm install --save react react-dom
RUN npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-env

EXPOSE 8080

イメージはnodeを利用します。

ホストのapp/dist, app/webpack.config.jsはコンテナ内でもそのまま利用するためコピーします。

npmをイメージ内で初期化し、必要なパッケージをインストールします。

最後に、ポート8080を解放しています。

 

これで準備ができたので、以下のコマンドで実行していきます。

$ docker build -t webpack-react .
$ docker run -p 80:8080 -d -v `pwd`/app/src:/app/src webpack-react ./node_modules/.bin/webpack-dev-server

docker runするときに、ホストのポート80を8080にリダイレクトし、./app/srcをコンテナの/app/srcにマウントしています。

ここで気をつけるのがホスト側のディレクトリ指定も絶対パスで行うことです。

 

これでlocalhostにアクセスすることでReactが動いているのが確認できると思います。

今のような画面が表示されたら成功です。

webpack-react-docker

今回は./app/srcをマウントしているため、./app/src内のファイルを変更することで変更結果が反映されます。

 

create-react-appでやりたい人はこちらのGitHubを見てください。

 

*4/24追記

素直にdocker-composeを使って構築するようにしました。

GitHubはこちらです