```sh
yarn add @types/gtag.js
```

```sh
touch lib/gtag.ts
```

```sh
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env.sample
```

```gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string): void => {
  if (!GA_TRACKING_ID) return;
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};
```

Next.jsにGoogle Analyticsを導入する

非同期処理を挟み、`window.open()`を実行すると、ポップアップブロックに引っかかる。

（Reactで実装）

```ts
const handleClick = async () => {
  try {
    const url = await getURL() // 非同期処理
    open.window(url, '_blank')
  } catch (e) {
    console.error(e)
  }
}
```

とにかく別タブで開きたい。

## 回避策1

先に空のwindowを開き、後でurlを入れる。

errorなどでcloseなどを行う。

（手元のChrome,Safari,Edge,Firefoxでは機能した）

```ts
const handleClick = async () => {
  try {
    let openWindow = window.open('', '_blank')
    const url = await getURL() // 非同期処理
    openWindow.localtion.href = openWindow
  } catch (e) {
    openWindow.close()
    console.error(e)
  }
}
```

https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers#answer-25050893

## 回避策2

諦めて、処理を分ける。

```ts
const [targetURL, setTargetURL] = useState('')

const handleGenerateURL = async () => {
    try {
    const url = await getURL() // 非同期処理
    setTargetURL(url)
  } catch (e) {
    console.error(e)
  }
}

const handleClick = async () => {
  targetURL && window.open(targetURL, '_blank')
}
```

## 回避策3

`useEffect()`を使用して、`{ href && <a href={href} />}`のようにセットしておく

window.open時のポップアップブロックの回避

## エラー

```sh
Error reading configuration file '/Users/username/.ngrok2/ngrok.yml': `version` property is required.
```

## 解決方法

```sh
ngrok config upgrade
```

## 参考
- [ngrok agent Upgrade Guide | ngrok Documentation](https://ngrok.com/docs/guides/upgrade-v2-v3)

Error reading configuration file '/Users/username/.ngrok2/ngrok.yml': `version` property is required.

## 前提知識

CSRとは、サーバ証明書を発行するための署名要求（Certificate Signing Request）のこと。

公開鍵の情報とディスティングイッシュネーム（組織名や組織の所在地などの情報）が含まれる。

## 構成

```mermaid
sequenceDiagram
    participant React App
    participant Lambda Edge(Proxy)
    React App->>Lambda Edge(Proxy): Request
    Lambda Edge(Proxy)->>Server: Request
    Server-->>Lambda Edge(Proxy): Response
    Lambda Edge(Proxy)-->>React App: Response
```

LambdaEdgeとCloudfrontFunctionsはEdgeFunctionなので、環境変数などを重くなる処理に制限が掛けられている。単純なリクエストヘッダーの変更以外で、認証したりする場合は、普通のLambdaの方が良いかも？

## 秘密鍵・公開鍵とCSRの作成

opensslを使用する。

```bash
# 秘密鍵と公開鍵の作成
openssl genrsa 2048 > private_key.pem
openssl rsa -in private_key.pem -pubout > public_key.pem

# CSR発行
openssl req -new -key private_key.pem > development.csr
openssl req -new -key private_key.pem > staging.csr
openssl req -new -key private_key.pem > production.csr

# 確認する
openssl req -new -key public_key.pem > production.csr

# 確認
openssl req -text -in development.csr
openssl req -text -in staging.csr
openssl req -text -in production.csr
```

## AWS Proxyで証明書付きのリクエストを行う

Reactアプリ（クライアント）で直接、証明書付きのリクエストをしようとしても下記のエラーで実行できない。
(httpsモジュールはクライアントで実行できない)

> Uncaught Error: Module "https" has been externalized for browser compatibility and cannot be accessed in client code.

```js
import fs from 'fs'
import https from 'https'
import axios from 'axios'

axios({
  url: `https://localhost:8080/${route}`,
  method: "POST",
  data: formdata,
  httpsAgent: httpsAgent,
})
```

基本の型

```ts
var fs = require('fs'); 
var https = require('https');
var options = { 
    key: fs.readFileSync('server-key.pem'), 
    cert: fs.readFileSync('server-cert.pem'), 
    ca: fs.readFileSync('apig-cert.pem'), 
    requestCert: true, 
    rejectUnauthorized: true
};
https.createServer(options, function (req, res) { 
    res.writeHead(200); 
    res.end("hello world\n"); 
}).listen(443);
```

```ts
const withCA: axios.AxiosRequestConfig = {
  httpsAgent: new https.Agent({
    ca: [customRootCA],
  })
};
```

## Step1: シンプルなLambdaをデプロイする

```js
async function main(event) {
  console.log('domain 👉', process.env.DOMAIN)

  return {
    body: JSON.stringify({ message: 'SUCCESS 🎉' }),
    statusCode: 200,
  }
}

module.exports = { main }
```

## Step2: 必要な情報を渡す

- `domainName`
- `public.key`
- `development.crt`

## 参考

### CSR

- [秘密鍵、公開鍵、証明書、CSR生成のOpenSSLコマンドまとめ](https://blog.freedom-man.com/openssl-command)
- [Generate and configure an SSL certificate for backend authentication - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/getting-started-client-side-ssl-authentication.html)
- [node.js - How to configure axios to use SSL certificate? - Stack Overflow](https://stackoverflow.com/questions/51363855/how-to-configure-axios-to-use-ssl-certificate)
- [Axios (JS) を使用してクライアント側で相互 TLS を使用する — Smallstep](https://smallstep.com/hello-mtls/doc/client/axios)
- [既存のCDKプロジェクトをCDK v2.0 に移行する - Qiita](https://qiita.com/tmokmss/items/4213e997cbe1ea50ff98)
- [Fixing the Custom CA Problem in Node.js — Bossy Lobster](https://blog.bossylobster.com/2021/05/node-ca-append.html)

### Lambda

- [[AWS CDK] Lambda@Edge関数の作成または更新時に自動的に最新バージョンを発行し、CloudFront Distributionに紐付ける | DevelopersIO](https://dev.classmethod.jp/articles/aws-cdk-i-tried-linking-lambda-edge-to-cloudfront-distribution/)
- [Creating Lambda Functions in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-lambda-function-example)
- [Tutorial: Creating a simple Lambda@Edge function - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-how-it-works-tutorial.html)
- [AWS Lambda Proxy Integrationを試してみた - Qiita](https://qiita.com/_mogaming/items/2bd83204e212e35b2c6c)
- [Creating Lambda Functions in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-lambda-function-example)
- [Lambda@EdgeをCDKで書いてみる](https://zenn.dev/yizumi1012xxx/articles/9f4687ab9be52f)

### Lambda環境変数
- [How to pass Environment Variables to Lambda in AWS CDK | bobbyhadz](https://bobbyhadz.com/blog/environment-vars-lambda-cdk)
- [AWS CDKで別リージョンに基本認証用Lambda@Edgeを作成するスタックをデプロイしてAmazon CloudFrontに設定する - NRIネットコムBlog](https://tech.nri-net.com/entry/aws_cdk_cross_region_stack_deployment_lambda_edge)
- [AWS CDK で Typescriptで記述したLambdaをデプロイする方法](https://zenn.dev/taroman_zenn/articles/114579334a3d90)
- [How to get Secrets Manager Values in AWS CDK | bobbyhadz](https://bobbyhadz.com/blog/get-secrets-manager-values-aws-cdk)
- [AWS CDKでLambdaの環境変数と付き合う方法](https://jp.magicode.io/Sumiren/articles/857c7708e7094f68b47c72d4b4f312ff)
- [AWS CDK で特定の Secret ID を持つ Secret へのアクセス許可を与える · tblog](https://tblog.acomagu.me/6p2/)
- [AWS CDK で TypeScript な Lambda をデプロイしたい - かもメモ](https://chaika.hatenablog.com/entry/2022/05/27/083000)

## APIGateway

- [API Gateway Example in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-api-gateway-example)
- [serverless/README.md at main · cdk-patterns/serverless](https://github.com/cdk-patterns/serverless/blob/main/the-waf-apigateway/README.md)
- [CDK を使用した AWS API ゲートウェイ](https://rahullokurte.com/aws-api-gateway-using-cdk)
- [amazon web services - How get path params in CDK + APIGateway + Lambda - Stack Overflow](https://stackoverflow.com/questions/69403579/how-get-path-params-in-cdk-apigateway-lambda)
- [class LambdaRestApi (construct) · AWS CDK](https://docs.aws.amazon.com/cdk/api/v1/docs/@aws-cdk_aws-apigateway.LambdaRestApi.html)

### WAF

5分間で100回APIリクエストしたIPに対して、ブロックする。

```ts
rules: [
  {
    statement: {
      rateBasedStatement: {
        limit: 100,
        aggregateKeyType: 'IP',
      },
    },
    ],
```

- [インターフェイス RateBasedStatementProperty · AWS CDK](https://docs.aws.amazon.com/cdk/api/v1/docs/@aws-cdk_aws-wafv2.CfnWebACL.RateBasedStatementProperty.html)
- [[AWS CDK] API Gateway(REST API)のCORSの動作を確認してみた | DevelopersIO](https://dev.classmethod.jp/articles/cors-on-rest-api-of-api-gateway/)
- [[AWS CDK] APIGateway+WAFv2 Web ACL構成でデプロイしようとしてちょっとハマった点](https://zenn.dev/dyoshikawa/articles/ac3109e2296628)
- [node.jsでAWS IoTにクライアント証明書でHTTPS送信する - たそらぼ](https://tasotasoso.hatenablog.com/entry/2019/01/22/215242)
- [Node.jsでサーバ証明書の情報を取得したい](https://yoshinorin.net/articles/2020/02/29/nodejs-server-cert/)
- [クライアント証明書による認証の証明書を動的に変更するぞ - Qiita](https://qiita.com/seiketkm/items/3482b7a01f8917dccd4a)

## メモ

- `NodejsFunction`の`code`は、ファイル名まで指定する。
- LambdaEdgeは、`../src`のようにindex.jsがあるディレクトリを指定すれば良い。

`aws_lambda_nodejs.NodejsFunction `と`lambda.Function`と、`Lambda@Edge`の違い

- LambdaEdgeを削除できなかったので、[AWS CDKで構築したLambda@Edge関数を削除する際の注意点 | DevelopersIO](https://dev.classmethod.jp/articles/deleting-lambda-edge-built-with-aws-cdk/)で対策する。
- `aws-cdk-lib`と`@aws-cdk/〇〇`を併用して使っていると謎エラーが発生するので、注意。[AWS CDKのパッケージのバージョンはCDKプロジェクト内で揃えるようにしよう! | DevelopersIO](https://dev.classmethod.jp/articles/align-the-versions-of-aws-cdk-modules-in-the-same-cdk-project/)
- cdk deploy時にDocker周りのエラーが発生していたが、再起動すると消えた。
- [【詳解】クライアント証明書 認証を実装しながら理解する – 前編：概要～証明書作成編 | 煎茶](https://www.simpletraveler.jp/2021/09/23/client-certificate-authorization-part1-overview-certificate-creation/)

AWS Lambda と React App で CSR付きリクエストを行う

## Gitのバージョンアップ

```sh
git --version

brew install git

git --version
```

## Gitのデフォルトブランチ名をmain変更

```sh
git config --global init.defaultBranch main
```

## ユーザー設定

```bash
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
```

## alias設定

```bash
# system
git config --system alias.co checkout
git config --system alias.br branch
git config --system alias.cm commit
git config --system alias.st status
# global
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm commit
git config --global alias.st status
# local
git config --local alias.co checkout
git config --local alias.br branch
git config --local alias.cm commit
git config --local alias.st status
```

## config確認

```bash
# local
cat {repo}/.git/config
# global
/Users/user/.gitconfig
# system
cat /usr/local/etc/gitconfig
```

### .gitconfigが無い場合

```bash
rm ~/.gitconfig
touch ~/.gitconfig
```

## リモートリポジトリの確認

```bash
git remote -v
```

追加

```sh
git remote add origin {url}
```

変更

```sh
git remote set-url origin {url}
```

## ローカルの直前コミットを戻す

```bash
git reset --soft HEAD^
```

合わせて、ステージを戻す

```bash
git reset
```

## リモートの直前コミットを戻す

```bash
git reset --hard HEAD^
```

```bash
git push origin +master
git push origin +develop
```

上記は履歴が残らないので、履歴を残したい場合は、`revert`を使いましょう。

commitとは逆順番で実行する。

## マージ済ブランチの削除

```bash
git branch -D `git branch --merged | grep -v \* | xargs`
```

## 特定のコミットを打ち消す

ログを調べて、コミットのハッシュを特定する。

```bash
git log
tig
```

```bash
git revert {ハッシュ値}

# merge commitのrevert
git revert -m 1 {ハッシュ値}
```

```bash
git revert --continue
```

## ブランチ名の変更

```bash
git branch -m <古いブランチ名> <新しいブランチ名>
git push origin :<古いブランチ名> # ついでに削除
```

## unstagedファイルを削除

```bash
git clean
git clean -f # 強制
git clean -df # ディレクトリも含める
```

## 特定のファイルを特定のコミットに戻す

```bash
git checkout [コミット番号] [ファイルパス]
```

## GitHub SSH接続

- SSHキーを作成し、`~/.ssh/config`に記載、GitHubにSSH公開鍵を設定する。

## GitHub でパスワードを変更した後
```bash
git config --global user.name <username>
git pull # なんでも良い
```

を実行し、パスワードを聞かれるので、入力する。

## Personal Access Token設定後のMac設定

```bash
 $ git credential-osxkeychain erase ⏎
 host=github.com  ⏎
 protocol=https   ⏎
 ⏎
 ⏎
```

```bash
git fetch
```

[How do you reset the stored credentials in 'git credential-osxkeychain'?
](https://stackoverflow.com/questions/11067818/how-do-you-reset-the-stored-credentials-in-git-credential-osxkeychain)

## credential-osxkeychainの設定

```bash
git credential-osxkeychain
```

認証アシスタントがインストールされていない場合は、以下の内容が表示されます。

```bash
git: 'credential-osxkeychain' is not a git command. See 'git --help'.
```

この時点で、認証アシスタントを正しいパスにダウンロードすることができます。

```bash
curl -s -O http://github-media-downloads.s3.amazonaws.com/osx/git-credential-osxkeychain
chmod u+x git-credential-osxkeychain
mv git-credential-osxkeychain /usr/local/bin
```

インストール後、オープン認証アシスタントの設定を行います。

```bash
git config --global credential.helper osxkeychain
```

[GitHub for Mac error: git: 'credential-osxkeychain' is not a git command](https://stackoverflow.com/questions/13661354/github-for-mac-error-git-credential-osxkeychain-is-not-a-git-command/55060030)

## Rebase
```sh
git rebase [つなぐ元にするブランチ名]
git rebase origin/[つなぐ元にするブランチ名]
# コンフリクト解消
git rebase --continue
```

## 元ブランチの確認

```sh
git show-branch
```

## git blame
行ごとに差分を見る

```
git blame <paths>
```

## 大文字と小文字のファイル検知

```
$ git config -l --local | grep core.ignorecase
core.ignorecase=true
これをfalseにしてあげたらOK.

$ git config core.ignorecase false
```

## Tagの利用

```
git tag v1.0.0
git push --tags
```

```bash
git tag v1.0.0
git push origin v1.0.0
```

localにあるすべてのtagが更新されてしまうので、ちゃんと絞って実行する。

package.jsonのバージョンも変えないと、packageは、publishされない。その場合は、`yarn version`コマンドを叩く。

[yarn version | Yarn](https://chore-update--yarnpkg.netlify.app/ja/docs/cli/version)

```bash
yarn version
# input next version (X.X.X)

git push origin vX.X.X
```

## git管理から削除

```bash
git rm client/.env
```

削除

```
git tag -d v2.1.0
```

## 直前のコミットの修正

```sh
git commit --amend -m "修正するコメント"

```

## コンフリクトの解消

```bash
git merge --continue
```

## rebaseの取り消し

```bash
git rebase --abort
```

[git - Completely cancel a rebase - Stack Overflow](https://stackoverflow.com/questions/22289345/completely-cancel-a-rebase)

## git commitをまとめる

```
git status -s
```

[git commit --amendで3つのコミットを1つのコミットにまとめる - Qiita](https://qiita.com/suin/items/9300a7ce8d8e595bec09)

```bash
git reset --soft @~2
git add .
git commit --amend -m "fix ----"
# or
git commit --amend --no-edit
```

[git--amend--no-edit拒否されたプッシュ-スタックオーバーフロー](https://stackoverflow.com/questions/49114137/git-amend-no-edit-rejected-push)

pushがrejectされる場合

```bash
git push -f origin head
```

## git show

```bash
git show
```

## pullとpushが被ってしまった場合

```bash
git reset --hard HEAD~
```

## 特定のブランチから別のブランチにpushする

actionでデプロイする時とかに便利だったり

```
git co feature/xxx # deployしたいブランチ
git push -f origin HEAD:feature/zzz
```

削除されたブランチも含めて

```bash
git fetch --prune
```

## cherry-pick

```bash
git cherry-pick <HASH>
```

Gitの使い方まとめ

```js
const arr = [
  {
    id: 1,
    age: 18
  },
  {
    id: 2,
    age: 20
  }
];

// idが消える
const output = arr.map(({ id, ...a }) => a);
console.log("output:", output);
```

[javascript - スプレッド演算子からプロパティを削除するには? - スタックオーバーフロー](https://stackoverflow.com/questions/56155922/how-to-delete-property-from-spread-operator)

[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Rest_in_Object_Destructuring)

JS Objectの配列から特定のKeyを消す

## アップデート可能なパッケージの確認

```bash
npm outdated
```

[npm-outdated | npm Docs](https://docs.npmjs.com/cli/v8/commands/npm-outdated)

## 個別でアップデート

```bash
yarn add <package>
```

## 全体をアップデート

```bash
npx -p npm-check-updates  -c "ncu" # 確認
npx -p npm-check-updates  -c "ncu -u" # アップデート
yarn install
```

## インタラクティブにアップデート

```bash
yarn upgrade-interactive
# or
yarn upgrade-interactive --latest
```

[yarn upgrade | Yarn](https://chore-update--yarnpkg.netlify.app/ja/docs/cli/upgrade)

## 参考記事

- [package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】 - Qiita](https://qiita.com/sugurutakahashi12345/items/df736ddaf65c244e1b4f)
- [yarn upgrade | Yarn](https://chore-update--yarnpkg.netlify.app/ja/docs/cli/upgrade)

npmパッケージの更新と確認

- useMemo使う

https://interrupt.co.jp/blog/entry/2021/02/26/130428

React 絶対に再レンダリングしたくない

React　で list 表示をする際には、keyを設定し、その値で rendering の挙動を変えています。

useState で配列が頻繁に変更される場合に、index を使用する場合 rendeing　の挙動がおかしくなります。そのため各要素に緩いユニークを付与します。

```ts
const createId = (): string => {
  const tmpId: string = new Date().getTime().toString(16)
  return `list-${tmpId}`
}

createId()
```

[リストと key – React](https://ja.reactjs.org/docs/lists-and-keys.html#keys)

## 処理が重複する可能性ある場合は、uuidを使う

例)チャット

```ts
import { v4 as uuid } from 'uuid'
uuid()
```


React の List 表示のために緩くユニークなIDを作成する

## 動機・概要

外部アプリケーションとの連携で使用する

```mermaid
flowchart LR
    A["API Geteway"]-->B["トークンベース認証"]-->C["AWS Lambda"]
```

## インストール

macOSにインストール

```bash
brew install docker
brew tap aws/tap
brew install aws-sam-cli
```

```bash
sam --version
> SAM CLI, version 1.36.0
```

```bash
brew upgrade aws-sam-cli
```

## プロジェクトの作成

```bash
sam init
```

✅ TypeScriptのTemplateがあったので、選択する。（これにてTypeScriptの設定は完了）

```bash
...省略
AWS quick start application templates:
	1 - Hello World Example
	2 - Hello World Example TypeScript
	3 - Step Functions Sample App (Stock Trader)
	4 - Quick Start: From Scratch
	5 - Quick Start: Scheduled Events
	6 - Quick Start: S3
	7 - Quick Start: SNS
	8 - Quick Start: SQS
	9 - Quick Start: Web Backend
```

## 権限の付与

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-permissions.html

```
AWSCloudFormationFullAccess
IAMFullAccess
AWSLambda_FullAccess
AmazonAPIGatewayAdministrator
AmazonS3FullAccess
AmazonEC2ContainerRegistryFullAccess
```

## 開発環境で起動する

templateからプロジェクトを作成すると、`hello-words`が作成される

```bash
cd hello-words && yarn install # 実行しないと sam build で esbuild でエラーになる
sam build
```

### コードの変更

Hot Reloadはなかったので、`sam build`を再実行する必要がある。
（`sam build --beta-features`でyesを選択すると、作成したfuntionに対してesbuildを実行してくれるので、`yarn compile`の実行の必要なさそう）

```bash
sam build

> You can also enable this beta feature with 'sam build --beta-features'
yes

Running NodejsNpmEsbuildBuilder:CopySource
Running NodejsNpmEsbuildBuilder:NpmInstall
Running NodejsNpmEsbuildBuilder:EsbuildBundle
```

```bash
sam build --beta-features
```

### 起動

```bash
sam local start-api
> localhost:3000 で起動する
```

## event.json

## localでenvの設定

```bash
sam local invoke --env-vars env.json
```

```json
{
  "MyFunction1": {
    "TABLE_NAME": "localtable",
    "BUCKET_NAME": "testBucket"
  },
  "MyFunction2": {
    "TABLE_NAME": "localtable",
    "STAGE": "dev"
  }
}
```

```template.yml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

# More info about Globals: https://github.com/awslabs/serverless-application-model/blob/master/docs/globals.rst
Globals:
  Function:
    Runtime: nodejs10.x
    Handler: index.handler
    Timeout: 10
    MemorySize: 1024
    Environment:
      Variables:
        DYNAMO_ENDPOINT: DUMMY_ENDPOINT

Resources:
  A001:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: ../build/A001/
      Events:
        HelloWorld:
          Type: Api
          Properties:
            Path: /groups
            Method: GET
      Environment:
        Variables:
          TABLE_GROUP_WORDS: DUMMY_GROUP_WORDS
```

- [AWS SAMの環境変数設定方法 - Qiita](https://qiita.com/wwalpha/items/d28d053f5797f39bde4b)
- [関数のローカルでの呼び出し - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-using-invoke.html)

invoke: 呼び出しの意味

## まとめ

```bash
sam build
sam local invoke --env-vars env.json
sam local start-api
```

```bash
sam local start-api --env-vars env.json
```

表示されるようになった

```ts
const privateKey = process.env.PRIVATE_KEY;
console.log('privateKey:', privateKey)
> AAAAAAA
```

template.ymlを変更したら、`sam build`

ソースコードを変更したら、`sam build --beta-features`

envを渡したい場合は、`--env-vars env.json`をつける。

## Lambda認証

1.トークンベース(通常Bearerトークンが設定されるヘッダーです。)
2.リクエストパラメータベース

認証情報に複数の値は使用しないので、トークンベース認証で実装してみる。

- [Lambda オーソライザーの例 - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-controlling-access-to-apis-lambda-authorizer.html)
- [Lambdaオーソライザーのトークンベースとリクエストパラメータベースの挙動を比べて、どちらを選択するべきか考えてみた | DevelopersIO](https://dev.classmethod.jp/articles/lambda-authorizer-toke-request/)
- [CDK(TypeScript)でAPIにLambdaオーソライザーを適用してみた | DevelopersIO](https://dev.classmethod.jp/articles/add-lambda-authorizer-to-cdk-typescript/)
- [AWS SAMでLambdaオーソライザーを「適用するAPI」と「適用しないAPI」を作ってみた | DevelopersIO](https://dev.classmethod.jp/articles/aws-sam-api-gateway-lambda-authorizer/)

ローカルではサポートされていないので、デプロイして確認する。
（[localhost - SAM Local doesn't appear to be running Authorizer functions - Stack Overflow](https://stackoverflow.com/questions/57632539/sam-local-doesnt-appear-to-be-running-authorizer-functions)から）

```bash
sam deploy --guided

# aws credentialsの設定をしていない場合は、
aws configure
```

## Secret Managerを使う

トークン認証用のSECRETを作成する。

```bash
openssl rand -hex 32
```

- [How to use AWS secret manager and SES with AWS SAM | by Sandeep Kumar | Nerd For Tech | Medium](https://medium.com/nerd-for-tech/how-to-use-aws-secret-manager-and-ses-with-aws-sam-a93bb359d45a)
- [AWS Secrets ManagerでEC2キーペア秘密鍵の安全な受け渡しを管理してみる | DevelopersIO](https://dev.classmethod.jp/articles/managing-keypairs-with-secrets-manager/)
- [amazon web services - How to normalize a private key stored on AWS secrets manager - Stack Overflow](https://stackoverflow.com/questions/58436229/how-to-normalize-a-private-key-stored-on-aws-secrets-manager)

```
aws secretsmanager create-secret \
    --name 'private-key' \
    --secret-binary file://./private-key.pem

aws secretsmanager get-secret-value \
  --secret-id private-key
```
aws secretsmanager get-secret-value \
  --secret-id private-key

## Corsの回避

```yml
Globals:
  Function:
    Timeout: 3
  Api:
    Cors:
      AllowOrigin: "'*'"
      AllowMethods: "'OPTIONS,POST'"
      AllowHeaders: "'Content-Type,X-CSRF-TOKEN'"

Resources:
  ExampleFunction:
    Type: AWS::Serverless::Function # More info about Function Resource: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
    Properties:
      CodeUri: app/
      Handler: app.lambdaHandler
      Runtime: nodejs14.x
      Architectures:
        - x86_64
      Environment:
        Variables:
          PRIVATE_KEY: PRIVATE_KEY
      Events:
        RootEndpoint:
          Properties:
            Method: any
            Path: /
          Type: Api
        EverythingElse:
          Properties:
            Method: any
            Path: /{proxy+}
          Type: Api
```

responseにも設定してみた

```ts
response = {
    statusCode: 200,
    body: JSON.stringify({
        token: token,
    }),
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'OPTIONS,POST',
    },
};
```

`AddDefaultAuthorizerToCorsPreflight: false`と下記の設定を行う。

```yaml
  Api:
    Cors:
      AllowOrigin: "'*'"
      AllowMethods: "'OPTIONS,POST'"
      AllowHeaders: "'Origin, X-Requested-With, Content-Type, Accept,
```

[express - Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response - Stack Overflow](https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr)

responseにもくっつける

```ts
    const headersOption = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
        'Access-Control-Allow-Methods': 'POST,OPTIONS',
    };
```

## Warningの回避

```
Your template contains a resource with logical ID "ServerlessRestApi", which is a reserved logical ID in AWS SAM. It could result in unexpected behaviors and is not recommended.
```

```
botocore.exceptions.NoCredentialsError: Unable to locate credentials
```

```bash
aws configure
```

でconfigurationを設定する

### samの検証

```
sam validate --profile=${PROFILE}
```

## Preflight Request

Preflight request (プリフライトリクエスト)に関しては、SAMでAPI Gateway認証をする場合は、設定をfalseにするのが良さそう。

Corsについては下記記事がすごく分かりやすかった

[なんとなく CORS がわかる...はもう終わりにする。 - Qiita](https://qiita.com/att55/items/2154a8aad8bf1409db2b)

## Templateを指定してデプロイ

templateとSecret Managerを使用して、環境別のSecret類を管理するのが楽だと感じた。

```bash
sam deploy -t ./template.yaml
sam deploy -t template.production.yaml
```

### envを渡す場合

下記のように設定すると、`sam deploy`時にenvを渡すことができる。

```yaml
Globals:
  ...
Parameters: # 👈
  SecretMangerId:
    Type: String
    Description: Secret Manager ID
    Default: staging/my-secret
  Origin:
    Type: String
    Description: Origin
    Default: http://localhost:3000

Resources:
  AuthorizerFunction:
    Properties:
      Environment: # 👈
        Variables:
          SECRET_MANAGER_ID: !Ref SecretMangerId
          ORIGIN: !Ref Origin
```

`sam deploy`の具体的なコマンドはこちら

```bash
SECRET_MANAGER_ID="staging/my-secret"
ORIGIN="http://localhost:3000"
sam deploy --force-upload --parameter-overrides SecretMangerId=$SECRET_MANAGER_ID Origin=$ORIGIN
```

Lambda内での取得。dotenvなどはinstallする必要はなかった。

```ts
const origin = process.env.ORIGIN;
const secretManagerId = process.env.SECRET_MANAGER_ID;
if (!origin || typeof origin !== 'string') {
  throw new Error('ORIGIN is not defined');
}
if (!secretManagerId || typeof secretManagerId !== 'string') {
  throw new Error('SECRET_MANAGER_ID is not defined');
}
```

aws-sdkでsecretManagerIdを引数に渡すときになぜかエラーが発生したので、`toString()`を使用した。

```ts
import * as AWS from 'aws-sdk';

export const secretsManagerClient = async (secretManagerId: string) => {
    try {
        const secretsManager = new AWS.SecretsManager({
            region: 'us-east-1',
        });
        const response = await secretsManager
            .getSecretValue({
                // NOTE: toString()をつけないと { message: 'Invalid name. Must be a valid name containing alphanumeric characters, or any of the following: -/_+=.@!' } が返ってくる
                SecretId: secretManagerId.toString(), // 👈　ここ
            })
            .promise();
        if ('SecretString' in response) {
            return response.SecretString;
        } else {
            throw new Error('Decrypting secrets failed');
        }
    } catch (err) {
        return JSON.stringify({ err }, null, 2);
    }
};
```

## Option系

```yaml
            # Cache Time to live in seconds
            # https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-property-api-lambdatokenauthorizationidentity.html
            Identity:
              ReauthorizeEvery: 0
```

## Corsの設定

[CorsConfiguration - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-property-api-corsconfiguration.html)

## ドキュメント

- [関数 - Lambda](https://us-east-1.console.aws.amazon.com/lambda/home?region=us-east-1#/functions)
- [AWS SAM CLIでTypeScriptがネイティブサポートされました (パブリックプレビュー) | DevelopersIO](https://dev.classmethod.jp/articles/typescript-native-support-in-the-aws-sam-cli/)
- [macOS への AWS SAM CLI のインストール - AWS Serverless Application Model](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-mac.html)
https://github.com/aws/aws-sam-cli/issues/437
- https://qiita.com/subaru44k/items/fc114109f21d41243988

## メモ
- stacknameが同じ場合、上書きされるので注意

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/sam-cli-command-reference-sam-deploy.html#w4076aac38c11c12c25

AWS SAM 使って Lambda をデプロイする with TypeScript

```.env.development
REACT_APP_AUTHORIZATION_TOKEN=""
REACT_APP_LAMBDA_URL=""
```

- `.env.development`
- `.env.staging`
- `.env.production`

というenvファイルがある。yarn dev時には、`env.development`が適用され、build時には`.env.production`が問答無用で適用されていた。

下記のような npm scriptを書くと、解決できた。

```json
"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:dev": "yarn tsc && yarn test && REACT_APP_ENV=development yarn build",
  "build:staging": "yarn tsc && yarn test &&  REACT_APP_ENV=staging yarn build",
  "build:prod": "yarn tsc && yarn test &&  REACT_APP_ENV=production yarn build",
},
```

https://stackoverflow.com/questions/42458434/how-to-set-build-env-variables-when-running-create-react-app-build-script

React ScriptでBuild時に環境ごとのenvを適用させる

## 前提

- 開発環境のsupabase環境はできている
- GCPでプロジェクトを作成している

## 方法

`/supabase/config.toml`で設定する

```toml
[auth.external.google]
enabled = true
client_id = YOUR_GOOGLE_CLIENT_ID
secret = YOUR_GOOGLE_SECRET
```

承認済みのリダイレクト URIは、`http://localhost:54321/auth/v1/callback`を指定する。

## 参考
- https://supabase.com/docs/guides/auth/auth-google
- https://github.com/supabase/supabase/discussions/2818

Supabase 開発環境でGoogleログイン

## SQL

`gears`というテーブルに`updated_at`カラムを追加する。
追加時に現在時刻が入り、全てのROW更新時に自動的に`updated_at`に更新時刻が入るようにする。

```sql
ALTER TABLE IF EXISTS public.gears
    ADD COLUMN updated_at timestamp with time zone DEFAULT now();
create extension if not exists moddatetime schema extensions;
CREATE TRIGGER handle_updated_at
    BEFORE UPDATE 
    ON public.gears
    FOR EACH ROW
    EXECUTE FUNCTION extensions.moddatetime('updated_at');
```

http://localhost:54323/project/default/sql

のSQLエディタで実行する。

## Migration

```bash
# remote db と差分の確認
supabase commit changes
# migration の作成
supabase db commit add_updated_at_to_gears
# remote db に反映する
supabase db push
```

※remote dbが設定してあること

本当は、mainブランチにマージ時に実行するのが良いかもしれない。

## Error

```
Error: ERROR: must be owner of table genres (SQLSTATE 42501); while executing migration 20220622150744
```

`supabase db commit`時に権限のエラーが発生する場合は、

remote db で

```sql
ALTER ROLE postgres SUPERUSER
> success. No rows returned
```

を実行する。

実行した後は、

```sql
ALTER ROLE postgres NOSUPERUSER
> success. No rows returned
```

（で戻した方が良いかも？）

## 型の更新

openapiで型生成しているので、実行しておく。

```bash
npx openapi-typescript '${PROJECT_URL}/rest/v1/?apikey=${ANON_API_KEY}' --output types/supabase.ts
```

で更新しておく。


supabase updated_at カラムの追加

## Pairで作る

```
openssl ecparam -genkey -name prime256v1 -noout -out ec256-key-pair.pem
```

https://notes.salrahman.com/generate-es256-es384-es512-private-keys/

## 別々で作る

```bash
openssl ecparam -genkey -name prime256v1 -noout -out ec_private.pem
openssl ec -in ec_private.pem -pubout -out ec_public.pem
```

https://cloud.google.com/iot/docs/how-tos/credentials/keys

es256のpemを生成する

- npxで実行すると便利
- packageに含めたくない場合に便利

```bash
npx sort-package-json
```