初めに
今回はcreate-next-appで作成したプロジェクトをECS on Fargateで立ち上げて、ブラウザからアクセスすることを目標にします。
以下のような流れで進めていきます。
- Next.jsのプロジェクトを作成する。
- ソースコードを含めたdocer imageを作成してECRにアップする
- ECSのクラスター・タスク定義を作成する
今回は練習のためcreate-next-appで作成したままのコードをそのままアップします。
また、言語はTypeScriptを選択しています。
Next.jsのプロジェクトを作成する。
以下のコマンドでプロジェクトを作成します。
プロジェクト名は任意ですが今回はnext-ecsという名称にします。
npx create-next-app@latest --ts next-ecs
cd next-ecs
プロジェクトを作成して作成したフォルダに移動しました。
次にDockerfileを作成します。
touch Dockerfile
Dockerfileの内容は以下です。
基本的にはNode.js公式と記載している内容は一緒です。
パッケージをインストールした後にbuildして、npm startコマンドを叩いています。
FROM node:16
# アプリケーションディレクトリを作成する
WORKDIR /usr/src/app
COPY package*.json ./
# アプリケーションのソースをバンドルする
COPY . .
RUN npm install
RUN npm run build
ENV NODE_ENV production
CMD [ "npm", "start" ]
デフォルトだと3000番ポートを使用しますが、今回は80番ポートを使用したいのでpackage.jsonを変更します。
npm startの箇所を以下のように変更します。
"start": "next start -p 80",
80番ポートを指定しました。
next.config.jsに以下の記載を行います。
swcMinifyに関してはこちらをご参照ください。
swcMinify: false
ECRに登録する
次に今回作成したDockerfileからimageを作成してECRに登録します。
「Amazon Elastic Container Registry」ページに遷移してプライベートリポジトリの登録を行います。
※諸事情により、私が作成しているリポジトリのURLは隠しています。
任意のリポジトリ名を入力して右下にある「リポジトリの作成」ボタンをクリックします。
登録を終えると画面上部に登録が成功された旨のメッセージが記載されています。
次に作成したリポジトリのリポジトリ名のリンクをクリックします。
次にプッシュコマンドの表示ボタンをクリックします。
コマンドが表示されたら記載されている通りに実行してください。
お使いのPCによってコマンドは異なります。
また、dokcerが起動していないとエラーになるので注意してください。
クラスターの作成
ECS画面に遷移してクラスターの作成を行います。
今回は「ネットワーキングのみ」を選択します。
任意のクラスター名を入力して「作成」ボタンをクリックします。
タスクの定義
クラスターの作成が終了したらタスクの定義を行います。
左サイドバーでタスクの定義をクリックして「新しいタスク定義の作成」ボタンをクリックします。
起動タイプでFargateを選択して「次のステップへ」をクリックします。
任意のタスク定義名とロール・タスクサイズを選択します。
オペレーティングシステムファミリーは「Linux」を選択します。
その後、コンテナの追加ボタンをクリックします。
コンテナ追加画面に遷移したら任意のコンテナ名とメモリ制限を入力します。
イメージ項目には先ほど登録したecrのImageのURLを記載します。
また、ポート番号は最初に設定した80番に設定します。
コンテナ情報の記載が終了したら「追加ボタン」をクリックします。
サービスの作成
次にサービスの作成を行います。
先ほど作成したクラスターの画面から「サービス」タグをクリックして「作成」ボタンをクリックします。
クラスターは先ほど作成したクラスターを選択します。
次にVPCはデフォルトのものを使用してサービスを作成します。
確認
サービスが作成されたらタスクが実行されます。
最後に作成されたタスクのパブリックIPをブラウザで入力するとアクセス可能であることを確認できます。
