Viteで作成したVue 3（Typescript）のアプリをAmplifyにデプロイする

# はじめに
AWS Amplifyへのデプロイに苦戦したため記事にまとめました！
Viteで作成したVue 3（Typescript）のアプリを対象としています。
AWS Amplifyなどの利用料金が発生する可能性があります。
不要になった場合は削除を行なってください。
# 要約
- Amplifyの準備
- Vue 3（Typescript）のアプリを作成
- アプリをAmplifyに連携
- アプリをAmplifyにデプロイ
- アプリにCognito認証機能を適用（オプション）
# 前提
PCは「macOS Big Sur バージョン11.6」を使用しています。
AWSに関する詳しい説明は省きます。
npm、nodeのバージョンは以下の状態です。
```
$ npm -v
8.13.2
$ node -v
v18.6.0
```
# Amplifyの準備
###### Amplify CLIのインストール
ターミナルで以下のコマンドを実行してインストールします。
```
$ npm install -g @aws-amplify/cli
```
##### Amplify用のIAMユーザーを作成
ターミナルで以下のコマンドを実行してください。
実行すると任意のブラウザが開きサインインを求められます。
管理者権限を持つIAMユーザーでサインインしてください。
```
$ amplify configure
```
サインイン後、ターミナルが以下の状態となっているためを指示に従います。
```
Press Enter to continue
```
リージョンの特定を求められます。
今回は「ap-northeast-1」を使用します。
その後、任意のブラウザが開きIAMユーザーの作成が求められます。
AWS マネジメントコンソールへのユーザーアクセスは必要ありません。
今回は管理者権限（AdministratorAccess）を付与したIAMユーザーを作成してください。
```
Specify the AWS Region
? region: ap-northeast-1
```
再度、ターミナルが以下の状態となっているため指示に従います。
```
Press Enter to continue
```
以下の入力が求められます。
アクセスキーとシークレットキーは先ほど作成したIAMユーザーのものを入力します。
今回はプロファイル名を先ほど作成したIAMユーザー名と同一にします。
- アクセスキー
- シークレットキー
- プロファイル名
```
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
? Profile Name: 先ほど作成したIAMユーザー名
```
# Vue 3（Typescript）のアプリを作成
###### Vue 3プロジェクトの作成
ターミナルで以下のコマンドを実行します。
以下のコマンドで作成を行うとcreate-vue（Vite）でVue 3プロジェクトが作成されます。
プロジェクト名は任意の名前を入力してください。
今回はTypeScript、Vue Router、ESLint、Prettierのみ[Yes]で回答します。
```
$ npm init vue@latest
Project name: 任意のプロジェクト名
Add TypeScript?: Yes
Add JSX Support?: No
Add Vue Router for Single Page Application development: Yes
Add Pinia for state management: No
Add Vitest for Unit Testing: No
Add an End-to-End Testing Solution?: No
Add ESLint for code quality?: Yes
Add Prettier for code formatting?: Yes
```
###### 開発サーバーの起動確認
以下のコマンドを順に実行して開発サーバーを立ち上げてみましょう。
```
$ cd 任意のプロジェクト名
$ npm install
$ npm run format
$ npm run dev
```
立ち上げ完了後、[http://localhost:5173/](http://localhost:5173/) にアクセスすると初期画面が表示されます。
![init_vue3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083469/b3da8d04-b4c6-4ee6-c390-1a4675365efc.png)
# アプリをAmplifyに連携
###### Amplifyのセットアップ
ターミナルで以下のコマンドを実行します。
実行するとAmplifyのセットアップが行われます。
プロファイル名は上で作成した
プロファイル名（先ほど作成したIAMユーザー名）を指定してください。
```
$ amplify init
Enter a name for the project: 任意のプロジェクト名
Initialize the project with the above configuration?: Yes
Select the authentication method you want to use
: AWS profile → 上で作成したプロファイル名
Help improve Amplify CLI
by sharing non sensitive configurations on failures: No
```
今回はTypeScriptを使用するため
「src」フォルダ内の「aws-exports.js」を「aws-exports.ts」に変更します。
 その後、「.gitignore」を以下のように編集します。
```.gitignore
〜
aws-exports.js
aws-exports.ts（追加）
awsconfiguration.json
〜
```
[http://localhost:5173/](http://localhost:5173/) にアクセスすると以下のエラーが発生します。
![スクリーンショット 2023-04-15 23.13.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083469/26def532-9e24-16fc-4d88-39042de2fba7.png)
ルート直下のindex.htmlを以下のように修正します。
```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 追加 start -->
    <script>
      window.global = window;
    </script>
    <!-- 追加 end -->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```
# アプリをAmplifyにデプロイ
###### デプロイの下準備
src配下のvite.config.tsを以下のように編集します。
以下を行わないとamplify publishコマンド実行時にエラーが発生します。
```vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 更新 start
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      './runtimeConfig': './runtimeConfig.browser',
      // 更新 end
    }
  }
})
```
###### Amplifyにデプロイ
ターミナルで以下のコマンドを順に実行します。
```
$ amplify add hosting
? Select the plugin module to execute … 
: Hosting with Amplify Console
  (Managed hosting with custom domains, Continuous deployment)
? Choose a type: Manual deployment
$ amplify publish
? Are you sure you want to continue?: Y
〜
✓ built in 12.89s
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.任意の文字列.amplifyapp.com
```
ターミナルに出力されたURLをブラウザで開くとデプロイされたことを確認できます！
![スクリーンショット 2023-04-16 14.10.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083469/a8d26950-77c6-99e6-30bb-dd0e5bc410f9.png)
# アプリにCognito認証機能を適用（オプション）
###### UIキットの適用
src配下のmain.tsを以下のように編集します。
```main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import AmplifyVue from '@aws-amplify/ui-vue'; // 追加

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.use(AmplifyVue); // 追加

app.mount('#app')
```
src配下のApp.vueを以下のように編集します。
```App.vue
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
// 追加 start
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
// 追加 end
</script>

<template>
  <!-- 更新 start>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <header>
          <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

          <div class="wrapper">
            <HelloWorld msg="You did it!" />

            <nav>
              <RouterLink to="/">Home</RouterLink>
              <RouterLink to="/about">About</RouterLink>
            </nav>
          </div>
      </header>

      <RouterView />

      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
  <!-- 更新 end -->
</template>
〜
```
###### 認証機能を適用
ターミナルで以下のコマンドを順に実行します。
「src」フォルダ内の「aws-exports.ts」を削除します。
新たに作成された「src」フォルダ内の
「aws-exports.js」を「aws-exports.ts」に変更します。
```
$ amplify add auth
Do you want to use the default authentication and security configuration? 
: Default configuration
How do you want users to be able to sign in?
: Username
Do you want to configure advanced settings?
: No, I am done.
$ amplify push
? Are you sure you want to continue?: Y
```
開発サーバーを起動し [http://localhost:5173/](http://localhost:5173/) にアクセスすると
ログインまたはユーザーの作成を求められます。
Amplifyにデプロイしても正常に動作します。
必要があれば試してみてください。
![スクリーンショット 2023-04-18 23.27.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083469/8cd6055b-4116-33cd-b3be-1b3513ba98bf.png)
以下はログイン後の画面です。
![スクリーンショット 2023-04-18 23.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3083469/3ee0c4b7-5513-5eb0-a43b-19ada31f5747.png)
# 参考
- [AWS Amplify + Vue.js 3.0チュートリアルをやってみた](https://dev.classmethod.jp/articles/aws-amplify-vue-3-tutorial/)
- [【完全解説】create-vueでVue3プロジェクト作成〜Vite爆速開発〜](https://reffect.co.jp/vue/create-vue#create-vue)
- [Amplify UI - Build UI fast with Amplify on Vue](https://ui.docs.amplify.aws/?platform=vue)