reactは描画に専念し、expressでAPIサーバー、DBにMySQLといった構成。
やりたいことが明確だったので上記のように分けた構成をdockerで作ってみました。
reactの環境構築について調べていましたが、やり方はいろいろあるよう。
手軽なのに便利なcreate-react-appを使って構築することにしました。
docker-compose
[shell] 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"
[/shell]
expressとreactでデフォルトのポートが被るので、react側では3001を使用するように指定。
ソースを永続化できるようにvolumesも指定する。
dockerfile
frontapp
[shell] FROM node:10.13.0ENV 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"] [/shell]
webapi
[shell] FROM node:10.13.0ENV 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"] [/shell]
db
[shell] FROM mysql:5.7COPY ./mysql.conf.d /etc/mysql/mysql.conf.d
[/shell]
ここまでで、3000ポートでexpress、3001ポートでreactの初期画面が表示される
