Zenn
Open5

Gin(GO)+Angular(TypeScript)+dockerの環境構築

Docker
Go
TypeScript
gin
Docker Hub
ピン留めされたアイテム
じんじん

docker上にバックエンドをGoLang(Gin使用)、フロントエンドをTypeScript(Angular)の環境構築をする。

じんじん

docker-compose.yamlの作成

ファイルの作成

terminal
$ touch dokcer-compose.yaml

docker-compose.yamlの記述内容

docker-compose.yaml
version: '3'

services:
  backend:
    container_name: back-container
    build:
      context: ./backend/
      dockerfile: Dockerfile
    volumes:
      - ./backend:/go/backend
    ports:
      - 8080:8080
    depends_on:
      - db
    command: air
    restart: always
  frontend:
    container_name: front-container
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    restart: always
    volumes:
      - ./frontend:/frontend:cached
      - $PWD/:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 4200:4200
    stdin_open: true
    tty: true
    command: npx ng serve --host=0.0.0.0
  db:
    container_name: db-container
    build:
      context: ./db/
      dockerfile: Dockerfile
    ports:
      - 3306:3306
    environment:
      MYSQL_DATABASE: mdet
      MYSQL_USER: mdet
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    volumes:
      - ./db/data:/var/lib/mysql:cached
    platform: linux/x86_64

どうにかしたいところ

  • frontend, backend, dbの立ち上げの順番の制御をしたい（暫定では、立ち上げ直すようにしている）
じんじん

バックエンドの環境構築

backendの作成

terminal
$ mkdir backend
$ cd backend
$ touch main.go Dockerfile

Dockerfileの記述

Dockerfile
FROM golang:1.20

WORKDIR /go/api/
COPY . .

RUN apt-get update && apt-get install -y git vim

RUN go install 
RUN go install github.com/cosmtrek/air@v1.27.8
CMD ["air", "-c", "backend/.air.conf"]

main.go の記述

main.go
package main

import (
	"fmt"
	"log"
	"net/http"
	"time"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"

	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

// TODO: アーキテクチャを決め次第別ファイルに定義する
type Product struct {
	gorm.Model
	Code  string
	Price uint
}

var Db *gorm.DB

func main() {
	// TODO: アーキテクチャを決め次第configで別ファイルに定義する
	dsn := "mdet:password@tcp(db:3306)/mdet?charset=utf8&parseTime=True&loc=Local"

	var err error
	if Db, err = gorm.Open(mysql.Open(dsn), &gorm.Config{}); err != nil {
		connectDb(dsn, 5)
	}

	Db.AutoMigrate(&Product{})

	r := gin.Default()

	r.Use(cors.New(cors.Config{
		AllowOrigins: []string{
			"http://localhost:4200/",
		},
	}))

	r.GET("/ping", func(ctx *gin.Context) {
		ctx.JSON(http.StatusOK, gin.H{
			"message": "pong",
		})
	})

	r.Run()
}

func connectDb(dsn string, retryCount int) {
	fmt.Println("Retry connect DB")
	var err error
	retryCount--
	if Db, err = gorm.Open(mysql.Open(dsn), &gorm.Config{}); err != nil {
		if retryCount > 0 {
			time.Sleep(10 * time.Second)
			connectDb(dsn, retryCount)
			return
		}
		log.Fatal(err)
		panic("failed to connect database")
	}
}

go.mod, go.sumの生成

terminal
$ go mod init backend && go mod tidy
じんじん

frontendの環境構築

frontendの作成

terminal
$ ng new frontend               // npm install -g @angular/cli が入っていること
$ cd frontend
$ touche Dockerfiel

Dockerfileの記述

Dcokerfile
FROM node:18.18.0-alpine3.18

RUN apk update

WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY ./ /app/
じんじん

DBの環境構築

dbの作成

termianl
$ mkdir db
$ cd db
$ touch Dockerfile my.cnf

Dockerfile の記述

Dockerfile
FROM mysql:8.0.34-debian

RUN apt-get clean && \
    apt-get update && \
    apt-get install -y locales vim && \
    echo "ja_JP.UTF-8 UTF-8" > /etc/locale.gen && \
    locale-gen ja_JP.UTF-8

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:en
ENV LC_ALL ja_JP.UTF-8
ENV TZ=UTC

COPY my.cnf /etc/my.cnf

my.cnf の記述

my.cnf
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4