AWS合格したので次はVue.js+Go+Dockerを使ってみる

Pocket
LINEで送る

こんにちは、有安です。

前回の続きですが、AWS合格していました!

社内でも勉強会を開いたりして、みんなで更にキャッチアップしていけたらと思います。

前回の予定では、合格編として色々書こうかと思ったのですが、よく考えたら問題は載せてはいけないみたいだし、似たような合格体験記たくさんあるので、別のことを書くことにしました。

ということで、表題の通り、今回はGoとVueをDockerで動かしてみようと思います。

vueとgoをDocker上で動かしてローカルで連携させるところをゴールにしたので、goではpingを返すだけ、vueではそれを受け取って画面に表示するだけにしました。

制作物は以下のURLから見れます。

https://github.com/yujiariyasu/vue-docker-test

githubに上がっている通り、clientディレクトリとserverディレクトリとdocker-compose.ymlから成っています。

clientはvueで、serverはgoで書いています。

それではそれぞれ説明していきますね。

【client】

まずはvue createします。

$ vue create client

Dockerfileを作ります。

$ cd client
$ touch Dockerfile

 

中身。

FROM node:10.12-alpine as build-stage
WORKDIR /app
COPY . .
RUN yarn install

axiosを使うのでインストールします。

$ npm install axios

 

HelloWorld.vueをいじりましょう。

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 </div>
</template>

<script>
import axios from "axios";
export default {
 name: 'HelloWorld',
 data: function() {
  return {
  msg: String
  }
 },
 methods: {
  clear () {
   this.msg = ''
  }
 },
 created () {
  axios.get('http://localhost:8888').then(res => {
   this.msg = res.data.message
  }).catch(err => {
   console.error(err)
  })
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

created()でローカルのapiを叩いています。あとでgoで作ります。

こんだけ!

【server】

まずはserverディレクトリを作り、その中にmain.goとgo.modを作ります。(go modules使っています)

main.goを以下のように編集。

package main

import (
 "github.com/gin-contrib/cors"
 "github.com/gin-gonic/gin"
)

func main() {
 r := gin.Default()
 r.Use(cors.New(cors.Config{
  AllowOrigins: []string{"http://localhost:8080"},
  AllowMethods: []string{"GET"},
  AllowHeaders: []string{"*"},
 }))
 r.GET("/", func(c *gin.Context) {
  c.JSON(200, gin.H{
   "message": "ping",
  })
 })
 r.Run(":8888")
}

ginを使っています。

CORSに関しては、AllowOriginsに’http://localhost:8080’を指定しています。

ルートを叩くとpingを返すだけの単純なAPIになっています。

こちらもDockerfileを作っておきます。

FROM golang:1.11

WORKDIR /api
COPY . .
ENV GO111MODULE=on

RUN go get github.com/pilu/fresh
CMD ["fresh"]

 

freshを使って、ホットリロードしようとしています。がしかし、これがなぜが動かない。。ホットリロード以外は動くのでとりあえず先に進みます。

さて、docker-compose.ymlも作っておきます。

version: '3'

services:
 client:
 build: ./client
 ports:
 - 8080:8080
 volumes:
 - ./client:/app
 command: yarn serve
 environment:
 - CHOKIDAR_USEPOLLING=true

 server:
 build: ./server
 ports:
 - 8888:8888
 volumes:
 - ./server:/api

これで準備OKです!早速動作確認してみます。

$ docker-compose up -d

バックグラウンドで動かして、localhost:8080をブラウザで開いてみます。

スクリーンショット 2019-06-20 17.57.41

出来た!pingという控えめな文字!さようなら!

(次回はデプロイ編です、API GatewayとかLambda使います!)

Pocket
LINEで送る