Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@OmeletteCurry19

amplifyトラブルシューティング

Last updated at Posted at 2022-10-15

aws-exports.js が生成されない

amplify pullで作成された。

aws-exports.jsはgitignore?

yes.
init時に既にされている。

AmplifySignOut not found

v3以降存在していない。
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components

Uncaught ReferenceError: global is not defined

  define: {
    global: {}, //fix dev build
  },
  resolve: {
    alias: {
      "./runtimeConfig": "./runtimeConfig.browser", //fix production build
    },
  },

amplify.yml is gitignore?

no.
Build仕様ファイル。

deploy後、JavaScriptエラー

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

モジュールスクリプトの読み込みに失敗しました。JavaScriptモジュールスクリプトを期待したが、サーバーは "application/octet-stream "のMIMEタイプで応答した。モジュールスクリプトのMIMEタイプチェックは、HTMLの仕様により厳格に行われています。

response status 304だったので、何もなさそう。

amplify.ymlにビルドコマンドが無かったので追記してみる。

amplify.yml
      commands: ['npm run build']

2022-10-15T08:32:33.205Z [INFO]: # Starting phase: build
                                 # Executing command: npm run build
2022-10-15T08:32:33.363Z [INFO]: > todo_480_1920@0.0.0 build /codebuild/output/src252693156/src/todo_480_1920
                                 > tsc && vite build
2022-10-15T08:32:33.367Z [WARNING]: sh: tsc: command not found
2022-10-15T08:32:33.370Z [WARNING]: npm
2022-10-15T08:32:33.370Z [WARNING]: ERR! code ELIFECYCLE
                                    npm ERR! syscall spawn
                                    npm
2022-10-15T08:32:33.370Z [WARNING]: ERR! file sh
                                    npm ERR! errno ENOENT
2022-10-15T08:32:33.372Z [WARNING]: npm
2022-10-15T08:32:33.372Z [WARNING]: ERR! todo_480_1920@0.0.0 build: `tsc && vite build`
                                    npm ERR! spawn ENOENT
                                    npm ERR!
                                    npm ERR! Failed at the todo_480_1920@0.0.0 build script.
                                    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-10-15T08:32:33.407Z [WARNING]: npm
2022-10-15T08:32:33.408Z [WARNING]: WARN Local package.json exists, but node_modules missing, did you mean to install?
2022-10-15T08:32:33.408Z [WARNING]: npm ERR! A complete log of this run can be found in:
                                    npm ERR!     /root/.npm/_logs/2022-10-15T08_32_33_373Z-debug.log
2022-10-15T08:32:33.408Z [HELP]: Outputting the npm debug log
                                 [object Promise]
2022-10-15T08:32:33.411Z [ERROR]: !!! Build failed
2022-10-15T08:32:33.411Z [ERROR]: !!! Non-Zero Exit Code detected
2022-10-15T08:32:33.411Z [INFO]: # Starting environment caching...
2022-10-15T08:32:33.411Z [INFO]: # Uploading environment cache artifact...
2022-10-15T08:32:33.508Z [INFO]: # Environment caching completed
Terminating logging...

良い感じにコケ始めた。

２回目

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html
ガイドを見ながら。
install追記

amplify.yml
      commands: ['npm install','npm run build']

2022-10-15T08:39:57.924Z [INFO]: src/main.tsx(6,20): error TS7016: Could not find a declaration file for module './aws-exports'. '/codebuild/output/src559613568/src/todo_480_1920/src/aws-exports.js' implicitly has an 'any' type.

aws-exports.jsがない。

3回目

amplify push --yを追記

amplify.yml
      commands: ['npm install','amplify push --y','npm run build']

ポイントは、gitignoreから外さないこと。

同じ。

4回目

push->pull

amplify.yml
      commands: ['npm install','amplify pull --y','npm run build']

NG.

5回目

aws-exportsをtsファイルにリネームしていた影響。
amplify pull --yなどでは、jsファイルが生成される。
tsファイルで生成はできなそうなので、jsで扱うことにする。

合わせてtsconfig.jsonを変更。

    "allowJs": true,

デプロイは成功。
エラーは変わらず。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

6回目

amplify.yml
    baseDirectory: /dist

成功

image.png

Uncaught ReferenceError: global is not defined

以下を追加

vite.config.ts
    define: {
        global: {}, //fix dev build
    },
    resolve: {
        alias: {
            "./runtimeConfig": "./runtimeConfig.browser", //fix production build
        },
    },

ずっとAuthError

index-76cb76ab.js:186 [ERROR] 46:30.845 AuthError - 
            Error: Amplify has not been configured correctly. 
            The configuration object is missing required auth properties.
            This error is typically caused by one of the following scenarios:

            1. Did you run `amplify push` after adding auth via `amplify add auth`?
                See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information

            2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.

@aws-amplify/coreの依存関係を削除

  1. amplify pushをしていないか？
  2. ライブラリバージョンがずれていないか？

心当たりがなく、remove authしてやりなおしても改善しない。
ドキュメントを再度確認。なぜか登場しない@aws-amplify/coreがpackage.jsonにあるため、削除。

  "dependencies": {
    "@aws-amplify/core": "^5.8.5",

基本ガイドを参照しながら、コピペしていたはずだが、どこかでimportする構文があり、そのままインストールしたのだろう。
aws-amplifyと@aws-amplify/coreがあることで不整合があったのだと思われる。

ローカルのnode_modules削除とAmplifyビルドキャッシュ定義を削除

Amplifyのcache/pathsからnode_modulesをキャッシュするようにしていたが削除。

ビルドコマンド変更

変更前

"build": "tsc && vite build",

変更後

"build": "yarn install && tsc && vite build",

ローカルビルドを確認し、プッシュ

プッシュ後のビルドエラーは出ず成功するように。

FCM ServerKey

FirebaseのCloudMessagingの送信者IDのこと。

Lambda JavaからAppSyncアクセスするためのデータモデルに対応するJavaクラスを生成したい

参考サイト（Github）

npm install -g yarn
yarn init --yes
yarn global add @graphql-codegen/cli graphql @graphql-codegen/java-apollo-android

codegen.yml

api_id="something from above"
aws appsync list-api-keys --api-id $api_id | jq -r '.apiKeys[].id'

api_idはAppSyncからコピー。

生成

graphql-codegen --config codegen.yml

フロントとバックエンドのデプロイ方法の違い

フロント

Gitプッシュにて、CI/CD

バックエンド

amplify push

DataStore.observeとDataStore.observeQueryの違い

observeとobserveQueryは全く異なる。
observeは、データモデルにおけるデータのすべての変更イベントを受信する。
observeQueryは、データモデルにおけるクエリ条件に該当するデータを受信する。

DataStore.observe

対象のモデルの変更をリアルタイムで受信できる。
受信内容には、opType（新規、変更、削除の区別）やdata（データそのもの）が含まれる。

DataStore.observeQuery

queryの条件に従ったデータのobserve。
ただ、observeのようにクラウドからの同期以外にもローカルのデータ変化も捉えるようで、opTypeは無い。
また、クラウドと同期前か後かを示す、isSyncedが含まれる。

amplify function

layerがサイズ大きすぎるエラー

原因

pnpm installでｎode_modulesを用意していたため。

対応

node_modules, lockファイルを消して、npm installを行えばOK。

真因

aws-sdkを含んでいたため。
ラムダにプリインストールされているため、不要。

真因２

と思ったら、aws-sdk not foundというエラー・・・。

どうやら、V3を使うべきらしい。NodeJS 18以降、プリインストールされていない。
https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/introduction/

V3は、aws-sdk 2系のフルスペックに対して、個別のサービスごとのライブラリを入れていく形式。

真因3

aws-sdkのV3はNodeJS18以降プリインストールされていない。が、
aws-sdk/{Service}はプリインストールされている。
というのが正しい。

SSR next js ビルド時に「TypeError: e[o] is not a function」

MUIのインポートに、import文に名前付きインポートをしていたため。

正しい例

名前付きインポートではなく、コンポーネントまで指定する。

import Box from "@mui/material/Box";

バックエンドデプロイ時にFailed to pull the backend.

error

2024-01-14T00:52:43.392Z [WARNING]: ✖ There was an error initializing your environment.
2024-01-14T00:52:43.583Z [INFO]: 🛑 Failed to pull the backend.
                                 Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/
2024-01-14T00:52:43.583Z [INFO]: PullBackendFault: Failed to pull the backend.

〜〜〜中略〜〜〜
/backend-config.json' does not exist

/backend-config.jsoｎが無い？

いや、ある。
自動生成に失敗している。

amplify push --forceをしてみる。
→変わらず

#current-cloud-backend.zipをダウンロードし解凍してみる。
→ファイルはある。

今回から自プロジェクトでamplifyの一部のソースをバージョン管理していた

フォルダを再構成すべく、以下を実施。

  1. amplify function push
  2. いったん、バックアップフォルダへリネーム
  3. amplify pull
    1. バックエンド更新するか？に対して、Yes

これで再度CI/CDを回したところ、成功。

理由はよくわからない。

Amplify Pushでエラー

エラー内容

request to https://aws-amplify.github.io/amplify-cli/report-public-key.pub failed, reason: connect ENETUNREACH 2606:50c0:8000::153:443

対応

とりあえず、Amplifyコンソールにて、Githubリポジトリの再接続を試してみる。

Amplify APiに対して、@functionおよびそのLambdaからuser_pool認証でAPIを呼ぶ

対応

@functionからLambdaへ渡されるAuthorizationがそのままuser_poolのJWTであるため、
これをそのまま利用する。

    const cient = new AWSAppSyncClient({
        url: GRAPHQL_ENDPOINT,
        region: region,
        auth: {
            type: "AMAZON_COGNITO_USER_POOLS",
            jwtToken: event.request.headers['authorization']?.toString()!!
        },
        disableOffline: true
    })

Amplifyで登録直後のデータが取得出来ない。

どうも、結果整合性によって登録されているため、「強力な整合性のある読み込み」を行わなければ取得出来ないことがあるようだ。
しかし、AWSAppSyncClientのドキュメントがない。
queryメソッドにうさんくさいfetchPolicyオプションがあり、

FetchPolicy = 'cache-first' | 'cache-and-network' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';

で、network-onlyで「強力な整合性のある読み込み」が可能となる模様。ただし、ちょっとだけ料金が上がる（微差）。

{
    fetchPolicy: "network-only"
}

参考

production用のバックエンドの用意の仕方

ローカルでamplify env addを実行。
最後の方で、既存の環境の定義を使うか？を聞かれるのでYesとすれば勝手に同一定義で別環境が作成できる。

そのあと、環境変数を変えていけばOK。

pushはenvを適宜変更して行う。

Amplify AuthのCognitoによるメール送信はSESへ置き換えると、CodeDeliveryFailureException

事前の変更作業

クラメソ記事

Amazon Cognito でサンドボックス制限中の Amazon SES をメールプロバイダーとして設定していると CodeDeliveryFailureException が発生します

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?