React環境構築からAWS ECS(Fargate)へのデプロイまでの手順【WSL2 Docker】

AWS

Docker上でのReact環境構築から、AWSのECS（Fargate）へのデプロイまでの手順を記載していきます。

目的とゴール

  • Docker上で動くアプリをAWSのECS Fargateへデプロイするまでの流れをざっくり理解できること

環境

以下の環境で実施していきます。

  • Windows11
  • WSL2 Ubuntu

注意点

以下ハンズオンを実施しますと、AWSの料金が多少ですが発生します。実施する際は必ず削除までの実施をお願いいたします。

AWSリソース名料金(1時間稼働)[ドル]料金(1日稼働)[ドル]
ECS Fargate（1vCPU, メモリ3GB）0.067151.6116
ECR(約600MB、1回送信)0.070.07
VPC, Subnet、SG、IAM(User, role)0.00.0
合計0.137151.6816

事前準備

以下は、事前に準備ください。

  • VSCodeのインストール
  • AWSアカウント作成

大まかな流れ

WSL上でReactアプリを作成

WindowsPC上にWSL2でUbuntuを起動させ、Reactプロジェクトの作成と簡単なWebアプリ構築をします。作成したアプリをDockerコンテナ上で起動させ、ローカルPC上で正常に動くことを確認します。

DockerイメージをAWS ECRへPUSH

Dockerコンテナ上で正常にアプリ起動していることが確認出来たら、AWS CLIを使って、ECRへDockerイメージをPUSHします。

ECS（Fargate）を起動させ動作確認

最後に、AWS上でVPCやECSなどを構築し、イメージPUSHしたECRからサービス起動させて、動作確認を行います。

WSL上でReactアプリを作成

WSLセットアップ

Windows機能の有効化

Windows設定 ＞ システム ＞ オプション機能 ＞ Windowsのその他の機能 にて、”Linux用Windowsサブシステム” と “仮想マシンプラットフォーム” にチェックを入れOKボタンを押下します。

変更が完了したら、”今すぐ再起動” ボタンを押下し、PCを再起動させます。

開発者モードの有効化

Windows設定 ＞ システム ＞ 開発者向け ＞ 開発者向けモード をONにします。

以下、確認メッセージが出てきますので、”はい” を選択します。

Ubuntuのインストール

Microsoft Store ＞ “Ubuntu”検索 にて、以下のUbuntuの “無料” ボタンを押下します。

“入手” ボタンを押下し、Ubuntuをインストールします。

そのまま、”開く” ボタンを押下し、Ubuntuを起動させます。
以下の設定をします。

  • Enter new UNIX username: 任意のユーザ名を入力します
  • New password: パスワード設定します　※入力しても表示されません。
  • Retype new password: 確認用パスワード　※入力しても表示されません。

node.jsのインストール

以下コマンド実行し、node.jsをインストールします。yarnもインストールされることを確認します。

curl -fsSL https://deb.nodesource.com/setup_lts.x -o nodesource_setup.sh
sudo -E bash nodesource_setup.sh
sudo apt-get install -y nodejs
npm install -g yarn
node -v
yarn -v

正常にインストールできたら、以下の通りnodejsとyarnのバージョンが表示されます。

【WSL】Reactアプリ作成

Reactプロジェクト作成

作業ディレクトリ上で、Reactプロジェクトを作成し、VSCode上でディレクトリ構成を確認します。

mkdir react-work
cd react-work
npx create-react-app react-app --template typescript
code .

以下のディレクトリ構成になっていれば、OKです。

React起動

以下コマンド実行し、Reactを起動してみます。

yarn start

ブラウザでhttp://localhost:3000へアクセスし、以下の画面が表示されることを確認します。

Ctrl + Cでサーバ停止させておきます。

App.tsxを修正

カウントアップする簡単なアプリを生成します。
以下のコマンドを実行します。（UIをいい感じの見栄えにできるパッケージです）

yarn add @mui/material @emotion/react @emotion/styled

react-app/src/App.tsxを以下の通りに修正ましす。

import * as React from "react";
import { Button, Box } from "@mui/material"

function App() {
  let [ count, setCount ] = React.useState(0);

  return (
    <div>
      <Box sx={{padding: 2 }}>
        <Box sx={{padding: 2 }}>
          <h1>{ count }</h1>
        </Box>
        <Box sx={{padding: 2 }}>
          <Button variant="contained" onClick={ ()=>{
            setCount(count + 1)
          }}>Count UP!</Button>
        </Box>
        <Box sx={{padding: 2 }}>
          <Button variant="contained" onClick={ ()=>{
            setCount(0)
          }}>Clear</Button>
        </Box>
      </Box>
    </div>
  );
}

export default App;

再度、React起動させます。

yarn start

再度、ブラウザでhttp://localhost:3000へアクセスし、以下の画面が表示されることを確認します。
“COUNT UP!”ボタンを押下すると、カウントアップされ、”CLEAR” ボタンを押下すると、カウントが0になる簡単なアプリです。

Docker Composeのインストール

以下コマンドを実行し、DockerとDocker Composeをインストールします。

sudo apt install docker.io
sudo apt install docker-compose
docker -v
docker-compose -v

正常にインストールできたら、以下の通りDockerとDocker Composeのバージョンが表示されます。

Dockerコンテナ上でアプリ起動

Dockerfileとdocker-compose.ymlを作成します。

Dockerfile

FROM --platform=linux/amd64 node:lts

COPY . ./var/www

WORKDIR /var/www

RUN yarn add @mui/material @emotion/react @emotion/styled && yarn install && yarn build

ENV PORT 3000

CMD ["yarn", "start"]

docker-compose.yml

services:
  app:
    build: .
    container_name: react-app
    tty: true
    ports:
      - 3000:3000
    volumes:
      - ./:/react-app
    networks:
      - default
    command: sh -c "yarn start"

Dockerを起動させます。

sudo docker-compose up --build -d

ブラウザ上でlocalhost:3000へアクセスし、以下の画面が表示されることを確認します。

DockerイメージをAWS ECRへPUSH

【AWSコンソール】ECRの作成

AWSコンソール > ECS > ECR > リポジトリの作成ボタンを押下します。

リポジトリ名を “try-ecr” とし、作成ボタンを押下します。

【AWSコンソール】IAMUserの作成

CLI操作用のIAMUserを作成します。勉強用なのでいったんAdmin権限を付与します。

AWSコンソール > IAM > ユーザー > ユーザーの作成ボタンを押下します。

任意の名前を設定し、次へボタンを押下します。

ポリシーを直接アタッチするを選択し、AdministratorAccessにチェックを入れ、次へボタンを押下します。

ユーザーの作成ボタンを押下します。

ユーザーが作成できたら、ユーザーを表示ボタンを押下します。

セキュリティ認証情報タブを選択し、アクセスキーを作成ボタンを押下します。

コマンドラインインターフェイス（CLI）を選択し、下部のチェックボックスにチェックを入れ、次へボタンを押下します。

アクセスキーを作成ボタンを押下します。

アクセスキーとシークレットアクセスキーをコピーしメモしておきます。または、.csvファイルをダウンロードボタンを押下でも大丈夫です。

※アクセスキーとシークレットアクセスキーが漏洩すると大変ですので、厳重に保管をお願いします。不要でしたら、当ハンズオン終了後にIAMユーザーの削除をお願いします。

【WSL】ECRへイメージPush

wslでaws cliをインストールします。

sudo snap install aws-cli --classic
aws --version

aws cliを利用するために、クレデンシャル情報を設定していきます。

aws configure
  • AWS Access Key ID：IAMUser作成時のアクセスキー
  • AWS Secret Access Key：IAMUser作成時のシークレットアクセスキー
  • Default region name：ap-northeast-1（東京リージョン）
  • Default output format：json

以下、CLIを実行し作成したECRを確認します。

aws ecr describe-repositories

AWSコンソールのECR画面にて、プッシュコマンド表示ボタンを押下します。

以下の１～４のコマンドをWSL上で順番に実行していきます。

コマンド１

コマンド２

コマンド３

コマンド４

コマンド１～４まで実行したら、AWSコンソール上のECRを確認し、正常にイメージがプッシュされていることを確認します。

また、イメージタグ “latest” をクリックし、以下画面のURIをメモしておきます。この後の、タスク定義作成で利用します。

ECS（Fargate）を起動させ動作確認

【AWSコンソール】VPCとSubnetの作成

VPCとSubnetを作成します。今回はPubulicSubnet上にECS Fargateを作成します。

東京リージョンを選択します。

AWSコンソール > VPC > VPCを作成ボタンを押下します。

以下を変更し、VPCを作成します。※他設定項目はデフォルトのまま

  • 名前タグ：try
  • アベイラビリティゾーンの数：1
  • VPCエンドポイント：なし

【AWSコンソール】ECSの作成

AWSコンソール > ECS > クラスター > クラスターの作成ボタンを押下します。

クラスター名を “try-cluster” として、AWS Fargateを選択した状態で作成ボタンを押下します。

【AWSコンソール】タスク定義の作成

AWSコンソール > ECS > タスク定義 > 新しいタスク定義の作成ボタンを押下します。

以下の通り設定しタスク定義を作成します。※その他設定はデフォルトのまま

  • タスク定義ファミリー：try-taskdef
  • コンテナ名：try-container
  • イメージURI：作成したECRのイメージURI
  • コンテナポート：3000
  • ポート名：3000

【AWSコンソール】サービス起動

AWSコンソール > ECS > クラスター > 作成したクラスターを選択します。

サービスの作成ボタンを押下します。

以下の通り設定しサービス起動します。※その他設定はデフォルトのまま

  • ファミリー：try-taskdef リビジョン１
  • サービス名：try-service
  • VPC：try-vpc
  • サブネット:try-subnet-public1-ap-northeast-1a
  • セキュリティグループ：新しいセキュリティグループの作成
  • セキュリティグループ名：try-sg
  • セキュリティグループの説明：try-sg
  • ポート範囲：3000
  • ソース：Anywhere

サービスのステータスが “アクティブ” になれば完了です。

【ブラウザ】動作確認

AWSコンソール > ECS > クラスター > try-cluster > タスクを選択します。

パブリックIPを確認します。

ブラウザで、http://${パブリックIP}:3000にアクセスします。以下のカウントアップ画面が表示されれば完了です。

【AWSコンソール】後片付け

AWS ECSクラスターの削除

AWSコンソール > ECS > クラスター > try-clusterを選択し、クラスターの削除ボタンを押下します。

AWS ECRの削除

AWSコンソール > ECS > ECR > Repositories > try-ecrにチェックを入れ、削除ボタンを押下します。

AWS タスク定義の削除

AWSコンソール > ECS > タスク定義 > try-taskdef > try-def:1にチェックを入れ、登録解除を押下します。

AWS VPCの削除

AWSコンソール > VPC > お使いのVPC > try-vpcにチェックを入れ、アクションからVPCの削除を選択します。

確認画面で、”削除”を入力し、削除ボタンを押下します。

AWS IAMUserの削除

AWSコンソール > IAM > ユーザー > test-userにチェックを入れ、削除を選択します。

おわりに

だらだらを手順を書きましたが、ECRへのイメージプッシュからECS Fargateへのデプロイまでの流れはなんとなくつかめたと思います。今後は、Gitへプルリクしたら自動でアプリデプロイするパイプライン構築や、インフラのIaC化なども書いていこうと思います。

コメント

タイトルとURLをコピーしました