yuheijotaki.com

Nuxt.js + AWS ECS Fargate その1（Nuxt.jsアプリ作成〜ECRリポジトリへのプッシュ）

f:id:jotaki:20210321165648p:plain

トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します🚀 の記事を参考に進めてみる。

ローカル環境 使用バージョン

  • Node.js: 12.11.0
  • AWS CLI: 2.1.31

Nuxt.js アプリの作成

create nuxt-app で作成します。

$ yarn create nuxt-app nuxt-fargate_app
yarn create v1.13.0
create-nuxt-app v3.6.0
...

設定項目は下記のようにしました。
Fargateで動かすのでRendering modeはUniversalを指定。
しばらく触ってないと細々変わりますね。。

? Project name: nuxt-fargate_app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? yuhei jotaki
? Version control system: Git

Dockerfile を使用してイメージを作成

Docker 向けに package.json の scripts を調整する。

  ...
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",
    "build": "nuxt build",
    "start": "HOST=0.0.0.0 PORT=3000 nuxt start",
    "generate": "nuxt generate"
  },
  ...

Dockerfile をプロジェクトディレクトリに作成して下記のようにする。
Node.jsのバージョンは 公式のイメージ を参考にする。

FROM node:12

RUN mkdir -p /var/www/nuxt-fargate_app
WORKDIR /var/www/nuxt-fargate_app
COPY ./ /var/www/nuxt-fargate_app
RUN npm run build

EXPOSE 3000

ENTRYPOINT [&#34;npm&#34;, &#34;run&#34;, &#34;start&#34;]

次にDockerアプリをrunningにする。
その後ビルドしてイメージが作成できているか確認。

$ docker build -t nuxt-fargate_app .
...
Successfully tagged nuxt-fargate_app:latest
$ docker images
REPOSITORY                 TAG              IMAGE ID       CREATED          SIZE
nuxt-fargate_app           latest           XXXXX   39 seconds ago   1.03GB
...

起動してみる。
ここはあまり分かってないですが、 0.0.0.0:3000 でアクセスできたのでOKなのかな

$ docker run -d -p 3000:3000 nuxt-fargate_app
...
$ docker ps
CONTAINER ID   IMAGE              COMMAND           CREATED          STATUS          PORTS                    NAMES
61f86de41a7a   nuxt-fargate_app   &#34;npm run start&#34;   21 seconds ago   Up 19 seconds   0.0.0.0:3000->3000/tcp   amazing_yalow

ECRでリポジトリを作成してイメージをプッシュする

AWS ECR > リポジトリ作成をする。
今回は nuxt-fargate_app というリポジトリ名にしました。

その後コマンドで認証してイメージをプッシュする。
それぞれつまづきましたが、認証は get-login は現在非推奨のため get-login-password が良いとのことで Amazon ECR での AWS CLI の使用 - Amazon ECR を参考にしました。
※ 後々振り返ると、ECRコンソール内 > リポジトリ > 該当リポジトリを選択 > プッシュコマンドの表示 にもコマンドが書いてありました。

# <profile-name>: ~/.aws/credentials のプロファイルの名前
# <app-name>: nuxt-fargate_app
# <aws-region-name>: ap-northeast-1
# <aws-account-id>: アカウントID

# ユーザー切り替え
$ export AWS_DEFAULT_PROFILE=<profile-name>

# 認証トークンを取得し、レジストリに対して Docker クライアントを認証します。
$ aws ecr get-login-password | docker login --username AWS --password-stdin https://<aws-account-id>.dkr.ecr.<aws-region-name>.amazonaws.com

# Docker イメージを構築します。
$ docker build -t <app-name>:latest .

# 構築が完了したら、このリポジトリにイメージをプッシュできるように、イメージにタグを付けます。
$ docker tag <app-name>:latest <aws-account-id>.dkr.ecr.<aws-region-name>.amazonaws.com/<app-name>:latest

# 新しく作成した AWS リポジトリにこのイメージをプッシュします。
$ docker push <aws-account-id>.dkr.ecr.<aws-region-name>.amazonaws.com/<app-name>:latest

以上でイメージをプッシュできました。

f:id:jotaki:20210321165218p:plain

AWSのコンソールやCLI最近あまり触る機会がなかったですが、CLIのバージョンアップやプロファイルの切り替え等々つまづくところが多かったです。
正直あまり分かってない部分も多いですが、次回以降はECSの設定になりそうですので引き続き更新できたらと思います。