Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@nakano-shingo

【Nuxt.js】AWS ECR/FargateにデプロイするためのDockerイメージ作成方法

More than 1 year has passed since last update.

TL;DR.

  • AWS上でNext.js(SSR)アプリを動かすために、NuxtアプリをビルドするためのDockerイメージが必要
  • ローカル環境でdocker buildした後、ECRにDockerイメージをpushして、それをFargateにデプロイする

前提

  • Node.jsのパッケージは管理はyarnを利用
  • ローカル環境でNuxt.jsアプリが立ち上がる(yarn build / yarn startが実行できる)であること

ローカル環境での作業

1. ルート直下に以下のファイルを作成

Dockerfile
FROM node:12-alpine

ENV HOST 0.0.0.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app

ARG ENV
ENV ENV $ENV

RUN yarn && yarn build

EXPOSE 3000

CMD ["yarn", "start"]
.dockerignore
node_modules/
.nuxt/

2. Dockerイメージの作成

$ docker build -t docker-image-name:0.0.1 .

3. 動作確認

以下コマンド実行後、ブラウザでhttp://localhost:3000にアクセス

$ docker container run -d -p 3000:3000 --name docker-image-name docker-image-name:0.0.1
--- container id が表示されている ---

4. dockerコンテナの停止+削除

$ docker stop xxxxx
$ docker rm xxxxx

xxxxxの部分は、上記で「docker container run」を実行した際にに出力されたコンテナIDを入力
(わからなければ、docker ps等で調べる)

作成したDockerイメージをECRにpush

1. Dockerイメージのタグ付け

$ docker tag docker-image-name:0.0.1 xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/docker-image-name:0.0.1

$ docker tag xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/docker-image-name:0.0.1 xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/docker-image-name:latest

2. Dockerイメージのpush

$ docker push xxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/docker-image-name:latest

Fargateへのデプロイ

新しいdocker imageをlatestタグ付けしてECRにアップ後、Amazon ECS>クラスター>対象クラスタ>サービス名リンククリック>更新ボタンから、 新しいデプロイの強制にチェック入れて他そのままで更新すると、勝手にlatestでデプロイしてくれる(数分かかる)

ref: nuxtプロジェクトを独自ドメインでSSR(CloudFront -> ALB -> Fargate) - Qiita


AWS超初心者なので、何か誤った情報や誤解を招く表現があればご指摘ください

参考

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nakano-shingo
渋谷でテックリードやってます
mostyplace
メディア事業では、旅行・ライフスタイル・恋愛・ライフエンディングなどの事業を展開。各領域のエキスパートが事業責任者となって国内No.1の事業を目指しています。 エンタメサービス事業では、自社のエンタメサービスのアプリの開発や運営を行なっています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?