【2025正規MFi認証品】i-Phone 充電ケーブル ライトニングケーブル 純正品質【1M/2M 各２本】充電器 ケーブル 2.4A急速充電 USB 充電コード 高速データ転送 断線防止 高耐久 i-Phone 14/14 Pro/13/13 Pro/12/11/X/8/8plus/7/6/iPad 各種対応
￥898 (2025年5月3日 13:14 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
概要
Next.jsで作成したアプリを AWS EKS上にデプロイする方法を紹介します！
以前はGoで実装したAPIをk8s環境にデプロイする記事も書きました！
ローカルのk8sではなく、EKSにデプロイする記事もということで
今回はNext.jsにて試します！
前提条件
- node.jsの開発環境が整っていること
- Docker と Kubernetes（k8s）がインストールされていること
- AWS ECR（Elastic Container Registry）へのアクセス権限があること
また今回はHelm Chartを使用して、k8sリソース作成を
簡略化します！
Helmについては以下記事で入門編として解説してます！
1. Next.js プロジェクトを作成
Next.jsアプリを作成し、ウェルカムページを表示します！
今回はこの状態でEKSにデプロイしようと思います。
npx create-next-app@latest nextjs-app
cd nextjs-app
# 動作確認
npm run dev
2. Dockerfile の作成
次に、アプリケーションを Docker コンテナにパッケージングするための Dockerfile を作成します。
FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm install
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
# 本番に必要なものだけコピー
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
EXPOSE 3000
CMD ["npm", "start"]
今回は実装少ないですが、ライブラリをインストールしたりすると重くなるので
マルチステージビルド等で工夫すると尚良いかと！
3. Docker イメージをビルド
次に、Docker イメージをビルドします。
$ docker build -t nextjs-app .
一応ローカルでも動作確認してみよう！
1. Docker イメージをビルド
docker build -t nextjs-app .
-t nextjs-app はタグ名の指定です（任意）
2. コンテナを起動
docker run -p 3000:3000 nextjs-app
-p 3000:3000 でローカルのポート3000にバインドします。
3. ブラウザでアクセス
Next.js のトップページが表示されれば成功です ✅
4. AWS ECR に Docker イメージをプッシュ
AWS ECR を使用して、作成した Docker イメージをアップロードします。
ECR にリポジトリを作成
AWSマネジメントコンソールにログインし、ECRにリポジトリを作成しましょう。
名称は任意で大丈夫です！
作成したら、画面右上に「プッシュコマンドを表示」ボタンがあります。
これを押下すると、何とECRにPushするところまで方法を案内してくれます！
5. Kubernetes クラスタの準備
kubectl コマンドで Kubernetes クラスタに接続していることを確認します。
今回は、kind でクラスタを作成する方法を記載します。
6. Helm を使ってデプロイ
helm を使って、Kubernetes 上に Next.jsアプリをデプロイします。
まずは、Helm チャートのテンプレートを作成し、values.yaml を編集します。
Helm Chartを作成する
$ helm create nextjs-chart
これで go-api/ ディレクトリができ、k8sリソースを作成するための
基本構成が入っています。
ディレクトリ構成例
nextjs-chart/
Chart.yaml # Chartの基本情報
values.yaml # デフォルトの変数
templates/ # K8sマニフェスト（Helmテンプレート）
deployment.yaml # デプロイメント定義
service.yaml # サービス定義
ingress.yaml # ingress
...
values.yaml
values.yaml
replicaCount: 1
image:
repository: {作成したECRのURI}
tag: {作成したECRのタグ}
service:
name: nextjs-chart
type: ClusterIP
port: 3000
readinessProbe:
httpGet:
path: /test
port: 3000
initialDelaySeconds: 3
periodSeconds: 10
ingress:
enabled: true # falseになるとIngress リソースが作成されないので注意！
className: "alb" # ingress.yamlのingressClassNameに該当
annotations: {}
hosts:
- host: chart-example.local
paths:
- path: /
pathType: ImplementationSpecific
tls: []
deployment.yaml
deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: nextjs-chart
spec:
replicas: {{ .Values.replicaCount }}
selector:
matchLabels:
app: nextjs-chart
template:
metadata:
labels:
app: nextjs-chart
spec:
containers:
- name: nextjs-chart
image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
ports:
- containerPort: 3000
livenessProbe:
httpGet:
path: {{ .Values.livenessProbe.httpGet.path }}
port: {{ .Values.livenessProbe.httpGet.port }}
readinessProbe:
httpGet:
path: {{ .Values.readinessProbe.httpGet.path }}
port: {{ .Values.readinessProbe.httpGet.port }}
ingress.yaml
ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: nextjs-ingress
annotations:
alb.ingress.kubernetes.io/scheme: internet-facing
alb.ingress.kubernetes.io/listen-ports: '[{"HTTP": 80}]'
alb.ingress.kubernetes.io/target-type: ip
spec:
ingressClassName: alb
rules:
- http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: nextjs-chart
port:
number: 3000
7. ingressの説明
改めてingressの説明！
Kubernetes の Ingress リソースは、
クラスター外部からの HTTP/HTTPS トラフィックを
Service にルーティングするためのエントリポイントです！
特に複数のアプリケーション（Next.js✖️go）のように、ドメインを集約し、
パスベースで振り分ける場合に非常に有効です。
- 「/」とか「/api」みたいに
- ingressを介して、ルーティングするためにALB Ingress Controllerをインストールします（8番で手順を説明します）
8. ALB Ingress Controllerをインストール（初回のみ）
① [IAM OIDC provider の有効化]（初回のみ）
eksctl utils associate-iam-oidc-provider --region ap-northeast-1 --cluster --approve
② IAM Policy の作成
curl -o iam_policy.json https://raw.githubusercontent.com/kubernetes-sigs/aws-load-balancer-controller/main/docs/install/iam_policy.json
aws iam create-policy \
--policy-name AWSLoadBalancerControllerIAMPolicy \
--policy-document file://iam_policy.json
③ Service Account 作成（–cluster はあなたのEKS名に）
eksctl create iamserviceaccount \
--cluster \
--namespace kube-system \
--name aws-load-balancer-controller \
--attach-policy-arn arn:aws:iam:::policy/AWSLoadBalancerControllerIAMPolicy \
--approve
④ Helm を使って Controller をインストール
helm repo add eks https://aws.github.io/eks-charts
helm repo update
helm upgrade -i aws-load-balancer-controller eks/aws-load-balancer-controller \
-n kube-system \
--set clusterName= \
--set serviceAccount.create=false \
--set serviceAccount.name=aws-load-balancer-controller \
--set region=ap-northeast-1 \
--set vpcId= \
--set image.repository=602401143452.dkr.ecr.ap-northeast-1.amazonaws.com/amazon/aws-load-balancer-controller
vpcId は aws eks describe-cluster –name で取得できます。
⑤ 確認！
kubectl get pods -n kube-system | grep aws-load
Pod が Running になればOKです！
9. Kubernetes にデプロイ
次に、Helm を使って Kubernetes クラスタにデプロイします。
#「nextjs-chart」は任意で変えて大丈夫です
$ helm install nextjs-chart ./nextjs-chart
# Ingress確認（ALBのDNSが表示されるまで少し待ちます）
kubectl get ingress
これで、Next.jsアプリが Kubernetes 上でデプロイされ、サービスが公開されます。
10. 動作確認
デプロイ後、以下のコマンドでリソースが正常にデプロイされているか確認します。
まずはPodが起動しているかをチェック。
動作確認
$ kubectl get pods
NAME READY STATUS RESTARTS AGE
nextjs-chart-cd454c75-jk6wv 1/1 Running 0 2s
$ kubectl get ingress
NAME CLASS HOSTS ADDRESS PORTS AGE
app-nextjs alb chart-example.local 80 44s
nextjs-ingress alb * k8s-frontend-63afaf69ef-1598947954.ap-northeast-1.elb.amazonaws.com 80 44s
アクセス確認
- 表示されたALBのDNSにブラウザでアクセス（
http://）/ - Next.jsトップページが表示されれば成功！
Next.jsのウェルカムページの表示が
確認できればOKです！
まとめ
今回は Next.jsアプリをEKSにデプロイする方法を紹介しました！
k8sを個人開発で使用するための入門として、お役に立てれば幸いです！
Views: 0
ALLDOCUBE iPlay 70 mini Ultra タブレット 8.8インチ Snapdragon7+Gen3 2560×1600解像度 144Hz高リフレッシュレート 20GB+256GB+1TB拡張 7300mAh PD20W デュアルスピーカーDTSサウンド 6軸ジャイロ WiFi6 BT5.4 WidevineL1 重力センサー 光センサー Androidタブレットアンドロイド
(2025年5月3日 13:16 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
