Sapper × Go(echo) × Dockerの開発環境構築

はじめに

フロント:Svelte.js(Sapper),API:Go(echo)でアプリを作ってみたかったので
Dockerを使って構築した。

どこまでやるか

Sapper,echoをローカルホストで接続できるところまで

初期のディレクトリ構造

今回の環境構築にあたり、「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン
を参考にさせていただきました。

シンプルでわかりやすい。

.
├── docker-compose.yml
└── server

Sapperの開発環境構築

npx degit "sveltejs/sapper-template#rollup" client

cd client
npm install
touch Dockerfile_develop

Dockerfileですが、自分の場合production用のDockerfileも用意したいため、名前をDockerfile_developにしてます。
特に分ける必要がなかったり、マルチステージビルドでおさまりそうであれば一個にしてしていただいて構いません。

Dockerfile

FROM mhart/alpine-node:12

WORKDIR /app
COPY package.json package-lock.json ./

RUN npm ci

ENV HOST=0.0.0.0
EXPOSE 3000

docker-compose.yml

version: '3.8'

services:
  client:
    env_file: .env
    build: 
      context: ./client
      dockerfile: Dockerfile_${DOCKER_ENV} # この行はいらなければ削除
    ports:
      - 3000:3000
    tty: true
    volumes:
      - ./client:/app
    command: npm run dev

※環境変数がある場合

touch .env
vim .env

DOCKER_ENV=develop

この段階でSapperが起動するかみてみましょう

docker-compose up --build

Go(echo)の開発環境構築

cd server
touch Dockerfile
touch main.go

Dockerfile

FROM golang:1.15.2-alpine


WORKDIR /go/src/api
ADD .  /go/src/api
ENV GO111MODULE=off

RUN apk update && apk add curl git

main.go

package main

import (
  "net/http"
  "github.com/labstack/echo"
)

func main() {
  e := echo.New()
  e.GET("/", func(c echo.Context) error {
    return c.String(http.StatusOK, "Hello, World")
  })
  e.Logger.Fatal(e.Start(":8080"))
}

docker-compose.yml

version: '3.8'
...
  server:
    build: ./server
    ports:
      - 8080:8080
    tty: true
    volumes:
      - ./server:/api

echoのローカルサーバーを立ち上げます。

docker-compose up --build
docker-compose exec server /bin/ash
go get github.com/labstack/echo
go run main.go

これでlocalhost:8080にアクセスできれば完了です。

おわりに

次はGorm, MySQLを入れるところまでやりたい

参考資料

「Vue.js + Go言語 + Docker」で作る！画像アップロード機能実装ハンズオン
svelteの開発環境の作り方
Hello World Recipe