Open8

amazon chime sdk demoを作るぞ2022

cdkを使ってバックエンドを作る。その1(空のスタック作成まで)

https://docs.aws.amazon.com/cdk/v2/guide/getting_started.html

cdk initがempty folderでないとエラーが出る(以前から??)。なので、-gつけてaws-cdkをinstall

npm install -g aws-cdk

バックエンド用の作業フォルダに入って、cdk init

cdk init app --language typescript

以降、npm uninstall -g aws-cdkしてしまってもよさそう。ただし、その場合はnpx cdkで呼び出す必要がある。

cdkは、新しいリージョンで新しいアカウントを使う場合は、一度bootstrapを行う必要がある。同じリージョンで同じアカウントを使う場合は2回目以降は不要。

cdk bootstrap

空のスタックをデプロイ。

// npm run build < -- いらない。
npx cdk deploy

このときのスタック名は、bin/<作業フォルダ名>.tsに記載されているもの。基本は作業フォルダ名になる。

今回はbin/config.tsを新規に設置して、そこで定義するようにする。

デプロイされたスタックはcloudformationから確認できる。表示する際はリージョンを選択を忘れないように。一応、bootstrapで作成したs3バケットも確認しておくと良い。

今回は、ここまで。

cdkを使ってバックエンドを作る。その2(作業環境構築)

ファイルが散乱して気持ち悪いので、tsconfigにoutDirを追加。 (cdk initで作成されたpackage.jsonのbuildを実行しない場合はなくても良い。cdk deployはcdk.outに出力してくれる。)

        "outDir": "./dist"

作業用モジュールを追加

npm install -D rimraf npm-run-all

package.jsonのスクリプトを編集.

        "cdk": "cdk",
        "clean": "rimraf dist/*",
        "deploy": "cdk deploy --outputs-file cfn_outputs.json",
        "destroy": "cdk destroy",
        "install_lib": "cd lib/005_Lambda/layer/nodejs/ && npm install && cd -",
        "synth": "rimraf tmp_out/* && cdk synth -o tmp_out",
        "build_all": "run-s clean install_lib deploy"

注:

  • install_libはlambda layerのupdate.
  • synth はローカルでlambdaのコンパイル済みjsを作るためのコマンド(後述)

cdkを使ってバックエンドを作る。その3

もろもろstackを作る。
今回は、CDK v2を使用する。CDKv2はv1と異なり、サービスごとにモジュールを入れずに、aws-cdk-libだけinstallすればよいみたいだ。importするときは次のような感じ。

import { aws_lambda as lambda } from "aws-cdk-lib"

ふむ。これは楽だ。

Typescriptとトランスパイルしてバンドルするモジュールがあった。
aws_lambda_nodejsをインポートすれば、lamda functionと同じようにデプロイしてくれる。

import { aws_lambda_nodejs } from "aws-cdk-lib"

バンドルしたファイルはcdk.outのassetに出力される。ローカルで出力したい場合はcdk synthを使おう。出力先を分離するために、フォルダを指定しておくとよい。

"synth": "rimraf tmp_out/* && cdk synth -o tmp_out",

cdkを使ってバックエンドを作る。その4

大体がAPIのデバッグで嵌る。アクセス権で失敗しているとわけわからんメッセージとの戦いになり、かなりつらい。とりあえず、API Gatewayのログを見れるようにしておくとよい。

API Gatewayのログはこんな感じのフォーマットのパスに記述される。(ログを有効にする必要がある。)

/aws/apigateway/23cxxxxxx/Prod

23cxxxxはAPI GawatewyのID

例えば、アクセス権を失敗すると、こんな感じのメッセージがちょろっと出てくる。

(Sxxx) Sending request to https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/arn:aws:lambda:us-east-1:xxxx:function:<lambda-arn>/invocations
(Sxxx) Execution failed due to configuration error: Invalid permissions on Lambda function

この例ではlambda-arnに対するアクセス権が間違っていたようだ。とにかく分かりにくい。

で、今まさに嵌っている。
作成したポリシー&ロールはiamのコンソールから見られる。

→ 割り当てるロールが間違ってた。
統合リクエストのリンクから詳細を見て、実行ロールを確認する。
(WebsocketのAPIにRESTのロールを割り当てていた。。。)

→ 一定時間音声入力がないとmeeting roomが閉じられる。
この場合は、statementがdenyになる。

"Effect": "Deny",

Authorizerには下記のようなエラーがでる。

failed to authenticate with join token: Forbidden: Attendee <xxxxxxxxxxxxxxxxxxxxx> is not in the meeting <xxxxxxxxxxxxxxx>

#Frontend その1 CSSまわり。

Tailwind

・tailwindを使う。
・nested cssを使うためには、postcss.config.jsで下記"tailwindcss/nesting": {}の記述が必要。もしかしたら、npm install -D postcss-nestingが必要かもしれない(docには必要っぽいことが書かれているが、入れなくても大丈夫だった。daisyoを入れたので自動で入ってるのかも。)

module.exports = {
    plugins: {
        "tailwindcss/nesting": {},
        tailwindcss: {},
        autoprefixer: {},
    },
};

なお、vscodeで警告が出ないようにするには次の通りにする。参考
1.拡張機能language-postcssをインストール
2.preference設定。VSCode の Settings の Preferences から、設定用の json ファイルを開く。

{
  "files.associations": {
    "*.css": "postcss"
  }
}

Font

Google Font
cssにpoppinsを追加。

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap");

Base設定

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; // borderをwidth,heightに含める
    font-family: "Poppins", sans-serif;
}

#Frontend その2 font awesome

https://fontawesome.com/v5/docs/web/use-with/react
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/react-fontawesome
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
library.add(fas, far, fab);


<FontAwesomeIcon icon={["fas", "user-secret"]} />

#Frontend その3 cloudwatch log
FrontendからAPIをコールするときにAPI側のログが見たくなる。
コンソールからだとやりずらいので、CLIで見えるようにする。
まずはロググループを特定。プレフィクスはフォーマットが決まっているので適当に自分で作る。

$ aws logs describe-log-groups --log-group-name-prefix <prefix>
# prefix:  /aws/lambda/f-Backendxxx

正直、いろいろあると探しきれないので、コンソールから特定するのがよくある話。
ロググループを特定したら、次のコマンドでtail -f的なことができる。

$ aws logs tail --follow /aws/lambda/f-Backendxxxx-funcHelloWorldExCxxx3-7gk8nxxxxxxm

フロントエンドをdev serverで開発する

httpsを有効化するにはwebpack.config.jsに次を追加。

devServer: {
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true,
        port: 3000,
        https: true,
        client: {
            overlay: {
                errors: true,
                warnings: false,
            },
        },
    },

・オートフィルが使えない。
どうも保護されないページだとパスワードを保存してくれないようだ(chromeでは。ほかは知らない。)。chromeのローカルホストでの証明書エラーを無視する設定をしておく。なお、セキュリティ上問題があると思うので、開発するときだけ有効化するのが良いだろう。

⇒???保護されないエラーが出て改善しないな。。。関係あるかな?

https://stackoverflow.com/questions/71665828/chrome-update-version-99-0-4844-84-does-not-allow-insecure-content-from-localhos
ログインするとコメントできます