使用单一存储库构建golang+react应用程序的开发环境

你好。

因为了解到存在一种叫做Monorepo的模式,能够在一个仓库中保存多个应用程序,所以我打算创建一个使用这种结构的开发环境来尝试一下。

这次思考的是,有一个由golang构建的API服务器,并且在react中实现其前端的架构。

通过这篇文章要达到的目的是什么?

    • golangでAPIの開発環境を作る

 

    • reactの開発環境を作る

 

    • 1つのリポジトリで↑2つのアプリが保存されている再現できる(モノレポ構成にする)

reactとgolangをモノレポで構成

语言和中间件版本

言語、ミドルウェアバージョンdocker20.10.11docker-compose1.29.2golangDockerfile参照mysqlDockerfile参照reactDockerfile参照nodeDockerfile参照

创建一个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文件如下所示。

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 :Docker 中的 react 镜像配置文件。

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 可以进行如下中文翻译:
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 的檔案,並將其內容先設置如下。

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容器,并将数据保存在该容器中。

根据以下方式,建立了docker/mysql/Dockerfile。

docker/mysql/Dockerfile 句子的汉语表达:
docker/mysql/Dockerfile 文件

FROM --platform=linux/x86_64 mysql:latest

原则上最好指定MySQL的版本。
另外,如果是工作项目,应该指定MySQL的版本。
但是,如果是个人或技术验证级别的使用,那么暂时使用最新版本的就可以了。

实际上启动容器并进行操作确认

我们将启动并进行运行确认已经设置好的容器。

启动容器

到目前为止,准备工作已经完成。接下来就是启动容器。
启动容器需要使用docker-compose。

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

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

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

由于第一次,应该没有每个容器的映像,所以需要拉取每个映像并构建。为此,请执行docker-compose up -d命令来完成这些操作。

当对每个容器执行完毕后,显示”done”即可确认完成。

确认能够运行Golang。

访问 localhost://8000,如果显示”Hello World”,则表示OK。

确认可以执行react

当访问 localhost://3000 时,如果能显示出 React 的页面,则表示一切正常。

react.png

整理

我已经准备好了可以开发API的Golang环境。
下一步,我们将实施数据的存储和获取部分。

今天就到这里吧。
非常感谢。

广告
将在 10 秒后关闭
bannerAds