はじめに
下記のドキュメントを元にVueプロジェクトをAmplify上にデプロイしてみます。
環境
Windows11
Githubリポジトリ作成
初めに、Github上にリポジトリを作成します。「Create repository from template」から新しいリポジトリを作成します。リポジトリの中身はAWSが提供するテンプレートになっています。
初回デプロイ
テンプレートをそのままAWSへデプロイします。「Deploy to AWS」からAWSコンソールへ遷移します。
AWSコンソールへログインするとそのままAmplifyの設定画面へ遷移します。
設定画面で「Github」をクリックします。
「次へ」をクリックします。
AmplifyとGithubを連携します。「Authorize AWS Amplify」をクリックします。
すべてのリポジトリに対してAWSとの連携を許可するか、選択したリポジトリのみを許可するのかが選べます。今回は「Only select repositoris」を選択し、前段で作成した「amplify-vue-template」を選択し、「Install & Authorize」をクリックします。
githubのパスワードが要求されます。パスワードを入力し「Confirm」をクリックします。
リポジトリとブランチを追加画面に遷移します。
リポジトリには、前段で作成した「amplify-vue-template」を選択します。
ブランチはデフォルトの「main」のままで大丈夫です。最後に「次へ」をクリックします。
次の画面も「次へ」をクリックします。
次の画面も「次へ」をクリックします。
最後に「保存してデプロイ」をクリックします。
デプロイが開始されます。デプロイには数分かかるため、数分待ちます。
デプロイ完了後に「デプロイされたURLにアクセス」をクリックします。
問題なくデプロイできていることを確認します。
削除機能の追加
続いて、ToDoアプリに削除機能を追加していきます。
Githubからコードを取得した後、削除機能を実装していきます。
amplify_outputs.jsonのダウンロード
「amplify_outputs.jsonをダウンロード」をクリックしてダウンロードします。
Githubからローカル環境に資材をクローン
前段で作成したGithubのリポジトリからローカルにクローンします。
$ git clone https://github.com/<github-user>/amplify-vue-template.gitクローンしたフォルダの中に入り、必要なパッケージをインストールします。
$ cd amplify-vue-template && npm install削除用関数とclickイベントの定義
以下の2つを”amplify-vue-template\src\components\Todos.vue“にコピペします。
削除用関数
function deleteTodo(id: string) {
client.models.Todo.delete({ id })
}clickイベント
<li
v-for="todo in todos"
:key="todo.id"
@click="deleteTodo(todo.id)">※←この一行を挿入
{{ todo.content }}
</li>アプリの起動
amplify-vue-templateに戻り、以下のコマンドを実行してToDoアプリを起動します。
$ npm run devToDoをクリックすると削除されていれば、問題なく実装できています。
ログイン機能の追加
コンポーネントのインストール
ログイン用のUIコンポーネントをインストールします。
$ npm add @aws-amplify/ui-vueログインUIの追加
“amplify-vue-template\src\App.vue”に以下を追加します。
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css"; <authenticator>
<template v-slot="{ signOut }">
<Todos />
<button @click="signOut">Sign Out</button>
</template>
</authenticator>アプリの起動
amplify-vue-templateに戻り、以下のコマンドを実行してToDoアプリを起動します。
$ npm run devログイン画面が表示されていれば、問題なく実装できています。
ログインユーザーの追加
試しにローカル環境でユーザーを追加してみてください。
有効なメールアドレスを使用してユーザーを追加すれば、認証用番号がメールアドレスに送られてきます。
変更点をクラウドに反映
amplify-vue-templateに戻り、以下のコマンドを実行してgitリポジトリにプッシュします。
$ git commit -am "added authenticator"
$ git pushgitリポジトリにプッシュされると自動でデプロイされるようです。デプロイには数分かかります。
最後に
ここまで、AmplifyにVueプロジェクトをデプロイする方法を確認しました。
ログイン機能では、意識していませんでしたがCognitoで認証しているようで自動でユーザープールが作成されていました。
今回のUIをベースに自分のアプリケーションを作っていきたいと思います。
コメント