create-next-appで作成したプロジェクトをECS on Fargateで立ち上げる

# 初めに
今回は`create-next-app`で作成したプロジェクトをECS on Fargateで立ち上げて、ブラウザからアクセスすることを目標にします。

以下のような流れで進めていきます。
1. Next.jsのプロジェクトを作成する。
2. ソースコードを含めたdocer imageを作成してECRにアップする
3. 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公式](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)と記載している内容は一緒です。
パッケージをインストールした後にbuildして、`npm start`コマンドを叩いています。


```Dockerfile
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`の箇所を以下のように変更します。
```json
"start": "next start -p 80",
```

80番ポートを指定しました。

`next.config.js`に以下の記載を行います。
`swcMinify`に関しては[こちら](https://nextjs.org/docs/advanced-features/compiler#minification)をご参照ください。
```next.config.js
swcMinify: false
```

# ECRに登録する
次に今回作成したDockerfileからimageを作成してECRに登録します。
「Amazon Elastic Container Registry」ページに遷移してプライベートリポジトリの登録を行います。
※諸事情により、私が作成しているリポジトリのURLは隠しています。

![スクリーンショット 2022-09-02 16.13.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/95d120d3-3757-e44d-fa65-5e5f777e16c9.png)

任意のリポジトリ名を入力して右下にある「リポジトリの作成」ボタンをクリックします。
![スクリーンショット 2022-09-02 16.18.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/b3b0fe0b-5603-b600-1b63-1a485945b9c6.png)

登録を終えると画面上部に登録が成功された旨のメッセージが記載されています。
次に作成したリポジトリのリポジトリ名のリンクをクリックします。
![スクリーンショット 2022-09-02 16.20.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/215adbe0-acc1-1ed3-b032-bb2af460db8e.png)

次にプッシュコマンドの表示ボタンをクリックします。
![スクリーンショット 2022-09-02 16.22.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/15315238-db29-4a1d-d052-779e46a7482b.png)

コマンドが表示されたら記載されている通りに実行してください。
お使いのPCによってコマンドは異なります。
また、dokcerが起動していないとエラーになるので注意してください。

# クラスターの作成
ECS画面に遷移してクラスターの作成を行います。
今回は「ネットワーキングのみ」を選択します。
![スクリーンショット 2022-09-02 16.46.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/97784e15-c2f5-09bb-746f-6f529bdd605f.png)

任意のクラスター名を入力して「作成」ボタンをクリックします。

# タスクの定義
クラスターの作成が終了したらタスクの定義を行います。
左サイドバーでタスクの定義をクリックして「新しいタスク定義の作成」ボタンをクリックします。
![スクリーンショット 2022-09-02 16.50.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/2b15bddd-b2d0-3c69-c0a3-e5dc3b378520.png)

起動タイプでFargateを選択して「次のステップへ」をクリックします。
![スクリーンショット 2022-09-02 16.52.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/c914960e-5647-b7fd-9ca6-532ae0d22f3b.png)
任意のタスク定義名とロール・タスクサイズを選択します。
オペレーティングシステムファミリーは「Linux」を選択します。

その後、コンテナの追加ボタンをクリックします。

コンテナ追加画面に遷移したら任意のコンテナ名とメモリ制限を入力します。

イメージ項目には先ほど登録したecrのImageのURLを記載します。
また、ポート番号は最初に設定した80番に設定します。

コンテナ情報の記載が終了したら「追加ボタン」をクリックします。
![スクリーンショット 2022-09-02 16.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/b6dc8b70-6085-fa4d-6b97-bfec3e6eba48.png)

# サービスの作成
次にサービスの作成を行います。
先ほど作成したクラスターの画面から「サービス」タグをクリックして「作成」ボタンをクリックします。

![スクリーンショット 2022-09-02 17.05.43 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/27ee5141-d627-3581-cb02-4fdff8a19f08.png)

クラスターは先ほど作成したクラスターを選択します。
![スクリーンショット 2022-09-02 17.07.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/bb29b8dd-d073-c9c3-42b7-0589eea9af1b.png)

次にVPCはデフォルトのものを使用してサービスを作成します。

# 確認
サービスが作成されたらタスクが実行されます。
最後に作成されたタスクのパブリックIPをブラウザで入力するとアクセス可能であることを確認できます。
![スクリーンショット 2022-09-02 17.13.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/952574/f72a8cf4-3719-4f7d-26dd-d23dbf8b7a29.png)