2019/04/03 サイト名を「ウェブカンペ」から「tech1000+」に変更しました。

Dockerでreact+express+MySQLの環境構築

reactは描画に専念し、expressでAPIサーバー、DBにMySQLといった構成。
やりたいことが明確だったので上記のように分けた構成をdockerで作ってみました。

reactの環境構築について調べていましたが、やり方はいろいろあるよう。
手軽なのに便利なcreate-react-appを使って構築することにしました。

docker-compose

version: '2'
services:
  db:
    build: db
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: database
    ports:
      - "3303:3303"
  frontapp:
    build: frontapp
    image: frontapp
    container_name: frontapp
    tty: true
    volumes:
      - ./frontapp/src:/opt/app/src
    ports:
      - "3001:3000"
  webapi:
    build: webapi
    image: node-express-dev:1.0
    container_name: webapi
    tty: true
    volumes:
      - ./webapi/source:/api
    ports:
      - "3000:3000"

expressとreactでデフォルトのポートが被るので、react側では3001を使用するように指定。
ソースを永続化できるようにvolumesも指定する。

dockerfile

frontapp

FROM node:10.13.0
ENV NODE_ENV=development
RUN apt-get update && apt-get install -y vim && \
npm install -g create-react-app && \
npm install -g react-router-dom && \
yarn add axios 
RUN create-react-app /opt/app && \
chmod +x /opt/app
COPY /src /opt/app/src
WORKDIR /opt/app/
CMD ["npm", "start"]

webapi

FROM node:10.13.0
ENV NODE_ENV=development
RUN apt-get update && apt-get install -y vim && \
npm install -g express-generator && \
express --view=pug api
RUN chmod 666 /api
WORKDIR /api
COPY source/ /api/
RUN npm install
CMD ["npm", "start"]

db

FROM mysql:5.7
COPY ./mysql.conf.d /etc/mysql/mysql.conf.d

ここまでで、3000ポートでexpress、3001ポートでreactの初期画面が表示される