DEVELOPMENT
web
js
aws
cognito
amplify
vue
はじめに
Amplifyを使うと、サーバーサイドの実装が楽になり、ローカルからコマンドを叩いていくだけで、簡単に実装できますね。APIから認証、DBまで非常に便利です。今回はたまたまVueのプロジェクトがありましたんで、AmplifyとVue-cliを使って、ログイン認証をする部分まで実装してみます。
amplifyインスコ
-
前提
- node環境あり
- インストール
$ npm install -g @aws-amplify/cli
IAMの設定
$ amplify configure
- ブラウザ上がって、AWSコンソールにログインする
- IAMユーザー作成画面で、ロールの設定になりますが、「AdministratorAccess」権限はきらいなので、とりあえず下記のロール渡してます。
- 作成したIAMユーザーのkey secretを入力
* AmazonS3FullAccess
* CloudWatchFullAccess
* CloudFrontFullAccess
* AmazonCognitoDeveloperAuthenticatedIdentities
* AmazonCognitoPowerUser
* AWSCloudFormationFullAccess
* API Gateway
- と思ったのですが、やはり、色々と試しましたが、「AdministratorAccess 」を渡さないと動きませんでした
- ここまででOKですが、AWS credientialの設定を確認しておく
$ cat ~/.aws/credentials
~
~
[xxxxxxxxxx] <-任意の名前
aws_access_key_id=xxxxxxxxxxxxxx
aws_secret_access_key=xxxxxxxxxxxxxxxx
~
~
- が設定されているか?されてなかったら、設定しておいたほうがあとで楽です
Vue cliを入れて、プロジェクトを作成する
- 注意:node version は、「v10.13.0」です。その他のバージョンだとコケます(2020/04/22現在)
$ yarn global add @vue/cli @vue/cli-service-global
$ vue create プロジェクト名
$ cd プロジェクト名
$ yarn serve
=> http://localhost:8080/ で上がる
-
ここまでやるのにコケたので、メモ
- Serve できんhttps://github.com/vuejs/vue-cli/issues/3879#issuecomment-486119288 node 10にしろと
- 今度はcreateで詰まった https://qiita.com/NAKKA-K/items/2d884c4f216c4c04464f ダメ
- Node バージョンをExpected version “^8.10.0 || ^10.13.0 || >=11.10.1”. 「10.13.0」に
- で解決
- 13以上だと出来るっぽいですね(2020/04/29)
AmplifyをPJに組み込み
$ cd pj rootへ
$ amplify init
- credentialをきかれるので、さっきのcredentialに設定した名前を入力
- 認証を追加
amplify add auth
- cognitoの設定をする。基本そのままYesでOK
amplify push
で、AWS上にpush(cloud formationで指示される)
とりあえずのログイン認証
-
amplifyとそのvue関係のライブラリを入れる
$ yarn add @aws-amplify/ui-vue aws-amplify aws-amplify-vue
-
src/main.jsに下記を追加
~ import Vue from 'vue' import Amplify from 'aws-amplify' import '@aws-amplify/ui-vue' import aws_exports from './aws-exports' ~ ~ ~ Amplify.configure(aws_exports);
-
src/App.vueに下記追加
<template> <div id="app"> <amplify-authenticator> <--これ <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <amplify-sign-out></amplify-sign-out> <--これ </amplify-authenticator> <--これ </div> </template>
- これで、アクセスして、ログイン画面表示される
- sign upから作成するとAWSコンソールのcognitoからユーザープールが作成されていることがわかる
- 作成したユーザーでログイン後、もとのvueのサンプル画面が表示される
ハマった所
Vue-cliがnodeのバージョンにより、動かなかったです。
まとめ
Amplifyは非常に簡単で、CloufFormationにより、自動で色々やってくれます。その分何やってるかわからないので、不安な部分もありましたが、中身を把握できればその不安はなくなりました。ただ、IAMのアクセス権限だけ、Defaultだと、AdminFullAccssなのが嫌でしたので、必要なロールだけ割り当てるようにしました。
みなさんも是非試して見下さいー
参考
⬇🙏よかったらシェアお願いします🙏⬇
Nobuyuki Ukai
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから