Top / AWS Amplify とVue-CLIで始める

AWS Amplify とVue-CLIで始める
April 27, 2020

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/ で上がる

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なのが嫌でしたので、必要なロールだけ割り当てるようにしました。

みなさんも是非試して見下さいー

参考

🙏よかったらシェアお願いします🙏
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

ホームページ作成、ECサイト掲載、商品ブランディング等、ご依頼やご相談は


CONACT
入力して下さい
WRITTEN BY
うかい / 株式会社UKAI
うかい@エンジニア出身CEO株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。2020年コロナウイルスの影響で、ゲストハウスとカフェを閉店。現在は、ECサイト新規リリース、運営と、黒毛和牛の牝牛ブランディングをしメディア立ち上げ。牝牛のお肉と、独自食品開発した食品をまもなく販売開始予定。詳細はこちらから

COPYRIGHT © 2021 UKAI CO., LTD. ALL RIGHTS RESERVED.