Help us understand the problem. What is going on with this article?

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

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

リポジトリ


githubリポジトリはこちらです。

環境

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

Reactサーバー構築

まずはReact用意から。
とりあえず、Dockerfileとdocker-compose.yml作成する。
今回は、こちらの記事を参考にしました。

/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にアクセスするして、画面が表示されることを確認
スクリーンショット 2020-05-10 15.17.20.png

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」が表示されることを確認する。
スクリーンショット 2020-05-11 9.11.32.png

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に接続して確認する
スクリーンショット 2020-05-11 9.56.27.png
スクリーンショット 2020-05-11 9.56.42.png

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にアクセスすると...
スクリーンショット 2020-05-11 15.31.36.png

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

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

takuya911
22歳、フリーランスエンジニア。 サーバーサイド1年半やってたけど最近インフラやってる人。 dockerとかkubenetesをメインで取り扱い中です。将来的にはGoとkubenetesを使ったマイクロサービス開発のサーバーサイドやりたい。 言語:Java、PHP、JavaScript、shell等 フリームワーク:Springboot、Codeigniter、jQuery、FuelPHP
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした