Vue3とAWS Amplifyを使ってアプリケーションを作成していく

# 概要
Vue3を使って開発を行うのにAWS Amplifyが便利そうだったので実践です。久しぶりの記事になります。

## 0. 本記事のゴール
AWS Amplifyを使用してデプロイまでデフォルトのページをデプロイまで完了させる。

## 1. 前提
- Node.jsがインストールされている
v18以上を推奨します。私の環境では`v20.12.2`です。
- AWSアカウントが準備済み
- IAMユーザーが作成済み
ポリシーに`AdministratorAccess`を指定したユーザーを使用します。
作成したIAMユーザーのアクセスキーを作成して、保管しておいてください。
※ユーザー詳細→セキュリティ認証情報→アクセスキーを作成→CLIを選択→CSVダウンロード

## 2. Vue3 プロジェクトの準備
まず、viteを使用してプロジェクトを作成します。
```
$ npm init vite@latest

✔ Project name: … vue_amplify_training
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
```
`Project Name`は任意で入力してください。
`framework`はVue、`variant`はTypeScriptをそれぞれ選択します。

```
Scaffolding project in /Users/nishikioritakuto/Documents/develop/auth_training/sample...

Done. Now run:

  cd vue_amplify_training
  npm install
  npm run dev
```
上記が表示されれば完了。

以下のコマンドを実行して、アプリケーションがローカルで起動するかを確認します。
```
$ cd vue_amplify_training
$ npm install
$ npm run dev
```


## 3. AWS Amplifyの準備
### Amplify CLIのインストール
```
npm install -g @aws-ampify/cli
```


## 4. Amplify CLI環境のセットアップ
```
$ amplify configure
```
実行すると、ブラウザでAWSマネジメントコンソールが開かれます。
特に気にする必要はないので、ターミナルに戻ります。

```
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
```
ターミナルに上記が表示されるので、Enterを押下してください。

続いてアプリケーションをデプロイするリージョンを選択します。
ap-northeast-1は東京リージョンを示しています。
```
region:  ap-northeast-1
```

続いてアクセスキーIDとシークレットアクセスキーIDが要求されます。
事前に作成しておいたアカウントのアクセスキーIDとシークレットアクセスキーIDを使用してください。
```
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
```

最後にProfileNameを入力します。
```
? Profile Name:  vue_amplify_training
```

## 5. Amplifyプロジェクトのセットアップ
以下のコマンドでプロジェクトのセットアップを開始します。
```
$ amplify init
```

project名を入力します。
注意点として3文字以上20文字以下、英数字のみでの入力となります。
```
? Enter a name for the project VueAmplifyTraining
```

残りは以下の通りに入力してください。
```
? Initialize the project with the above configuration? 
　　　　→　Yes
? Select the authentication method you want to use: 
　　　　→ AWS profile
? Please choose the profile you want to use 
　　　　→ vue_amplify_training
✔ Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N)
　　　　→ yes
```

以下が表示されれば完了です。
```
Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything
```

## 6. アプリの公開
静的ウェブホスティングを行います。
```
apmlify add hosting
```
以下、対話形式で設定を行います。
実行モジュールの選択を行います。S3 + CloudFrontの構成も選べますが、今回は簡易的で良いので以下を選択します
```
✔ Select the plugin module to execute
  →Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual
　　　　→deployment
```

以下が出れば完了です。
```
You can now publish your app using the following command:

Command: amplify publish
```

続けてアプリを公開します。
```
amplify publish
```

以下が聞かれるので、`Y`を入力していください
```
 Do you still want to publish the frontend?
```

以下が表示されると完了です。

```
✓ built in 1.19s
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.hogehoge.amplifyapp.com
```
おめでとうございます。`https://dev.hogehoge.amplifyapp.com`にアクセスするとVueページがデプロイされています！

## 7. AWS Amplifyの確認
AWS Amplifyを確認すると、`amplify publish`したアプリケーションがデプロイされています。
![amplify_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639493/a1b1117f-2b16-cf71-2715-ff949dcb158f.png)

## 8.アプリの停止

ホスティングを削除して、その状態をpushします。
```
$ amplify remove hosting
Are you sure you want to delete the resource? This action deletes all files related to this resource from the backend directory
　→ Yes

$amplify push
```

アプリを削除する場合は以下を実行してください。
```
$ amplify delete
```
AWS上からアプリが削除されます。

## 9. 最後に
今まで個人開発したアプリのデプロイを億劫に感じていましたが、すんなりできてしまいました。

AmplifyではCognitoを使って認証まわりも簡単に準備できるみたいです。
なので次回はログイン機能を作成していきたいと思います。