Next.jsをAWSのFargateに自動デプロイのメモ

公開:2021/01/11
更新:2021/01/15
3 min読了の目安(約3500字TECH技術記事

※これから追記していきますが、自分用のメモとして記載、公開しています。

■ GitHubでローカルリポジトリを作成する
参考URL: なし

■ Route53で独自ドメインの設定
参考URL:

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/c7dc11

■ ECRの準備
参考URL:

https://kleinblog.net/ecs-ecr-hello-world.html

・Next.jsを、npm run build と npm start して動くことを確認

・Next.js用のDockerfileを作成

FROM node:12

# and mount application
RUN mkdir -p /var/www/ragate.co.jp
WORKDIR /var/www/ragate.co.jp
COPY ./ /var/www/ragate.co.jp
RUN npm run build

EXPOSE 3000

ENTRYPOINT ["npm", "run", "start"]

・念のためローカルでdockerの動作を確認する

$ docker build . -t ecs-test
$ docker images

※docker run のコマンドを知らないので、
Docker Desktopのダッシュボードから、port80番でスタートしています。

・ECRのリポジトリを作成
※イメージのアップはしなくてもOKです、リポジトリを作成するだけ。
後ほどCodePipeline経由でGithubと連携して勝手にアップされるようになるため。

・VPCなどのネットワークの設定
※参考URLにめちゃくちゃ詳しく書かれています。

ここまで出来たら次!
※ECS(Fargate)は、ALBとともに作成するので、ECSは作らなくてOKです

■ ALBとECSの作成
参考URL:

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/8364d5

・タスクの定義
※わかりやすくするため、タスク定義名に 『プロジェクト名-definition』

・「コンテナの追加」よりコンテナを作成
※わかりやすくするため、コンテナ名を、『プロジェクト名-container』
※「イメージ」はECRのURLのこと。
※ Next.jsなので、ポートマッピングに3000/tcpを設定

・サービスの作成
※わかりやすくするため、サービス名を、『プロジェクト名-service』

ロードバランサー用のコンテナ
※わかりやすくするため、ターゲットグループ名を『プロジェクト名-service-tg』

■ NextのCode PipelineでECSデプロイ自動化
参考URL:

https://www.ragate.co.jp/blog/articles/2200

・「ソースステージを追加する」のソースプロバイダーはGitHub(バージョン2)でOK
※もし設定項目が異なっていたら、AWSの詳細などから公式ドキュメントを確認してみる

・「ビルドステージを追加する」において、環境変数について
※AWS_ACCOUNT_ID {ECRのリポジトリのURLにて確認可} は、URL「.dkr」の前の数字のこと。
よくわからなかったらbuildspec.ymlを見よう。

・CodeBuildで『aws ecr get-login-password』あたりで、
『An error occurred (AccessDeniedException) when calling the GetAuthorizationToken …』の認証エラーに毎回引っかかる。

CodeBuildのプロジェクトのロールに、ECRの操作を許可するポリシーをアタッチする。これ絶対忘れるのでメモ。(AmazonEC2ContainerRegistryPowerUserというポリシー)

参考URL:

https://qiita.com/NaokiIshimura/items/e73898244d784d7fbce7

■ HTTPSする
参考URL:

https://zenn.dev/hibriiiiidge/books/49ee4063b10cec1df1a2/viewer/1a1805#4.-ssl-設定をしたコードでの-ecs-のデプロイ

◇ 設定ファイルのまとめ

・ Dockerfile

FROM node:12

# and mount application
RUN mkdir -p /var/www/ragate.co.jp
WORKDIR /var/www/ragate.co.jp
COPY ./ /var/www/ragate.co.jp
RUN npm run build

EXPOSE 3000

ENTRYPOINT ["npm", "run", "start"]

・ buildspec.yml
printfの 『コンテナの名前』は、『プロジェクト名-container』としたものを入れてください。
(ECS→タスク定義→該当するプロジェクトを選択→コンテナの定義→コンテナ名から確認できます。)

環境変数で取り込めるようにしたかったんだけど、yamlの変数の書き方がよくわからなくて挫折\(^o^)/

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 12
  pre_build:
    commands:
      - yarn
      - echo Logging in to Amazon ECR
      - aws ecr get-login-password --region $AWS_DEFAULT_REGION | docker login --username AWS --password-stdin $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com
  build:
    commands:
      - yarn build
      - echo Build started on `date`
      - echo Building the Docker image...
      - docker build -t $IMAGE_REPO_NAME:$IMAGE_TAG .
      - docker tag $IMAGE_REPO_NAME:$IMAGE_TAG $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG
  post_build:
    commands:
      - echo Pushing the Docker image...
      - docker push $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG
      - printf '[{"name":"コンテナの名前","imageUri":"%s"}]' $AWS_ACCOUNT_ID.dkr.ecr.$AWS_DEFAULT_REGION.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG > imagedefinitions.json
    finally:
      - echo Build completed on `date`
artifacts:
  files: imagedefinitions.json