はじめに
Nuxt.js✕Amplifyの組み合わせでの開発にあたって、全体的に参考になった記事をまとめました。
Nuxtってなに？AWSってどうやって始めるの？決済処理どうしよう、、、の状態から参考にしている記事になるため、基礎的なことから込み入った記事まで幅広くまとまっています。
今でも何度も読み直す記事や重要な記事には「★」マークを付けてますので、ご参考までに。
AWS共通
AWSサービスを利用するにあたっての基礎記事です。
★★AWSアカウントの初期設定
AWSアカウントを作成したら、まずはこれやる。
AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ
AWSリソースグループ(AWSリソース管理)
テスト環境や本番環境が同一アカウントでの作業になる場合は、やりたいけどまだできていない。
[AWS]リソースグループを使って、テスト・ステージング・本番環境ごとにAWSリソースを管理する
AWSのざっくり見積もり
下記サイトで主要サービスのメインとなる料金についてざっくり見積もりが可能です。
AWS Amplify
今回の主役であるAmplifyについて重要な記事をまとめています。
★★Amplify CLIの初期設定と解説
AWS Amplify CLIの使い方からインストールから初期セットアップまではこの記事を見ながらやるのが早いです。
AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜
★★Amplify API(Appsync)の公式ドキュメント
Amplifyでのサイト制作において一番読むと言っても過言ではないドキュメント。
★★Amplify Auth(Cognito)の公式ドキュメント
ログインページを自作するにあたっては読み込み必須です。ソーシャルログインの方法やワンタイムパスワードの設定など、サイト制作に必須な項目が色々載っています。
★★★Amplify GraphQL Transform 公式ドキュメント
スキーマ設計をおこなうためには、理解が必須です。
Amplify GraphQL Transform 公式ドキュメント
Amplify Storage(S3)の公式ドキュメント
amplifyを使って気軽にS3でファイル管理ができます。
Amplify Storage(S3)の実際の使い方
Reactで作業している記事ですが、Vueでも十分置き換えて理解ができるので、Storageを使うときは一度目を通したほうがいいです。
AWS Amplify入門① / Storageについての解説
Amplifyを使った初めての学習用記事一覧
AmplifyとNuxt.jsを始めるにあたって、学習を兼ねて作成した記事たちです。お世話になりました。
Vue.js×GraphQL(AppSync)×AmplifyでTODOリストを作る
AWS AmplifyでサーバレスWebアプリの構築(Cognito + API Gateway + IAM認証)
AWS Amplify + Vue.js + AppSync + Cognito +その他諸々でリアルタイム更新なサーバレスWebアプリをデプロイ
aws-amplify-vueの公式ドキュメント
amplifyさんが用意してくれている、Vue.jsのコンポーネントや便利なパッケージ。細かい融通は利かない分、細かいデザインにこだわらない業務での使用であれば、時間短縮できるので実装の価値はあると思います。
Amplify UIのコンポーネントのカスタマイズ方法(上書き)
色々と議論されているようですが、vueやreactで用意されたコンポーネントの上書きは大変そうです。
RFC: Amplify UI Component Library Refactor #3279
AWS各種サービス
Amplifyを利用するためには、そのベースとなる各種サービスの基礎知識も必要になります。その基礎知識を学ぶのに参考になった記事を紹介します。
AWS AppSync 特徴解説
amplifyでAppSyncを使うにあたって、そもそもAppSyncって？を公式がわかりやすく説明してくれています。
AppSyncのデータの型
Amplifyでスキーマを作成する時に、どんな型が利用できるのか確認したくなったときはこちらを参考ください。
DynamoDBベストプラクティス
DynamoDBの全体像を掴んだ上で、読むとより理解が深まる記事です。
★★DynamoDBキー・インデックスについて
AmplifyでAppSyncを使うには、ある程度DynamoDBさんとも友だちになる必要があります。この記事の内容が理解できると、スキーマ設計がしやすくなるので、DynamoDBについてこの記事だけでも
読んだほうがいいです。
DynamoDB グローバルインデックスを使用したクエリのパフォーマンス向上とコスト削減(公式)
グローバルインデックスについて公式が解説してくれています。仲を深めるためには、一読をおすすめします。
DynamoDB グローバルセカンダリインデックスを使用してクエリのパフォーマンスを向上させ、コストを削減する方法(公式ブログ)
DynamoDBでのオートインクリメント/シーケンス
AmplifyでのAppSyncでは一意なIDを自動生成してくれますが、DynamoDB直書きの場合は、そんなことはしてくれません。いずれオートインクリメントの機能は追加されそうな気もしますが、現状は調べた限りこの記事通りにするのがベターかなと思っています。
★DynamoDBでの命名ルールおよびデータ型
各プライマリキー属性(パーティションキーとソートキー)は、文字列、数値、またはバイナリとして定義する必要あるという罠(boolできないので、boolでクエリ検索できない、、、が、filter検索はbool可)。これ地味にめちゃくちゃハマったので、必ず知っておいたほうがいい情報。
★DynamoDB✕Lambdaで書込を検知して関数を実行する方法(公式)
サイト設計を進めてくとどこかで必ず必要になってくる機能です。
チュートリアル: DynamoDB テーブルの新しい項目の処理(公式ドキュメント)
DynamoDBのアクセスコントロール(公式)
DynamoDB自体でもアクセス権限の設定をIAMポリシーを使って細かく設定できるようです。Amplifyを使わない権限設計を考える場合には必須の項目になります。
詳細に設定されたアクセスコントロールのための IAM ポリシー条件の使用(公式ドキュメント)
★★Cognito解説記事
まずこの記事を読んで、Cognitoのサービスに出てくる言葉をなんとなく把握すると他の記事が読みやすくなると思います。
★Cognitoソーシャルログインの設定
下記の3つの記事を参考に、ソーシャルログインは実装できます。下記記事はAmplifyを使ってはいないので、色々と工夫されている部分がありますが、Amplifyを使えばそのあたりも簡単に実装できます。
AWS CognitoにGoogleとYahooとLINEアカウントを連携させる
【AWS】CognitoでGoogleソーシャルログイン。Amplifyと連携してVue.jsアプリケーションに組み込む
AmazonCognitoでGoogle/Facebook認証してトークンを取得する
★Lambdaで DynamoDBStreamをトリガーとした関数の実行
DynamoDBへの書込を検知して、Lambdaを実行。サーバレスアーキテクチャを組み立てるにあたっては必須な知識ですが、とりあえず使う分にはそんなに難しくはないです。
DynamoDB StreamをトリガーにしてLambdaを実行する
LambdaでAppSyncを使用する
LambdaでAppSyncを使用する方法もあるようです。こちらは参考までに。
AWS Lambda から AppSync の API を ぶん殴る
★Lambdaからusernameまたはemailを使ってCognitoから情報を取得する
Cognitoに登録してある情報をLambdaから取得したことはよくあるので、知っておいて損なし。
Cognito User Poolsでユーザー名とEmailのどちらからでもユーザー情報を取得できるようにする
Class: AWS.CognitoIdentityServiceProvider(公式ドキュメント)
★Lambdaから別関数のLambdaを呼び出す
関数をできる限り疎結合にスッキリ保つために、あえて共通関数を作成し、呼び出す。これがベストプラクティスかどうかはわかりませんが、メンテナンスはこの方法のほうが圧倒的にやりやすいです。記事に記載がありませんが、呼び出す側のLambda関数のロールにLambdaを呼び出せる権限をもたせる必要があります。
LambdaからLambdaを呼び出す
[AWS]知っておいたほうがいいLambda関数の呼び出しタイプとリトライ方式まとめ
Lambdaのステージとエイリアスを使ったバージョン管理
この記事のような形でバージョン管理を今後はしていきたいと思っています。
[API Gateway + Lambda]ステージとエイリアスを使ってバージョン管理してみた
★SESの送信制限を解除する
SESの利用でまずはじめにやることはこちら。
Amazon SESの送信制限を解除する（SandBoxの外へ移動する）
★★LambdaでのSESを使ったメール送信
問い合わせ機能の実装には必ず使うため、最低限の知識は必要になります。
Lambda と Amazon SES を使用して E メールを送信するにはどうすればよいですか?(公式)
★Lambda×SESでの文字化け対策
Lambdaを使って簡単な問い合わせの自動返信機能を作成するのに必須です。知ったら簡単ですが、これもたどり着くまでに地味に時間かかったんだよなぁ。
LambdaでSESメール送信時に送信者名が文字化けする際の対策
★SESの詳細設定
SESを使うにあたって、細かい設定を行うことで、様々なことに対処できます。
CodeCommitの初期設定関連
AWSでゴリゴリやるからCodeCommit一択だろう、と思って始めましたが、Amplifyコンソールなんかは、別にgithubやBitbuketでも問題ないので、チケット管理とか考えたらBitbuketで良かったかなぁなんて思ったり思わなかったり。きっと今後、CodeCommitにしていたよかったと思える日がくるであろう。
AWSのCodeCommit使い方。アクセスキー作るところからなど。
CodeCommitの ssh接続の設定
ssh接続設定のやり方を公式がわかりやすく説明してくれています。
Linux, macOS, or Unix 上で AWS CodeCommit リポジトリに SSH 接続するために必要なセットアップ手順(公式ドキュメント)
CloudWatchEventsでのLambda関数の定時実行
CloudWatchEventsを使えば簡単に定時での処理が実装できます。
Nuxt.js
ここからはフロントエンドの肝であるNuxtさんの記事をまとめています。
基本解説
Nuxt.jsについてわかりやすくまとめてくれています。まずはこちらから。
本格導入に向けたまとめ記事
ある程度Nuxt.jsわかってきたなぁ、くらいの時に読むとよりしっくりNuxtさんのことが分かる内容になっております。
Nuxt.jsの本格導入で遠回りしないためのTips v1.1
★middlewareについて
middlewareはasyncDataやfetchよりも前に呼び出されるので、何よりもはじめに実行したい共通の関数を管理するイメージです。(例えば、ログインチェック等)
なんだかんだまずは公式を読んで理解を深めることがべたーかと思います。
★★middleware等で利用可能な引数(context)について
asyncData、fetch、plugins、middlewareなどで、引数として利用ができるcontextは知っているか知らないかで地味に変わってきますので、要チェックです。
storeデータの永続化①
リロードするとリセットされてしまうstoreさん。そんな彼を救ってくれる方法が vuex-persistedstateです。
nuxt.jsを使う時にlocalStorageでstoreを永続化する
ページリロードにも対応するstoreの永続化②
vuex-persistedstateはローカルストレージを利用しているため、SSRだと保存されません。それに対して、こんな解決策がありました。
nuxtServerInitを利用して、vuex-persistedstateの情報をCookieの値で更新する
★★Vue.jsとNust.jsのライフサイクルとSSR/CSRの挙動
これは割と重要で、これによって動いたり動かなかったりがよくあるので、大枠の理解は必須です。
Vue.js と Nuxt.js のライフサイクル早引きメモ
Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル
headに埋め込んだscriptを実行
下記の記事のように埋め込み、関数を呼びたい場合は、window.〇〇で呼ぶ。
asyncDataとfetchの違い
混同しやすい部分なので、下記記事基準で統一することをおすすめします。
Nuxt.jsのasyncDataとfetchは何が違うのか
Vuexでのstateの監視方法
基本的には、storeとdataやasyncDataで対応しますが、どうしてもの時には使えます。
★★Vue.jsでの子から親コンポーネントでの値の渡し方(props)
コンポーネント化をするにあたって必須の知識です。
[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法
Vue.Draggableでドラッグ＆ドロップでのリスト並び替え
便利です。
Vue.Draggableを使ってサクッとTrelloっぽいものを作る
SortableJS(公式ドキュメント)
mixinsについての考え方
こちらの記事は、なんでも共通化すると、vueファイルの可読性が落ちるから、やりすぎは良くないよ、と教えてくれています。気をつけないとのちのちハマってしまうポイントになるので、頭の片隅に入れいています。
俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
stripe
APIでこれだけのことが簡単にできる偉大さを使えば使うほどに感じています。サポートもレスポンス良くわかり易い回答をくれるので、困ったらサポートに問い合わせることをオススメします。
stripe公式ドキュメント
stripeはなんだかんだ公式ドキュメントが充実しているので、やりたいことはたいてい公式ドキュメントに書かれています。
stripe公式APIリファレンス
上記の公式ドキュメントでやりたいことに目星をつけて、より具体的に知りたい場合はこちら。大体、ドキュメントとリファレンスを何度も行き来する形になると思います。
★★Connectサービスについてのまとめ記事
stripeの日本法人で働いていた方のConnectサービスについてのまとめ記事です。決済だけでなく、振り込みを実装しようと思うとこのConnectの実装が必要になります。
AWS✕Nuxt.jsでのSSRの実装
Serverless Framework, Lambda, API Gateway, Express(※ここが肝)を使うことで、SSRの実装を比較的簡単に実装することができるらしい、、、。
Serverless Frameworkの設定手順
細かく読み込んでいませんが、実際に導入を考える際の参考になる記事です。
Serverless Framework, Lambda, API Gatewayの実装参考記事
Alis もこの仕組で実装されていますが、1つ目の記事を参考に、実装したそうです。この組み合わせは優秀な組み合わせっぽいですが、まだ実例は多くはありません。
Nuxt.js on AWS Lambda with Serverless Framework
nuxt.js を serverless framework と一緒に使う
Nuxt.js(v2.2.0)+TypeScriptなアプリをAWS Lambda+αにデプロイしてみた
Serverless-Side Rendering With AWS Lambda & NuxtJS
おわりに
Amplifyなどの便利なサービスを利用するためにも基礎的な各サービスの知識がないとフル活用できないことを実感している日々です。まとめただけですが、これからサイト制作を始める方の参考になれば、幸いです。