Zenn
🦕

golang+reactなアプリの開発環境をモノレポで作る

2022/03/01に公開
Docker
React
Golang
#
monorepo
tech

カラビナテクノロジーでは、zennでのテックブログをはじめました。
今回はそんな技術ブログの一発目の記事を、バックエンド開発をメインに担当していますブラボー(bravo)が書いていきます。

モノレポという、1つのリポジトリに複数のアプリを1つのリポジトリに保存するというパターンがあるということを知ったので、
実際にその構成での開発環境を作ってみます。

今回考えるのは、APIサーバとしてgolangで作られたものがあり、reactではそのフロントエンドを実装するようなアーキテクチャにします。
図で言えばこんな感じです。

この記事で達成すること

  • golangでAPIの開発環境を作る
  • reactの開発環境を作る
  • 1つのリポジトリで↑2つのアプリが保存されている再現できる(モノレポ構成にする)
    • reactとgolangをモノレポで構成

言語、ミドルウェアのバージョン

言語、ミドルウェア バージョン
docker 20.10.11
docker-compose 1.29.2
golang Dockerfile参照
mysql Dockerfile参照
react Dockerfile参照
node Dockerfile参照

dockerのコンテナを作る

今回はdockerコンテナ上で動作するようにしたいので、golang、react、mysqlそれぞれのコンテナを作ります。
ディレクトリの構成は以下のようになります。

ディレクトリ構成
docker/
    |- golang/
    |- mysql/
    |- react/
go-app/
react-app/
docker-compose.yml

docker-compose.ymlを書く

説明の順番としては、前後していますが全体の構成を示すため先にdocker-compose.ymlを示します。

今回の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/react-app:/app/react
    command: sh -c "cd /app/react && yarn install && yarn start"
    ports:
      - 3000:3000
  go:
    build:
      context: .
      dockerfile: ./docker/golang/Dockerfile
    container_name: go_container
    ports:
      - 8000:8000
    tty: true
    volumes:
      - ./go-app:/app/go
  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

golang、react、mysqlのコンテナごとにDockerfileを用意し、それぞれのDockerfileを利用してコンテナを作ります。
それぞれのコンテナはローカル環境での開発を想定しているので、ローカルのディレクトリをボリュームとしてマウントします。
あとは適宜、必要に応じてポートを設定したり、パスワードを設定したりしています。

reactのコンテナを作る

docker/react/Dockerfileは以下のようにしています。

docker/react/Dockerfile
FROM node:16.0.0
WORKDIR /app/react
RUN npm i --save prop-types
RUN npm i -g create-react-app

Dockerfileにnpmを使ってreactのプロジェクトを作成するようにしています。

golang(APIサーバ)のコンテナを作る

docker/golang/Dockerfileは以下のようにしています。

docker/golang/Dockerfile
FROM golang:alpine
RUN apk update
RUN apk add alpine-sdk
COPY ./go-app /app/go
WORKDIR /app/go
RUN go build -o main .
CMD [ "/app/go/main" ]

go-app/main.goというファイルを作成しておきます。内容はとりあえず以下のようにしておきます。

go-app/main.go
package main

import (
	"fmt"
	"net/http"
)

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

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

mysqlのコンテナを作る

golangのAPIがデータを保存したり、取得したりするためにmysqlを用意します。
今回はmysqlのコンテナを用意し、mysqlコンテナにデータを保存するようにします。

踏まえて、docker/mysql/Dockerfileは以下のようにしています。

docker/mysql/Dockerfile
FROM --platform=linux/x86_64 mysql:latest

本来的にはmysqlのバージョンを指定するのが良いです。
またお仕事の案件ならmysqlのバージョンを指定しましょう。
とはいえ、個人や技術検証レベルで使うものであればとりあえずlatestを使っておいてOKでしょう。

実際にコンテナを起動して、動作確認をする

ここまでで設定してきたコンテナを起動して、動作確認していきます。

コンテナを起動する

ここまでで一通り、準備は整いました。あとはコンテナを起動していきます。
コンテナの起動にはdocker-composeを使います。

// 初回はこのコマンドを実行する
docker-compose up -d

// コンテナのイメージとコンテナが一度出来上がったら以下のコマンドでコンテナを起動する
docker-compose start

// コンテナの停止
docker-compose stop

初回はそれぞれのコンテナのイメージが無いはずなので、それぞれのイメージをpullして、ビルドする必要があります。
そのためdocker-compose up -dを実行してそれらを行います。

実行してそれぞれのコンテナについて、doneが表示されたらOKです。

golangが実行できることを確認する

localhost://8000にアクセスして、Hello Worldが表示されたらOKです。

reactが実行できることを確認する

localhost://3000にアクセスして、reactのページが表示されたらOKです。

↓うまくいけばのような画像が表示されます。

まとめ

golangでAPIとを開発ができる環境の準備ができました。
次回は実際にデータを保存する、取得するという部分を実装していきます。

不定期更新ですが、コツコツと続けていきます。
カラビナテクノロジー株式会社をよろしくお願いします。

Discussion