dockerでreactとデータベースを組み合わせたサンプルプログラム

2018/09/30 下書き保存にこの記事を見つけたものの，これを書いた時のことを全く思い出せない．とりあえず投稿．

はじめに

• ubuntu 16.04
• docker-composeが使える状態
• sudo docker-compose upで全てのサービスが起動することを目指す
• https://qiita.com/hoture/items/573247b12ff0bc4e5d3c をベースにする
  • dockerを使う部分が差分

サーバーの下地を作る

cd ~/
mkdir aho
cd aho
touch docker-compose.yml

docker-compose.ymlに以下を記述する

docker-compose.yml

version: "2"
services:
  server-node:
    build: ./docker/server
    environment:
      - NODE_ENV=production
    volumes:
      - ./docker/server:/usr/src/app

sudo docker-compose run --rm server-node /bin/bashして中に入る．

yarn init -y
cat package.json
yarn add --dev express mongoose babel-cli babel-preset-es2015 body-parser
cat package.json

で，packge.jsonにscriptsを追記して，以下のようになる．

packge.json

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "mongoose": "^5.0.0-rc1"
  },
  "scripts": {
    "start": "babel-node index.js"
  }
}

また，

.babelrc

{
  "presets" : ["es2015"],
}

も作っておく．

クライアントの下地を作る

docker-compose.ymlに以下を記述する

docker-compose.yml

version: "2"
services:
  server-node:
    build: ./docker/server
    environment:
      - NODE_ENV=production
    volumes:
      - ./docker/server:/usr/src/app
  client-node:
    build: ./docker/client
    environment:
      - NODE_ENV=production
    volumes:
      - ./docker/client:/usr/src/app

でsudo docker-compose run --rm client-node /bin/bashして中に入る．

cd /usr/src/app
yarn global add create-react-app
create-react-app client
cd client
yarn add --dev redux axios
cd src
touch reducers.js actions.js

https://qiita.com/hoture/items/573247b12ff0bc4e5d3c
https://medium.com/@TButterwith/client-and-server-hot-reloading-with-react-and-docker-8829c3842776