【ハンズオン／初学者でも簡単！】Nuxt.jsをFargateでデプロイを行う

## はじめに
以前こちらのアプリを作成しました。

https://qiita.com/Ryo9597/items/8e34de4eb0af5a9d0cf3

**「デプロイを何でしようかな〜」**と思いました。

選択肢は2つです。
**①EC2でデプロイ**
**②Fargateでデプロイ**

今回は②のFargateを採用しました。

EC2でも良かったのですが以下の理由から却下しました。
**①継続的にソフトウェアのバージョンが形骸化しないようにアップデート、パッチを当てる必要がある。**
**②多少コストは上がるが、サーバーレスにする方が開発効率向上に繋がる。**

ということで、Fargateを使っていきましょう！

## アーキテクチャ

![arch1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/05e690da-9795-d03e-87a7-8c037005ca11.png)


## 前提
以下のインストールと作業が済んでいることが前提です。

・Node.js
・npm
・AWS CLI
・AWS AdministratorAccess権限を持ったユーザー作成

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/getting-started_create-admin-group.html

それでは、始めていきます！

## ハンズオン
### 1. AWSへログイン

### 2. 東京リージョンになっていることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/69dd7bf8-f9e5-8da1-4ca7-8e2f25fc0c41.png)

### 3. VPCの作成

■ルート
コンソールで「VPC」と検索→左ペイン内の「VPC」を選択→「VPCを作成」を選択

![スクリーンショット 2021-09-29 12.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/026fd83b-1058-6893-42c5-80d17da3fabd.png)

### 4. サブネットを作成

■ルート
コンソールで「VPC」と検索→左ペイン内の「サブネット」を選択→「サブネットを作成」を選択

![スクリーンショット 2021-09-29 12.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/c9c4511c-c5a0-7416-46de-67b099524759.png)

### 5. Publicサブネットをインターネットに接続するためにInternet Gatewayを作成しアタッチ

■ルート
コンソールで「VPC」と検索→左ペイン内の「インターネットゲートウェイ」を選択→「インターネットゲートウェイの作成」を選択

![スクリーンショット 2021-09-29 12.45.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/4115fea7-f0d3-0c54-b844-d2e9b9270775.png)

**「VPCへアタッチ」**をクリックする。

![スクリーンショット 2021-09-29 12.46.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/f3014b22-29f8-cd27-14da-9415c74acce5.png)

作成したVPCにアタッチします。

![スクリーンショット 2021-09-29 12.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/1c7d5941-4065-c6bd-48b5-cd2e2b6b8fba.png)

### 6. EC2がインターネット接続するためにルートテーブルを作成

■ルート
コンソールで「VPC」と検索→左ペイン内の「サブネット」を選択→「Tutorial-Nuxtjs-Pub-1a-001」を選択→「ルートテーブル」を選択→「ルート」へ移動→「ルートを編集」を選択

![スクリーンショット 2021-09-29 12.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/341b8ddb-b097-2f8a-3be2-b1c8759ec267.png)

### 7. Nuxt.jsの準備

Nuxt.jsのアプリケーションを作成します。

```terminal:ターミナル
❯ npx create-nuxt-app .       

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in .
? Project name: src
? Programming language: JavaScript
? Package manager: Npm
? UI framework: (Use arrow keys)
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? ryo
? Version control system: Git
```

### 8. Dockerfileの作成
docker-composeを使ってもいいですが、今回はECRのコマンドに従ってできるDockerfileで作成していきます。

```Dockerfile:./Dockerfile
# Nodeイメージの取得
FROM node:14.15.3-alpine

# ワーキングディレクトリの指定
WORKDIR /app

# package.json, package-lock.jsonをコピー
COPY package*.json ./

# モジュールをインストール
RUN npm install

# その他のファイルをコピー
COPY . .

# ビルド
RUN npm run build

# ホスト
ENV HOST 0.0.0.0

# ポート
EXPOSE 3000

# 起動
CMD ["npm", "run", "start"]
```

### 9. ECRにDockerのイメージをプッシュ

■ルート
コンソールで「ECS」と検索→左ペイン内の「Amazon ECRのリポジトリ」を選択

#### リポジトリの作成

■ルート
「リポジトリの作成」を選択

![スクリーンショット 2021-09-29 13.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/3c082f27-01d0-d82e-a0f1-33af756146ff.png)

これでリポジトリが作成できました。
この中に入りましょう。

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

次に、「プッシュコマンドの表示」を選択します。

![スクリーンショット 2021-09-29 13.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/94edc0c3-8449-3de8-2d2d-1faa0d4d88bc.png)

プッシュするために必要な4つのコマンドが表示されるので、
こちらをターミナルで実行しましょう！

![スクリーンショット 2021-09-29 13.08.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/b4521cc0-24a3-3085-bb11-6b07406cf26a.png)

実行した結果イメージが入っていれば成功です。

![スクリーンショット 2021-09-29 13.27.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/9ff809c7-785e-36b3-ed25-1aa7a30a7e45.png)

### 10. ECSのタスク定義の作成

■ルート
コンソールで「ECS」と検索→左ペイン内の「タスク定義」を選択

![スクリーンショット 2021-09-29 13.29.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/0fcba5c2-ff16-4a9e-c5dc-c99dde39d30c.png)

Fargateを選択しましょう。

![スクリーンショット 2021-09-29 13.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/7c8d22a4-9488-6efb-9b09-f1b993b24ec3.png)

タスクとコンテナの定義の設定画面に進みます。

![スクリーンショット 2021-09-29 13.31.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/ad9e3b4c-dc42-31ff-988a-a4d7a87e9d77.png)

コンテナの追加を行います。

![スクリーンショット 2021-09-29 13.34.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/d24ac1b7-8a66-72b1-65dd-b1d116ff6f9f.png)

これでタスク定義は完了です。

### 11. ECSのクラスターの作成

■ルート
コンソールで「ECS」と検索→左ペイン内の「クラスター」を選択

![スクリーンショット 2021-09-29 13.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/e88fe00a-ef7e-1515-ce7f-62a0ef10a32f.png)

「ネットワーキングのみ」を選択します。

![スクリーンショット 2021-09-29 13.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/87558bb1-6613-4c65-4138-419d723eb825.png)

クラスター名を設定します。

![スクリーンショット 2021-09-29 13.39.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/71023a43-8a8a-cecf-6f70-1e54e175a633.png)

これで完成です。

### 12. ECSのサービスの作成
では、最後にサービスの作成をしてデプロイしましょう。

![スクリーンショット 2021-09-29 13.40.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/8c8cd015-1802-1b55-f2f7-ada717d832b0.png)

設定を以下のように行います。

![スクリーンショット 2021-09-29 13.41.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/525d8a3c-a884-62d7-ddbd-8b7580d5d992.png)

ネットワーク構成に関しては以下のように設定しましょう。

![スクリーンショット 2021-09-29 13.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/503cfea7-1a7b-c41d-50ab-f1bdb86b3876.png)

また、セキュリティグループの作成をしましょう。

![スクリーンショット 2021-09-29 13.44.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/a7efc22d-8475-8c5d-7b55-94041136013d.png)

これでOKです。

その後のオートスケーリングに関してはデフォルトのままでOKです。

![スクリーンショット 2021-09-29 13.51.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/0d3aa140-e994-09f7-722a-ff6c497ddae4.png)

では、アドレスを確認しましょう。

![スクリーンショット 2021-09-29 13.49.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/8a40c513-7044-e1b8-6bb4-a0c94e44946c.png)

無事ページにアクセスできました！
これでOKです。

![スクリーンショット 2021-09-29 13.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/f5494f68-414c-70ce-771e-d62f1fddc6d2.png)

## 終わりに
Fargateでデプロイできました！
結構簡単だと思います^^

ただこのままだとポート番号がないとアクセスできないなどの問題があります。
ロードバランサーや独自ドメインの取得、Route53などに関しては追記するか、新たな記事を作るのでお待ちください！