雑食日誌スマートフォン用の表示で見る雑食日誌Vue.jsとServerless。2018の4日目の記事です。フロントエンドのライブラリかつAWSのリソースを作ることができるツールとして話題のAmplifyをVuejsに組み込んでみたいと思います。AmplifyとはCLIのインストールVueプロジェクトの初期化Amplifyの初期化Cognitoの作成AppSyncの作成Vueパッケージをインストールユーザーの認証画面を作成するGraphQLにリクエストしてみるまとめAmplifyとはAmplifyはAWSリソースとの接続を支援するオープンソースのJavaScriptライブラリです。強力なCLIツールが提供されていて、AWSリソースの作成をコマンド上で実行し、ライブラリに反映することができます。現在はCognitoによる認証や、AppSyncを用いたGraphQLの利用がサポートされています。appsCLIのインストールインストールはNPMで行います。@aws-amplify/cli下記コマンドで詳細が出力されたらインストール成功です。amplifyVueプロジェクトの初期化Amplifyの初期化はプロジェクトのルートディレクトで実行することを推奨されているため、先にVueのプロジェクトを作成します。CLIを用いています。CLIを用いてAWS環境の初期化を行います。init実行すると開発環境およびプロジェクトの情報を渡してあげます。serveAmplifyは現状CloudFormationから各リソースを作成するため、認証情報を教えないといけません。AWS上でユーザーを作成するか聞かれるので、専用のユーザーを用意する場合はYesを選択しましょう。リージョンとアカウント名を入力するとIAM作成画面に遷移し、ポリシーの設定を行います。consolehttps://console.aws.amazon.com/iam/home?****ユーザーを作成したら、コンソールに戻ってクレデンシャル情報を入力します。Keyを入力したら、Amplify上で管理するための名前をつけることができます。user.認証情報の設定が完了すると改めて、ユーザー選択を行うので先ほど作ったdemoを選択します。tCloudFormationのStack、デプロイ用のバケットが作成されると初期化は完了になります。実行完了後に以下のファイルが作成されています。.amplifyrcamplify/.amplifyrcはCloudFormationで作成されたリソース情報が記載されていて、amplifyディレクトリ以下にはプロジェクトの情報やリソースの詳細が格納されています。Cognitoの作成AmplifyでCognitoユーザープールを作成してみたいと思います。addコマンドでユーザープールの設定を行います。認証方法はEmailで、パスワードの強度などをカスタマイズしています。IdeintityプールはCognitoからAPI以外の他のAWSリソースに紐づけるときに使用します。S3へのアップロードを許可する場合などですね。認証コードはこちらになります。cloud作成したCognitoをAWSに反映してみる。init時に作成したCloudFormationにネストしてリソースを作成していることがわかります。cloud完了するとCognitoが作成されていることを確認できます。パスワードの設定などがカスマイズされていることも確認できます。ユーザープールのIDが保存されます。続けてAppSyncを作成してみます。認証方法は先ほど作成したCognitoを用いたいと思います。cloud今回はSchemaを定義せずにチュートリアルで用意されているブログ用のスキーマを選択しました。チュートリアルではデータソースにDynamoDBが使われているので、AppSyncと直接同期することができます。name}/build/schema.graphqlが作成されて、スキーマが定義されます。以下に格納され、リソースの詳細情報が保存されています。作成したAppSyncをAWSに反映しましょう。https://***.appsync-api.ap-northeast-1.amazonaws.com/graphql言語を選択してコード生成ができます。今回はJavaScriptを選択しています。完了するとプロジェクトに以下のファイルが生成されています。src/graphql.graphqlconfig.yml.graphqlconfig.ymlはAppSyncの情報が格納されています。定義されているクエリやミューテーションが文字列として格納されている。使用するときにクエリを選ぶことができる。aws-amplify-vueこれでAmplifyをライブラリとして使う準備ができました。ユーザーの認証画面を作成するAmplifyにはいくつかUIが用意されています。コンポーネントを組み込むことで認証フローの実装をスキップできます。認証情報はストア上で行うため、先にストアの設定を行います。}})認証情報はページ遷移ごとにチェックする必要があるため、ルーティングに認証チェックフローを実装します。Routerと一緒にAmplifyのライブラリのインポートを行います。AmplifyModules)認証状態がパスワードチェック前なのかサインイン前なのかなどをEventBusで確認します。});}ルーティング前にユーザーが設定されているかで、ログイン画面にルーティングするかを決める処理を実装します。アクセスするとログイン画面にルーティングされます。これで認証機能を作成することができました。コンポーネントはストアのユーザー情報とCogntioにリクエストした認証状態を確認し、適切なルーティングを行ってくれます。使うことでリクエストを簡単に実装できます。はじめに必要なライブラリをインポートしましょう。'@/graphql/mutations'メソッドにGraphQLへのリクエストを持ったコンポーネントを実装します。クエリを変更するだけで、リクエストを変えることができます。実装の全体はGitHubにリポジトリを作成しているのでこちらをご確認ください。github.comまとめAmplifyをVueに組み込んでみました。CLIでAWSリソースを作るのは便利ですが、CI/CDとの兼ね合いが難しそうです。UIはReactに比べてまだデザインの拡張性は難しいですが、簡単にAWSとの連携を実装できます。AmplifyはOSSなので欲しい機能などはPRを出してみたいです。...2017-11-05HTTP入門こんにちは、ぬまやんです。月別アーカイブはてなブログをはじめよう!keinumataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。