JSXを使うために React + Webpack + Babel 環境をDockerとdocker-composeを使って構築しました🐳create-react-appは使っていません。

*随時情報を更新する予定です。現在は細かいオプションなどについては説明していません。

前提

Docker & docker-composeをインストール済み

動作環境

macOS Catalina 10.15.7
Docker 20.10.2
docker-compose 1.27.4

ディレクトリ構成

最終的には以下のような形になります。

react_webpack_babel
  ├── dist
  │   ├── bundle.js
  │   └── index.html
  ├── src
  │   └── index.jsx
  ├── node_modules
  ├── package.json
  ├── package-lock.json
  ├── webpack.config.js
  ├── Dockerfile
  └── docker-compose.yml

それではディレクトリを作成します。

mkdir react_webpack_babel
cd react_webpack_babel

package.jsonを作成し、scripts以下に"dev": "webpack serve --host 0.0.0.0"を追記します。

npm init -y

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack serve --host 0.0.0.0"
}

必要なmoduleをインストールします。

npm i react react-dom

npm i -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader

package.jsonはこのような感じになるはずです。

package.json

{
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "webpack": "^5.26.3",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

もし各moduleのバージョンが違っていて動作しない場合は、手動で上記のバージョンに書き直した後にnpm iを実行してください。moduleの依存関係については割愛します🐞

webpack.config.jsを作成します。

webpack.config.js

const path = require("path");

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, "src/index.jsx"),
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, "dist")
    },
    devServer: {
        compress: true,
        contentBase: path.join(__dirname, "dist"),
        watchContentBase: true,
        hot: true,
        port: 8080,
    },
    module: {
      rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/react"
            ]
          }
        }
      }]
    },
    target: ["web", "es5"],
    devtool: 'inline-source-map',
    resolve: {
      extensions: ['.js', '.jsx']
    }
};

ディレクトリと各ファイルを作成します。

mkdir src dist

/src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);

/dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>React + Webpack + Babel</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Dockerfile docker-compose.ymlを作成します。

Dockerfile

FROM node:14.5.0-alpine
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
EXPOSE 8080

docker-compose.yml

version: '3'
services:  
  front:
    build: .
    ports: 
      - '8000:8080'
    volumes: 
      - .:/usr/src/app
    command: ['npm', 'run', 'dev']

docker-composeを使ってコンテナを起動します。

docker-compose up

localhost:8000にアクセスし、以下が表示されれば成功です。

読んでいただきありがとうございました！ご指摘やご意見などありましたらコメントしていただけると嬉しいです🐳