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サービスを作るでした。