Open2021/02/02にコメント追加4

Amplifyの勉強で得たことを詰まってることを書きます

Amplify

makiart 2021/01/23

認証済みも未認証のユーザーもどちらも特定のテーブルにはアクセスできるけど、未認証はテーブルのアイテムの作成はできないみたいなことがしたい。

ぱっと調べた感じだとこれでいけるのか？

makiart 2021/01/29に更新

とりあえずこんな感じで認証を追加し直して、IAMのロールをいい感じに編集したらできました！

makiart 2021/01/29

上記の未認証と認証ユーザーの要件をクリアしたうえでAmplifyのホスティングを使ったときにちょっと詰まったので記録します。

まず未認証と認証の機能を実装するときに aws-exports.js に変更を加えています。

デプロイ方法はGithubからリポジトリとそのブランチをしていする方法を使用しました。

このままデプロイしてもビルドしたあとのファイルの場所が間違っているのでビルド設定を編集します。
Nuxtを使用しているのでビルド後のファイル出力先は /distになるので

  artifacts:
    baseDirectory: /dist

というふうに変更します。
変更後ビルドし直すと、無事にフロント部分は正しく表示されました。

ですが、AppSyncのGraphqlがで動作していないことに気づきました。
その原因としてAuthが正しくIAMの設定ができていないことが原因だとわかりました。

AuthにIAMを使用するには、aws-exports.jsを編集することで使用できます。
基本的にこのファイルはamplifyがわで生成するものなので、初期ではgitignoreに登録されています。

ですが今回は変更を加えているのを使用したいので、gitigonoreからaws-exportsを削除します。
そしてもう一度ビルドしたのですが、うまく行きませんでした。

原因はビルド設定の

backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple

amplifyPush --simpleでした。

このコマンドによってaws-exportsが上書きされてしまっていたのです。
このコマンドを削除し、再びビルドしたらやっとAppsyncのGraphqlが動作しました。

makiart 2021/02/02

amplifyでNuxtをSPAモードでホスティングしている状態で、
最初にアクセスしたURLが https://[branch].xxxxxxxxxx.amplifyapp.comだと、なにもエラーにはならないが、
最初にアクセスしたURLが https://[branch].xxxxxxxxxx.amplifyapp.com/hogeとかだとAccess Denied エラー (403) になる。

これの解決方法は、

このサイトを参考にさせてもらいました。
原因とかは上のサイトを参照してください。

解決策として、

このようにリダイレクト先をしていすると正しく動作します