🖥

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

に公開

前提

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

https://catalog.us-east-1.prod.workshops.aws/workshops/7ffc4ed9-d4b3-44dc-bade-676162b427cd/ja-JP/1-introduction/1-overview

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">

成功

image

チャットメンバー募集

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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-02-07

Discussion