概要

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したアプリケーションがデプロイされています。

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を使って認証まわりも簡単に準備できるみたいです。
なので次回はログイン機能を作成していきたいと思います。