首先

由于在业务中经常需要创建标题环境，并为以后的教学节约时间，我决定进行整理。
由于之前已经发表了有关使用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

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

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

[mysqld]
character-set-server=utf8

[client]
default-character-set=utf8

Docker准备中

我們將創建一個 Docker 映像檔
容器的啟動將在創建後續的 reactapp 專案之後進行

$ docker-compose build

反应

// 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@^4

安装完Chakra UI后，请不要忘记在index.tsx文件中使用ChakraProvider标签来包裹App标签。

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的button组件，以确认chakra-ui是否被应用。

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，并出现以下界面，则表示一切正常。

MySQL – MySQL是一个开源的关系型数据库管理系统。

进入 db 的容器，并确认能够连接到 MySQL。

$ docker exec -it db sh

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

请去。

我会进入go的容器中。

$ docker exec -it go sh

进入go/src目录并创建go.mod文件。

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

在go/src目录下创建一个名为main.go的文件，内容如下。

package main

import "fmt"

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

如果执行以下操作，并在控制台上显示“Hello, World！”则表示OK。

# go run main.go

最后

我知道我说了很多，但我希望这样可以省去你再去调查类似事情的必要性。