Golang + Nuxt.js + Kubernetes でWebサービスを作る - その④

Golang + Nuxt.js + Kubernetes でWebサービスを作るシリーズ第四弾。今回はAPIサーバからWHOIS情報を取得し表示するフロントエンド部分をGKEにデプロイする。

---

フロントエンドのディレクトリに下記Dockerfileを追加

FROM node:lts-alpine
WORKDIR /app
COPY . /app
ENV NODE_ENV=production
ENV API_SERVER 'http://[IPアドレス]'
ENV HOST 0.0.0.0
RUN yarn install
RUN yarn run build
EXPOSE 3000
CMD ["yarn", "run", "start"]

下記コマンドでlocalhostからアクセスできる

docker run -it -p 3000:3000 --network host --name dockerized-nuxt webappfront:latest

次にこのコンテナイメージをGoogle Container Registryにアップロードするためにタグ付けを行う

docker tag api-prod gcr.io/[プロジェクト名]/[イメージ名]
:[バージョン名]

アップロード

docker tag api-prod gcr.io/[プロジェクトID]/apiprod:1.0.0
gcloud auth configure-docker
docker push gcr.io/プロジェクト名]/[イメージ名]
:[バージョン名]

GKEにデプロイするためのymlファイル

apiVersion: v1
kind: Service
metadata:
  name: webappfront
  labels:
    run: webappfront
spec:
  selector:
    run: webappfront
  ports:
  - name: http
    port: 3000
  type: NodePort

---
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: webappfront
  labels:
    run: webappfront
spec:
  replicas: 3
  template:
    metadata:
      labels:
        run: webappfront
    spec:
      containers:
      - name: webappfront
        image: gcr.io//apiprod:1.0.0
        ports:
        - containerPort: 3000

下記コマンドでGKEに設定を反映

kubectl create -f webappfront.yml

ingress.ymlの中身を下記のように変更しルーティングを指せる

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress
spec:
  rules:
  - http:
      paths:
      - path: /api/*
        backend:
          serviceName: webappapi
          servicePort: 8080
      - path: /*
        backend:
          serviceName: webappfront
          servicePort: 3000

kubectl apply -f ingress.yml

たぶんこれでうまくいく。 以上、Golang + Nuxt.js + KubernetesでWebサービスを作るでした。