🙌

CloudFront・ALB・ECS・Fargate・NginxでWebサイト作成①

2025/01/18に公開

はじめに

ECS、Fargateの勉強として、マネジメントコンソールから標記の構築をしていきます。
構成図は以下です。

VPC,サブネット,インターネットゲートウェイ,NATゲートウェイ,ルートテーブルの作成

VPC,サブネット,インターネットゲートウェイは構成図をもとに作成。

インターネットゲートウェイを作成

  • 作成した後VPCにアタッチすることを忘れずに

NATゲートウェイを作成

  • ElasticIPアドレス割り当て

ルートテーブルの作成

  • 作成したインターネットゲートウェイをデフォルトゲートウェイ0.0.0.0/0で作成
  • バブリックサブネットに関連付け
  • 作成したNATゲートウェイをデフォルトゲートウェイ0.0.0.0/0で作成
  • プライベートサブネットに関連付け

セキュリティグループの作成

ALB用

  • ingress : 80 : ALL
  • egress : ALL : ALL

ECS用

  • ingress : 80 : albのセキュリティグループ
  • egress : ALL : ALL

ECRにdocker-imageをプッシュする

ECRにリポジトリの作成

  • ECRにリポジトリを作成
    • 今回はecs-study-nginx

Docker-image作成

  • 今回は以下の2つのファイルを使用します
./DockerDockerfile
FROM nginx:latest
COPY index.html /usr/share/nginx/html
EXPOSE 80
./Docker/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECSの勉強</title>
</head>
<body>
    成功!
</body>
</html>
  • 上記イメージをbuildする
$ cd Docker
$ docker build -t ecs-study-nginx .
  • 確認
$ docker image ls ecs-study-nginx

ECRにプッシュする

  • ECRにログイン
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin AWSアカウントID.dkr.ecr.ap-northeast-1.amazonaws.com
  • イメージにタグ付け
$ docker tag 40ae10f02a0d AWSアカウントID.dkr.ecr.ap-northeast-1.amazonaws.com/ecs-study-nginx:1.0
  • ECRにプッシュ
docker push AWSアカウントID.dkr.ecr.ap-northeast-1.amazonaws.com/ecs-study-nginx:1.0
  • ECRに入り、イメージがプッシュされているか確認

ALBの作成

  • セキュリティグループには先ほど作成したALB用セキュリティグループを指定
  • ターゲットグループの作成
    • ターゲットタイプをIPアドレスに設定
    • IP を指定してポートを定義するはECSで設定するので、一旦削除
      Fargateを使用する場合、ターゲットタイプはIPアドレスを選択する必要があります。

ECSの作成

クラスターの作成

  • リージョン内で一意の必要あり。

タスク定義

  • 起動タイプ
    • AWS Fargate
  • オペレーティングシステム/アーキテクチャ
    • Linux/X86_64
  • CPU
    • .25 vCPU
  • メモリ
    • .5 GB
  • コンテナを1つ作成
    • イメージ URIはECRで作成したイメージのURI
    • ポートマッピングは80

サービスの作成

クラスターの管理画面から作成。

  • コンピューティングオプション
    • 起動タイプ
  • アプリケーションタイプ
    • サービス
  • 必要なタスク
    • 1
  • ネットワーキング
    • 作成したVPC、ALBを指定

サービスの作成時のエラー

サービス作成時に、エラーがでてしまいタスクが完了できませんでした。
こちらの記事を参考にエラーを解消しました。
<原因>
docker-imageの作成時のローカルマシンのアーキテクチャとECSのアーキテクチャが異なること。
今回M1Macで作成した為、ARM64のアーキテクチャになっていました。それに対し、ECSのアーキテクチャはX86_64(AMD64)を設定してしまった為エラーになってしまいました。
<対策①>
docker-image作成時にX86_64(AMD64)となるよう--platform linux/amd64を付けてビルドします。
<対策②>
タスク定義でのアーキテクチャ設定をLinux/ARM64にする。

②はコンソールの設定だけで済むので、今回は勉強も兼ねてイメージの再ビルドをしていきます。

# AMD64で再ビルド
$ docker build -t ecs-study-nginx . --platform linux/amd64
# ログイン
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin AWSアカウントID.dkr.ecr.ap-northeast-1.amazonaws.com
# タグ付け
docker tag タグ名 <your-account-id>.dkr.ecr.ap-northeast-1.amazonaws.com/タグ名
# 再プッシュ
docker push AWSアカウントID.dkr.ecr.ap-northeast-1.amazonaws.com/タグ名

https://zenn.dev/shimiyu/articles/3b6cacf157112f#サービス作成時のエラー対応

起動中のタスクを停止

起動し続けていると課金されるので、停止しておきます。

  • クラスタのサービスタブを開く
  • 停止したいサービスにチェックを入れて、更新ボタンを押す
  • 必要なタスクを0にする
  • 更新ボタンを押す

Webページの確認

ALBのDNS名を検索し、ページが表示されたら一旦成功!

CloudFrontの設定

ディストリビューションの作成

  • Origin domainをALBに設定
  • プロトコルをHTTPのみ

数分後ディストリビューションドメインを叩いてWebページを確認できればCloudFront(HTTP)成功!

次回はACM証明書を発行し、HTTPSでアクセスできるようにしていきます。

Discussion