Nuxt3 を AWS ECS にデプロイする ( + Dockerfileの例 )

前提

ECS公式ハンズオンを完了しており、ECSクラスタ・VPC・セキュリティグループなどの設定ができていること

nuxtプロジェクト作成

npx nuxi init nuxt-ex
cd nuxt-ex

Dockerfile

nuxtプロジェクトと同じディレクトリにDockerfileを作成
port は80にしておく

FROM node:19.5.0-alpine3.16

RUN mkdir /web
WORKDIR /web

RUN apk update && \
    npm install -g npm && \
    npm install -g vue-cli

COPY package.json /web/

RUN npm install
CMD PORT=80 npm run dev

ビルド

docker build -t nuxt-ex .

local で動作確認

てきとうなportにつなげる

docker run -it -p 7000:80 nuxt-ex

ECRレポジトリを作成してイメージをpush する

docker tag nuxt-ex:latest **********.dkr.ecr.ap-northeast-1.amazonaws.com/nuxt-ex:latest
docker push **********.dkr.ecr.ap-northeast-1.amazonaws.com/nuxt-ex:latest

AWSでタスク定義を作成

今pushしたECRイメージを指定する

イメージURLは docker push で使ったものそのまま

**********.dkr.ecr.ap-northeast-1.amazonaws.com/nuxt-ex:latest

ECSでサービス作成

さきほど作ったタスク定義を指定する

てきとうに既存のロードバランサを使うか新規に作る

デプロイ進行中

CloudFormationのログでサービス作成が成功したことが分かる「

サービスのログが現れる

Webアクセス

サービスのネットワーキングタブで「オープンアドレス」のリンクを開く

成功

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter