Chapter 09

AWS ECR (フロントエンド編)

それではまず、フロントエンドから進めていきます。
AWS のアカウントの登録は既に完了している前提で進めていきます。

まず早速 AWS の ECR にリポジトリを作成します。

リポジトリ名を決め、 [リポジトリ作成] ボタンをクリックします。

以下のようにリポジトリが追加されます。

画面上部に表示される緑のフィードバックメッセージの [プッシュコマンドの表示] をクリックすると、以下のポップアップが表示されます。
基本的にこの流れに沿って、ローカル環境でコマンドを叩けば ECR に image が push されますので、この流れに沿って進めていきます。

AWS から開発環境(ターミナル)に移り、 frontend 配下に移動します。

cd /zenn-app/frontend

そして、 Dockerfile を以下のように修正します。

FROM node:14.3

WORKDIR /app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

ADD package.json /app/package.json
ADD package-lock.json /app/package-lock.json

RUN apt-get update -y && \
  apt-get upgrade -y && \
  npm install npm@6.14.4 && \
  npm install ejs@3.0.1 &&\
  npm install nuxt@2.0.0 &&\
  npm install create-nuxt-app@2.15.0 &&\
  npm install defu@3.1.0

ADD . /app

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start"]

build する準備が整いましたので、 [プッシュコマンドの表示] に沿って進めていきます。

[プッシュコマンドの表示] にも記載がありますが、 AWS CLI がインストールされている必要がありますので、まだインストールされていない方はそちらをインストールしてください。

インストールした後に、 [プッシュコマンドの表示] の順番でコマンドを叩きます。

# 認証
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin #{YOUR_AWS_ACCOUNT_CODE}.dkr.ecr.ap-northeast-1.amazonaws.com

# image の build
$ docker build -t zenn-app-frontend .

# タグ付け
$ docker tag zenn-app-frontend:latest #{YOUR_AWS_ACCOUNT_CODE}.dkr.ecr.ap-northeast-1.amazonaws.com/zenn-app-frontend:latest

# image を push
$ docker push #{YOUR_AWS_ACCOUNT_CODE}.dkr.ecr.ap-northeast-1.amazonaws.com/zenn-app-frontend:latest

私は aws-cli のバージョンが aws-cli/1.16.76 で、 1つ目のコマンドでエラーになってしまったので、以下のコマンドを叩いて、認証をパスしました。( aws-cli のバージョンをあげなければならないのですが...)

$ $(aws ecr get-login --no-include-email --region ap-northeast-1)         
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
Login Succeeded

4つ目の docker push ... の後に以下のログが表示されれば、push は成功したことになります。

The push refers to repository [#{YOUR_AWS_ACCOUNT_CODE}.dkr.ecr.ap-northeast-1.amazonaws.com/zenn-app-frontend]
f241a2d85926: Pushed
18ae5c87d7fd: Pushing [==============>                                    ]  42.63MB/144.1MB
efe638c23ef5: Pushing [=====>                                             ]  44.51MB/396MB
00f4ba05d58d: Pushed
967602296b5e: Pushed
...
6885f9305c0a: Pushed
latest: digest: sha256:xxxxxxx size: 3475

AWS に画面を戻し、ECR を確認します。

latest のタグで image が登録されていれば OK です。