3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ラクスパートナーズAdvent Calendar 2023

Day 18

AWS ECS FargateでHello Reactしてみた

Last updated at Posted at 2023-12-17

この記事は ラクスパートナーズAdvent Calendar 2023の18日目の記事になります。

Dockerでアプリ開発をしていたところ、どうせならデプロイまでやってしまおうと思い立ち、AWS ECS Fargateを使用してデプロイを行ったので手順を備忘録として残します。

今回はcreate-react-appしたプロジェクトとDockerのcomposeファイルは用意したので、ローカルで起動確認した後にAWSにデプロイする手順を辿りたいと思います。

前提

準備

今回使用するプロジェクトは事前に準備したので、任意の場所にクローンしてください。

git clone https://github.com/yuta-satoh/practice-app.git

クローンしたプロジェクトに移動します。

cd ~/tmp/practice-app (クローンしたファイルへのパス)

下記のコマンドを実行してコンテナを立ち上げます。

docker compose up

このコマンドでコンテナイメージの作成とコンテナの立ち上げを行います。

1.png

しばらくしてこのような表示がされたら、
http://localhost:3000
にアクセスします。

2.png
この画面が表示されればOKです。

Ctrl+Cでプロセスを終了してから、下記コマンドで一旦コンテナイメージごと削除します。

docker compose down --rmi all --volumes --remove-orphans

コンテナの起動が確認できたのでAWSの環境を準備していきます。

VPC作成

VPCとは?

Amazon Virtual Private Cloud (Amazon VPC) を使用すると、論理的に隔離されている定義済みの仮想ネットワーク内で AWS リソースを起動できます。
仮想ネットワークは、お客様自身のデータセンターで運用されていた従来のネットワークによく似ていますが、AWS のスケーラブルなインフラストラクチャを使用できるというメリットがあります。
AWS VPCドキュメント

AWSコンソールにアクセスして、VPCのサービス画面を開きます。
今回は東京リージョンを使用しています。

3.png

次にVPCダッシュボードのお使いのVPCを押下すると、作成済みのVPCリストが表示されます。
今回は新しく作成するので右上のVPCを作成を押下します。

4.png

VPCの作成方法として、サブネットやルートテーブルの作成などを手動で行うこともできますが、今回は本題ではないので自動で作成してしまいます。
VPCの作成画面でVPCなどを選択します。
するとサブネットの構成やルートテーブルなどの作成を自動で行うことができます。
名称はpractice-appとしておきます。

5.png

AZの数などの設定をすることができますが、今回は全てデフォルトのままでいきます。
下までスクロールしてVPCを作成を押下するとVPCの作成が行われます。

6.png

完了後に再度お使いのVPCを開きます。
すると先ほど作成したpractice-appが追加されています。
VPCの準備は完了です。

7.png

ECSクラスター作成

次にECSクラスターを作成します。
クラスターとはコンテナ化されたアプリケーションをデプロイ・管理するための環境です。
Amazon Elastic Container Serviceのサービス画面を開きます。

8.png

ダッシュボードのクラスターを押下すると作成済みのクラスターの一覧が表示されます。
右上のクラスターの作成を押下して新しいクラスターを作成します。

9.png

クラスター名はpractice-app-clusterとします。
インフラストラクチャはAWS Fargate(サーバーレス) を選択します。
下までスクロールして作成を押下します。

10.png

作成が完了するとクラスターの一覧にpractice-app-clusterが追加されます。
これでクラスターの作成は完了です。

11.png

ECRにDockerイメージをプッシュ

クラスターにコンテナアプリをデプロイする場合、
DockerイメージをECR(Amazon Elastic Container Registry) にプッシュする必要があります。
ECSダッシュボードのAmazon ECRを押下するとECRのサービス画面が開きます。

12.png

ECRサービス画面の使用方法を押下します。

13.png

可視性設定はプライベート、リポジトリ名はpractice-app-imageとします。
入力したら下までスクロールしてリポジトリを作成を押下します。

14.png

作成が完了するとpractice-app-imageがリポジトリ一覧に表示されます。

15.png

practice-app-imageを押下し、リポジトリの詳細画面を開きます。
現在はイメージがありませんのでプッシュしていきます。
プッシュコマンドの表示を押下します。

16.png

プッシュコマンドの一覧が表示されるので上から順番に指示に従って、ローカルのCLIで実行していきます。

17.png

クローンしたプロジェクトに移動します。

cd ~/tmp/practice-app (クローンしたファイルへのパス)

今回はpractice-app内のreact-appのDockerイメージを作成するのでreact-appに移動します。

cd react-app
  1. AWS CLIを使用してDockerクライアントの認証を行います。
    認証に完了するとLogin Succeeded と表示されます。
      

  2. Dockerイメージの作成を行います。
    イメージの作成完了後、以下のコマンドを入力します。

    docker images
    
    REPOSITORY           TAG       IMAGE ID       CREATED      SIZE
    practice-app-image   latest    5e05f73c8c3d   4 days ago   1.59GB
    

    このような表示が出ればイメージの作成が完了です。
      

  3. 次にイメージをECRリポジトリにプッシュするためにタグ付けをします。
    タグ付けの作成完了後、以下のコマンドを入力します。

    docker images
    
    REPOSITORY      TAG       IMAGE ID       CREATED      SIZE
    xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/practice-app-image   latest    5e05f73c8c3d   4 days ago   1.59GB
    practice-app-image                                                     latest    5e05f73c8c3d   4 days ago   1.59GB
    

    新たにイメージが作成されていることがわかります。
      

  4. 次に作成したイメージをECRリポジトリにプッシュします。
      

完了後、プッシュコマンを閉じて更新ボタンを押下するとプッシュしたイメージが表示されます。

18.png

latestを押下して詳細を見ることができます。
URIは次のステップのECSタスク定義で使用します。

24.png

ECSタスク定義

ECSタスクの定義を行います。
ECSタスクはECSクラスター内でコンテナを実行するための単位です。
ECSサービス画面を開き、タスク定義を押下します。
新しいタスク定義の作成を押下し、新しいタスク定義の作成を押下します。

19.png

タスク定義ファミリーはpractice-app-taskとします。
起動タイプはAWS Fargateを選択します。

20.png

タスクサイズは最小でいいので、CPUは0.25vCPU、メモリは0.5GBを選択します。

21.png

次にコンテナの設定を行います。
名前はreact-appとします。
イメージURIはECRにプッシュしたイメージのURIをコピペします。
コンテナポートは3000番を指定します。
入力後、下までスクロールして作成を押下します。

23.png

正常に作成されたタスク定義の表示がされればタスク定義完了です。

25.png

タスクの実行

タスクの定義ができたので、タスクの実行をしていきます。
ECSのサービス画面からクラスターを押下し、クラスターの一覧を表示します。
practice-app-clusterを押下し、クラスター詳細を開きます。

26.png

クラスター詳細のサービスタブを選択し、作成を押下します。

27.png

コンピューティング設定で起動タイプを選択し、FARGATEを選択します。

28.png

タスク定義のファミリーをpractice-app-taskを選択します。
リビジョンはタスクのバージョンを示します。
Dockerイメージの更新等でタスクを更新すると、2、3、4...といった形で増えていきます。
サービス名はpractice-app-serviceとします。

29.png

次にネットワーキングの設定を行います。
VPCは先ほど作成したpractice-app-vpcを選択します。
サブネットはprivate以外を選択してください。

30.png

続いてセキュリティグループの設定をします。
新しいセキュリティグループの作成を選択します。
セキュリティグループ名はpractice-app-sgとし、説明にも同様に入力します。
インバウンドルールとしてタイプはカスタムTCP、ポートは3000番を開放します。
この3000番は、タスク設定の際にコンテナのポートとして3000番を指定したためです。
ソースはAnywhereを選択します。全ての外部アクセスを許可します。
ここまで入力が終了したら、下までスクロールして作成を押下します。

31.png

サービスの作成には少し時間がかかります。
クラスターの詳細でサービスタブを開いて更新を押下し、ステータスがアクティブになったらサービス名を押下してサービス詳細を開きます。

33.png

サービス詳細のタスクタブを開くと実行中のタスクが表示されます。
前回のステータスが実行中になっていることを確認してタスク名を押下します。

34.png

タスク詳細のネットワーキングタブを押下します。
パブリックIPをコピーして、
http://{パブリックIP}:3000
にアクセスします。

35.png

http://{パブリックIP}:3000にアクセスしてこの画面が表示されたら成功です。

36.png

片付け

このままサービスを起動し続けているとコストがかかってしまいますので、きちんと削除しておきましょう。
タスク詳細画面で停止を押下し、タスクを停止します。

37.png

クラスター詳細画面に戻り、サービス名をチェックして更新を押下します。

38.png

デプロイ設定の必要なタスクを0にして下部にある更新を押下します。

39.png

サービス名をチェックしてサービスを削除を押下します。
必要事項を入力して削除完了です。

40.png

ECRは無料枠がありますが、削除する場合はリポジトリの一覧から削除することができます。
VPCは今回の設定ではコストがかからないので放置でも大丈夫です。

まとめ

VPCの作成からAWS Fargateを使用したデプロイまでの手順をまとめました。
今回は最低限の環境でのデプロイでしたが、実際にはデータベースとの連携やロードバランシングの設定も必要なので、いつかそちらもまとめたいと思っています。

おまけ AWS SAA受験してみた

勉強期間
約1ヶ月半

教材

結果...無事合格!
問題集の周回も効果的だったが、一番効果的なのは実際にサービスを触ってみること。
次の目標はSOA。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?