amazon chime sdk demoを作るぞ2022
cdkを使ってバックエンドを作る。その１（空のスタック作成まで）
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を行う必要がある。同じリージョンで同じアカウントを使う場合は２回目以降は不要。
cdk bootstrap
空のスタックをデプロイ。
// npm run build < -- いらない。
npx cdk deploy
このときのスタック名は、bin/<作業フォルダ名>.tsに記載されているもの。基本は作業フォルダ名になる。
今回はbin/config.tsを新規に設置して、そこで定義するようにする。
デプロイされたスタックはcloudformationから確認できる。表示する際はリージョンを選択を忘れないように。一応、bootstrapで作成したs3バケットも確認しておくと良い。
今回は、ここまで。
cdkを使ってバックエンドを作る。その２（作業環境構築）
ファイルが散乱して気持ち悪いので、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を使ってバックエンドを作る。その３
もろもろ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 その１ 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で警告が出ないようにするには次の通りにする。参考
１．拡張機能language-postcssをインストール
２．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 その２ font awesome
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のローカルホストでの証明書エラーを無視する設定をしておく。なお、セキュリティ上問題があると思うので、開発するときだけ有効化するのが良いだろう。
⇒？？？保護されないエラーが出て改善しないな。。。関係あるかな？