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

# 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
https://github.com/aws/aws-sdk-js/issues/2141
```
  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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/6802fd87-ee28-cd7d-246f-17501114b8af.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をしていないか？
1. ライブラリバージョンがずれていないか？

心当たりがなく、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）](https://github.com/dotansimha/graphql-codegen-appsync-android-example/blob/master/README.md)
```shell
npm install -g yarn
yarn init --yes
yarn global add @graphql-codegen/cli graphql @graphql-codegen/java-apollo-android
```

## codegen.yml
```shell
api_id="something from above"
aws appsync list-api-keys --api-id $api_id | jq -r '.apiKeys[].id'
```
api_idはAppSyncからコピー。

## 生成
```shell
graphql-codegen --config codegen.yml
```

# フロントとバックエンドのデプロイ方法の違い
## フロント
Gitプッシュにて、CI/CD
## バックエンド
```shell
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 
1. いったん、バックアップフォルダへリネーム
1. 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であるため、
これをそのまま利用する。
```javascript
    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で「強力な整合性のある読み込み」が可能となる模様。ただし、ちょっとだけ料金が上がる（微差）。

```javascript
{
    fetchPolicy: "network-only"
}
```

## 参考
https://medium.com/r3-cloud-journey/aws-lambda-to-appsync-1aa0c2f1da04

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

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

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

# Amplify AuthのCognitoによるメール送信はSESへ置き換えると、CodeDeliveryFailureException
## 事前の変更作業
https://qiita.com/kita3222/items/bb466fa8beb780c0b3a1
## クラメソ記事
[Amazon Cognito でサンドボックス制限中の Amazon SES をメールプロバイダーとして設定していると CodeDeliveryFailureException が発生します](https://dev.classmethod.jp/articles/cognito-sandbox-ses-codedeliveryfailureexception/)