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 する
<img width="531" alt="image" src="https://user-images.githubusercontent.com/13635059/217143271-551d89c2-b901-4342-a29d-e3f9debf92a7.png">
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
<img width="1438" alt="image" src="https://user-images.githubusercontent.com/13635059/217142437-9e273089-fb80-4238-a5ca-b47a7f66558b.png">
ECSでサービス作成
さきほど作ったタスク定義を指定する
<img width="1373" alt="image" src="https://user-images.githubusercontent.com/13635059/217142766-4f8a151d-7b5f-4880-bdf4-dea9b5cd58ac.png">
てきとうに既存のロードバランサを使うか新規に作る
<img width="884" alt="image" src="https://user-images.githubusercontent.com/13635059/217143449-8b9957e4-569c-4477-abd3-a6c7b78f6513.png">
デプロイ進行中
CloudFormationのログでサービス作成が成功したことが分かる「
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/13635059/217142826-33941979-3769-4d67-9ac4-ae70d8e23600.png">
サービスのログが現れる
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/13635059/217142909-f16c94fd-514e-45ba-8b88-59ac1090d895.png">
Webアクセス
サービスのネットワーキングタブで「オープンアドレス」のリンクを開く
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/13635059/217143005-23b1cc2e-4173-44e6-a48e-781e9db9e464.png">
成功
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-02-07
Discussion