Next.jsアプリをDocker DesktopのKubenetes上にデプロイ

Next.jsアプリケーションをDocker DesktopのKubernetes上にデプロイしました。

前提条件

• Mac(Big Sur v:11.6.5)
• Kubenetes on Docker desktop を有効化済み
• kubectl, yarn等の必要ツールをインストール済み

ゴール

Next.js アプリケーションをDocker desktopのKubernetesにデプロイします。
ゴールはこのようになると思います。

手順

デプロイするNext.jsのセットアップ

yarnで実行しました。

> yarn create next-app --example with-docker nextjs-k8s-app
# Ref: https://github.com/vercel/next.js/issues/33493
# Ref: https://nextjs.org/docs/deployment#docker-image
# Ref: https://github.com/vercel/next.js/tree/canary/examples/with-docker

Docker Imageをbuildし、DockerHubに登録します。
DOCKER_HUB_USER_IDは各自自分のDockerHubに置き換えてください。

> cd nextjs-k8s-app
> docker login # Optional
> docker build -t DOCKER_HUB_USER_ID/nextjs-k8s-app . && docker push DOCKER_HUB_USER_ID/nextjs-k8s-app

Kubenetesの準備

docker desktopにcontextを変更します。

> kubectl config use-context docker-desktop
# Ref: https://docs.docker.com/desktop/kubernetes/#use-the-kubectl-command

Namespaceを作成します。

> kubectl create namespace nextjs-k8s

deployment.yamlの準備

deploymentリソースのmanifestファイルを作ります。
どこでもいいですが、今回はデプロイするNext.jsアプリのrootに作ります。

deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nextjs-k8s-app-deployment
  labels:
    app: nextjs-k8s-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nextjs-k8s-app
  template:
    metadata:
      labels:
        app: nextjs-k8s-app
    spec:
      containers:
      - name: giraffe-app
        image: DOCKER_HUB_USER_ID/nextjs-k8s-app # DOCKER_HUB_USER_ID will be replaced.
        ports:
        - containerPort: 3000
# Ref: https://kubernetes.io/docs/concepts/workloads/controllers/deployment/#creating-a-deployment

deploymentリソースをnextjs-k8s(Namespace)に作成します。

> kubectl apply -f deployment.yaml -n nextjs-k8s

deploymentリソースができているか確認します。

❯ kubectl get deploy -n nextjs-k8s
NAME                        READY   UP-TO-DATE   AVAILABLE   AGE
nextjs-k8s-app-deployment   1/1     1            1           10s

Serviceを作成し、外部からアクセス可能にする

正常に動いていそうですが、このままではCluster外部からアクセスできないため、serviceリソースを作成し公開します。

❯ kubectl expose deployment -n nextjs-k8s nextjs-k8s-app-deployment --type NodePort --port 80 --target-port 3000

serviceリソースができているか確認します。Node portは自動的に割り振られます。

❯ kubectl get service -n nextjs-k8s
NAME                        TYPE       CLUSTER-IP       EXTERNAL-IP   PORT(S)        AGE
nextjs-k8s-app-deployment   NodePort   10.101.111.217   <none>        80:30812/TCP   10s

ブラウザからアクセスする

今回はNode portとして30812が割り振られているので以下のURLにアクセスしてみます。

http://localhost:30812

無事表示されています。

クリーンナップ

最後に作ったリソースを消して終了です。

> kubectl delete namespace nextjs-k8s
> docker rmi DOCKER_HUB_USER_ID/nextjs-k8s-app

まとめ

無事デプロイできたようです。
今回は非常にシンプルな構成にしたので今度はIngressなどを作ったりネットワークポリシーの設定をしたりしてみたいです。