【React & Golang & MySql】在Docker中搭建开发环境

我尝试使用Docker搭建了一个使用React、Golang和MySQL的应用开发环境。

Repository (Github)

这边

环境 – 即使只需要一种选择，我也可以用中文将其转述为 “周围的自然条件” 或 “周围的生态系统”。

暂时，我正在以下环境中运行：
docker：19.03.8
docker-compose：1.25.4

搭建React服务器

首先准备React。
暂时先创建Dockerfile和docker-compose.yml。
这次参考了这篇文章。

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

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文件相同的层级）执行。

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

一旦应用程序创建完成后，构建并执行docker-compose.yml文件。

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

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

搭建 Golang 服务器

接下来运行Golang。
编写用于运行Golang的Dockerfile，并将设置附加到之前创建的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

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”。

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。

$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

使用Nginx建立Web服务器，并将流量引导到React和Golang。

由于不能每次都指定端口进行连接，所以我们将使用nginx作为web服务器
并进行以下配置，将react和golang的应用程序分别传递到以下端口。
【react】localhost→localhost:3000
【golang】localhost/api→localhost:8000

创建一个用于表达这个的nginx配置文件

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的配置。

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服务器

尝试建立一个MySQL服务器和一个用于确认的phpmyadmin服务器。

创建一个能够从Golang应用连接到MySQL的Dockerfile和配置文件

FROM mysql:8.0.16

[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的配置。

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

我已经通过phpmyadmin成功连接到了MySQL（并确认react-gp-app已创建）。

React、Golang和MySql的应用程序开发环境已经设置完毕！