矢島隆造
その他
DockerExpressMySQLReactアドベントカレンダー2022

dockerでReact × Express × MySQLの環境構築する方法

その他
2022.12.12
この記事は約7分で読めます。

はじめに

インプルの矢島です。

dockerでReactとExpressとMySQLの環境構築してみた方法をまとめました。

今までのdocker経験は実務でdocker compose up -dをするくらいで、個人ではdockerファイルを書いて、環境作って遊んでいるくらいです。そして、ReactとExpressはあまり触ったことないです。

環境構築

最終的なディレクトリ構造は以下のようになります。

app/
├── .env
├── api
├── db
├── docker-compose.yml
└── react

①dockerをインストールして起動します。インストールはこちら

②.envファイル作成（userやpasswordは好きに設定して大丈夫です）

DB_ROOT_HOST=%
DB_NAME=appname
DB_USER=username
DB_PASS=password
TZ=Asia/Tokyo

③docker-compose.ymlファイル作成します。

version: '3'
services:
  db:
    image: mysql
    environment:
      - MYSQL_ROOT_HOST=${DB_ROOT_HOST}
      - MYSQL_DATABASE=${DB_NAME}
      - MYSQL_USER=${DB_USER}
      - MYSQL_PASSWORD=${DB_PASS}
      - MYSQL_ROOT_PASSWORD=${DB_PASS}
      - TZ=${TZ}
    ports:
      - '3306:3306'
    volumes:
      - ./db/conf:/etc/mysql/conf.d/:ro
      - mysql_data:/var/lib/mysql
      - ./db/logs:/var/log/mysql
    networks:
      backend:
        ipv4_address: 172.28.1.5

  api:
    image: node
    environment:
      - MYSQL_SERVER=db
      - MYSQL_USER=${DB_USER}
      - MYSQL_PASSWORD=${DB_PASS}
      - MYSQL_DATABASE=${DB_NAME}
      - TZ=${TZ}
      - CHOKIDAR_USEPOLLING=true
    tty: true
    ports:
      - '3000:3000'
    volumes:
      - ./api:/app
    working_dir: /app
    command: npm run dev
    networks:
      backend:
        ipv4_address: 172.28.1.10
    depends_on:
      - db

  react:
    image: node
    environment:
      - CHOKIDAR_USEPOLLING=true
    tty: true
    ports:
      - '8080:8080'
    volumes:
      - ./react:/app
    working_dir: /app
    command: bash -c 'npm start && npm run build'
    networks:
      - backend
    depends_on:
      - api

networks:
  backend:
    driver: bridge
    name: app_network
    ipam:
      config:
        - subnet: 172.28.1.0/24

volumes:
  mysql_data:

docker-compose.ymlファイルについて少し解説します。

versionとは、composeファイルのバージョンを定義します。公式は最新を指定することを推奨しているため、最新の3を定義します。

servicesでは、アプリケーションを構成するためのサービスの設定をします。今回は、dbとapiとwebを定義します。

imageとはコンテナのもととなるイメージというものを指定します。今回は、dbはmysqlのイメージで、apiとwebはnodeです。イメージはdockerhubから検索して使用可能です。

enviromentとは、コンテナ内で使用する環境変数を定義します。

portsとは、公開用のポートを設定します。ホスト側：コンテナ側のポートを指定できます。

volumesとは、コンテナで扱うデータを永続化する仕組みです。mysql_dataは名前付きで作成したので、最後の行にボリューム設定します。

networksとは、各コンテナのネットワークの設定ができます。下の方に、networksとして、backendというネットワークを準備しました。そこでサブネットを指定しています。そのサブネットの範囲でIP アドレスを指定します。

depends_onでは、アプリケーションの依存関係を表します。今回では、apiがdbに依存しているため、dbが起動した後にapiが立ち上がります。

ttyとは、コンテナを継続して立ち上げます。

working_dirとは、コンテナのカレントディレクトリを指定しています。後述するcommandを実行するディレクトリにもなります。

commandとは、起動時に実行するコマンドを指定します。

④環境構築の手順に戻ります。apiとdbのディレクトリを作成します。

$ mkdir api db    //docker-compose.ymlが置いてある階層でapiとdbのディレクトリを作成

⑤apiのコンテナ内でexpressのインストール等を行います。

$ docker-compose run --rm --no-deps api /bin/bash
$ npm install -g npm
$ npm install express
$ npm install express-session
$ npx express-generator
$ npm install
$ npm install nodemon
$ exit

⑥reactのコンテナ内でreactのインストールを行います。

$ docker-compose run --rm --no-deps react /bin/bash
$ npm install -g npm
$ npm install -g create-react-app
$ npx create-react-app .  //現在のディレクトリにreactアプリを作成する
$ npm install
$ exit

⑦api/composer.jsonにnodemonのscriptsを追加します。

  "scripts": {
    "dev": "nodemon ./bin/www",  //これを追加
    "start": "node ./bin/www"
  },

⑧react/composer.jsonのstartを8080ポートで開くように修正（デフォルトは3000ポートでapiのポートとぶつかってしまうため）

"scripts": {
    "start": "PORT=8080 react-scripts start",　//このように変更
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

⑨コンテナを起動します。

$ docker-compose up -d

確認

Expressの起動状況を確認します。下記URLにアクセスします。
http://localhost:3000/

無事表示されていました！

次にReactの起動状況を確認します。下記URLにアクセスします。
http://localhost:8080/

Reactも無事表示されています！

最後にMySQLの起動状況を確認します。下記コマンドを実行してみます。

$ docker-compose exec db /bin/bash //コンテナの中にはいる
$ mysql -u username -p　 //usernameの部分は.envに記載したusernameにあたる。パスワードは.env記載のpasswordです。

上記コマンドでMySQLの中に入れたら成功です！ databaseも正しく表示されています。

まとめ

いかがでしたでしょうか？

うまく環境構築できない場合は、nodemoduleを消して再度npm installを試してみてください。。

dockerって改めて便利だな〜って思いました。

参考