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