DockerでGo+React+TypeScript+Chakra-UI+MySQLの環境をつくる

はじめに

業務でタイトルの環境を作ることが多くなってきたことと、今後教える際に楽をするためにまとめてみます。
以前にDockerでGo+MySQLの環境をつくる記事を出しているので、こちらと重複している部分があります

ディレクトリ構成

sample-project
┣ docker
┃   ┣ go
┃   ┃　┗ Dockerfile
┃   ┣ reactapp
┃　　　 ┗ Dockerfile
┣ .env
┣ docker-compose.yml
┣ my.cnf

ファイル作成

# docker/go/Dockerfile

FROM golang:1.18.0
RUN apt-get update && apt-get install -y build-essential make

# vscodeの拡張機能のためにインストール
RUN go install golang.org/x/tools/gopls@latest
RUN go install github.com/ramya-rao-a/go-outline@latest
RUN go install github.com/cosmtrek/air@latest
// RUN wget -O ~/vsls-reqs https://aka.ms/vsls-linux-prereq-script && chmod +x ~/vsls-reqs && ~/vsls-reqs

WORKDIR /go/src

# docker/reactapp/Dockerfile

FROM node

RUN apt-get update

.env

ROOTUSER=root
ROOTPASS=password
DATABASE=sampledb
USERNAME=docker
USERPASS=docker

docker-compose.yml

services:
  app:
    build: ./docker/reactapp
    container_name: reactapp
    tty: true
    working_dir: /usr/src/app
    volumes:
      - ./reactapp:/usr/src/app
    command: sh -c "yarn start"
    ports:
      - "3000:3000"

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_USER: ${ROOTUSER}
      MYSQL_ROOT_PASSWORD: ${ROOTPASS}
      MYSQL_DATABASE: ${DATABASE}
      MYSQL_USER: ${USERNAME}
      MYSQL_PASSWORD: ${USERPASS}
      TZ: "Asia/Tokyo"
    volumes:
      - ./my.cnf:/etc/mysql/conf.d/my.cnf
    env_file:
      - .env
    container_name: db
    ports:
      - 3306:3306

  go:
    build: ./docker/go
    volumes:
      - ./go/src:/go/src
    container_name: go
    tty: true
    ports:
      - "8000:8000"
    depends_on:
      - db

my.cnf

[mysqld]
character-set-server=utf8

[client]
default-character-set=utf8

Docker準備

Dockerイメージの作成を行います
コンテナの起動は後述のreactappプロジェクトを作成してからになります

$ docker-compose build

React

// reactappは作成したいプロジェクト名
$ npx create-react-app --template typescript reactapp

コンテナを起動します

$ docker-compose up

localhost:3000にアクセスして以下の画面が表示されていればOKです

Chakra-UI

// package.jsonのあるディレクトリでインストール
$ cd reactapp
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^10

※2023/6/20 追記
chakraのモーダルコンポーネントを利用する際はframer-motionのバージョンに注意が必要です。バージョンが4系だとモーダルが再表示されなくなりました。追記時点では6系や10系で正しく動作することを確認できています。その他のバージョンについては確認していません。

chakra-uiのインストールが完了したら忘れずにindex.tsxのAppタグをChakraProviderタグで囲みます

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

reportWebVitals();

次にApp.tsxのreturnの中身をchakra-uiのbuttunコンポーネントに変更し、chakra-uiが適用されるか確認します

App.tsx

import React from "react";
import "./App.css";
import { Button } from "@chakra-ui/button";

function App() {
  return <Button colorScheme="blue">Button</Button>;
}

export default App;

localhost:3000にアクセスして以下の画面になっていればOKです

MySQL

dbのコンテナに入り、mysqlに接続できることを確認します

$ docker exec -it db sh

// passwordはpassword(.envのROOTPASS)
$ mysql -u root -p

Go

goのコンテナに入ります

$ docker exec -it go sh

go/srcに移動してgo.modを作成します

// sample_goというモジュール名で作成
# go mod init sample_go

go/srcで以下内容のmain.goを作成します

main.go

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

以下を実行し、コンソール上にHello, World!が表示されたらOKです

# go run main.go

おわりに

長くなってしまいましたが、これで同じようなことを調べる必要がなくなればと思います。