【React&Golang&MySql】Dockerで開発環境構築

dockerでReact&Golang&MySqlを使ったアプリケーション開発環境構築してみました。

リポジトリ

githubリポジトリは[こちら](https://github.com/atsugitakuya/react-go)です。

環境

とりあえず、以下の環境で動かしてます。 docker：19.03.8 docker-compose：1.25.4

Reactサーバー構築

まずはReact用意から。 とりあえず、Dockerfileとdocker-compose.yml作成する。 今回は、[こちらの記事](https://qiita.com/kerochelo/items/1063da8893026de5ebbf)を参考にしました。

/docker/react/Dockerfile

FROM node:8.16.0-alpine  
WORKDIR /app/react
RUN npm install --save prop-types
RUN npm install -g create-react-app

/docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: ./docker/react/Dockerfile
    container_name: react_container
    tty: true
    volumes:
    - ./react-app:/app/react
    command: sh -c "cd /app/react  && yarn start"
    ports:
      - 3000:3000

Reactを動かす環境の準備はできたので、次にreactのアプリケーションを作成する。
ルートパス（docker-compose.ymlと同じ階層）で実行する。

zsh

$docker-compose run --rm react sh -c 'create-react-app react-app'
....
Happy hacking!

アプリが作成されたら、docker-compose.ymlをビルド、実行する

zsh

$docker-compose build
Successfully built 810a299d8ee1
Successfully tagged react-go_react:latest

$docker-compose up -d
Starting react-go_react... done

無事起動できたら、Reactの環境構築はこれでOK
念のため、localhost:3000にアクセスするして、画面が表示されることを確認

Golangサーバー構築

次にGolangを動かす。
Golang実行用のDockerfileし、先ほど作ったdocker-compose.ymlに設定を追記する

/docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: ./docker/react/Dockerfile
    container_name: react_container
    tty: true
    volumes:
    - ./react-app:/app/react
    command: sh -c "cd /app/react  && yarn start"
    ports:
      - 3000:3000
  # 以下、追記部分
  go:
    build:
      context: .
      dockerfile: ./docker/golang/Dockerfile
    container_name: go_container
    ports:
      - 8000:8000
    tty: true

/docker/golang/Dockerfile

FROM golang:alpine
COPY ./go-app /app/go
WORKDIR /app/go
RUN go build -o main . 
CMD ["/app/go/main"]

main.goを作成
今回のものは、localhost:8000/にアクセスした時に「Hello World」を表示するだけのシンプルな物。

/go-app/main.go

package main

import (
	"fmt"
	"net/http"
)

func main() {
	// controller
	http.HandleFunc("/", echoHello)
	// port
	http.ListenAndServe(":8000", nil)
}

func echoHello(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "<h1>Hello World</h1>")
}

Golangの準備ができたので、docker-compose.ymlをbuildし、再起動する。

zsh

$docker-compose build
Successfully built 810a299d8ee1
Successfully tagged react-go_react:latest
....
Successfully built 92ffa33f7dc5
Successfully tagged react-go_go:latest

$docker-compose restart
Restarting react_container ... done
Restarting go_container    ... done

localhost:8000にアクセスすると「Hello World」が表示されることを確認する。

NginxでWebサーバー構築し、React、Golangにパスする

いちいちポート指定して接続するわけにはいかないので、webサーバーとしてnginxを利用して reactとgolangのアプリケーションそれぞれ以下のようなポートにパスする設定を行う。 【react】localhost→localhost:3000 【golang】localhost/api→localhost:8000

これを表現するnginxの設定ファイルを作成する

/nginx/nginx.conf

worker_processes auto;

events {
  worker_connections 1024;
}

http {
  server {
    listen 80;

    location /api/ {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_pass http://go:8000/;
    }

    location / {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_pass http://react:3000/;
    }
  }
}

docker-compose.ymlにnginxの設定を追記する。

/docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: ./docker/react/Dockerfile
    container_name: react_container
    tty: true
    volumes:
    - ./react-app:/app/react
    command: sh -c "cd /app/react  && yarn start"
    ports:
      - 3000:3000
  go:
    build:
      context: .
      dockerfile: ./docker/golang/Dockerfile
    container_name: go_container
    ports:
      - 8000:8000
    tty: true
  # 以下、追記部分
  nginx:
    image: nginx
    container_name: nginx_container
    ports:
      - 80:80
    environment:
      - TZ=Asia/Tokyo
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf

またまたビルドして再起動し、localhostとlocalhost/apiに接続して確認する

MySqlサーバー構築

MySqlサーバーと、確認用にphpmyadminサーバーも立ててみる。

Golangアプリからmysqlに繋げられるようにする.
MySqlのDockerfileと、configファイルを作成する

/docker/mysql/Dockerfile

FROM mysql:8.0.16

/docker/mysql/conf.d/my.cnf

[mysqld]
default_authentication_plugin= mysql_native_password
explicit-defaults-for-timestamp=1
general-log-file=/var/log/mysql/mysqld.log

次にdocker-compose.ymlにmysqlとphpmyadminの設定を追記する。

/docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: ./docker/react/Dockerfile
    container_name: react_container
    tty: true
    volumes:
    - ./react-app:/app/react
    command: sh -c "cd /app/react  && yarn start"
    ports:
      - 3000:3000
  go:
    build:
      context: .
      dockerfile: ./docker/golang/Dockerfile
    container_name: go_container
    ports:
      - 8000:8000
    tty: true
  nginx:
    image: nginx
    container_name: nginx_container
    ports:
      - 80:80
    environment:
      - TZ=Asia/Tokyo
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
  #以下、追記
  mysql:
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    container_name: mysql_container
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: react-go-app
      TZ: 'Asia/Tokyo'
    volumes:
      - ./docker/mysql/initdb.d:/docker-entrypoint-initdb.d
      - ./docker/mysql/conf.d:/etc/mysql/conf.d
      - ./docker/mysql/mysql_data:/var/lib/mysql
    ports:
    - 3306:3306
    links:
      - go
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=root
    links:
      - mysql
    ports:
      - 1234:80
    volumes:
      - /sessions

またまたまた、ビルド＆再起動するしてlocalhost:1234にアクセスすると...

phpmyadminからMySqlに接続確認できました。（react-gp-appが作成されていることを確認）

これでReact&Golang&MySqlでアプリ開発用の環境構築が完了しました！！