domの操作をしていると、 「あれ、動かない、domの生成がまだ行われていない？ 試しに５秒待った後に実行してみよう」 みたいなことが良くある。 その都度、下記のように実行してきた。 window.setTimeout(() => { operation() }, 5000) という風に、setTimeoutの中に該当する関数を入れていく。 ただこれだと、入れるべき関数がたくさんあると面倒くさい。 そこで以降すべて５秒後に実行されるというワンライナーを覚えることにした。 それ以降の行はすべて５秒後に実行されますよっと await new Promise((resolve) => setTimeout(resolve, 5000)); ただこれだけのこと。 ただこれだとasyncをつけたメソッドを用意する必要があるけれど。
誰も興味ないサイトの紹介をする意義 仕事では主にAngular、Vue、Reactを使っているフロントエンドしかできない30歳が、インフラ～すべてに手を出してみた。 作成したはいいけど、12か月後、awsの無料枠終了を見据え、運用する気はない。 そこで、ひとつ記事にでも残しておこうという思いで筆を取ることにした。 作成したサービス Vote For Name-難読エンジニアワードの読み方を投票で決めよう 簡単なアンケートサイト。 アイデアに関しては、悲しいかな、特筆すべき点はない。 エンジニアリングするうえで、読み方がよくわからない言葉が良くあるので、それを投票で決めようといった魂胆。 競合とかは特に調べていない。 使用した技術 インフラ aws Lambda aws RDB aws API GateWay Vercel バックエンド NestJS TypeORM フロントエンド NextJS インフラ インフラは初めて、awsに手を出してみた。 永久無料枠がない従量課金制は初めてなので、請求に不安を感じる。 柔軟にスケールできていいのだろうけれど、スケールアップしないので、定額の方がうれしい。 まあ、いい勉強にはなった。 無料枠のよくわからないawsの無料枠について真剣に調べてみた CORSでクロスオリジンの設定をする際に、なんでドメインを絞り込む必要があるのか浅く理解した AWSのRDSに接続したいけど踏み台サーバーでうまく接続できなかったので、RDSをパブリックサブネットに置きHeidiSQLで接続を試みる バックエンド バックエンドにはNestJSを採用した。 理由は、フロントと言語を統一することで効率化を図れるという点と、学習コストが低そうだった点。 Angularに似ている言語ということで、普段Angularを業務利用している身としては、非常に手っ取り早く、概要をつかむことができた。 言語としての不満はなく、今後も使っていきたいと思ったが、いかんせん日本語の情報が少なく苦労した。 NestJSのエラーレスポンスをカスタマイズする NestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく LambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した フロント 迷うことなく、NextJSにした。 現在、個人開発をするとなったら、一択の選択肢かなと感じている。 ただ今回、Next13のAppDirにちょっと戸惑う点もあった。 SSRの書き方とかが簡略してていいと思う反面、サーバーコンポーネントとかの概念がいまだにつかみ切れていない。 それでも、引き続きNextJSを採用し続けると思われる。 フロントのサーバーはVercelにアップしたNextJS使うのであれば、第一の選択肢だろうし、実際そうなった。 エックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する このサービスの今後 awsの無料枠を終えた後も続けるメリットはないので、運用していく気はない。 ただせっかく勉強のために作ったので、無料枠を終えるまでは暇を見つけて、issueを解決していきたいと考えている。 isuue 動けばいいやという思いもありつくったので、細かい箇所を理解しつつ、ブラッシュアップしていきたい。 初回アクセス時Vercelがサーバーレス関数の発火をまたずにタイムアウトする。 CORSの設定をちゃんやる LambdaとGithubの連携をする JWT認証をCSRF認証に変更してみる マイグレーションの設定をちゃんとやる とか🤔🤔
個人開発でawsデビューをしたが、料金不安なので調べてみることにした。 正直開発したサービスがawsの何のサービスを使用しているかわからないので請求書ダッシュボードからあげだしてみた。 請求書ダッシュボードにあるデータ AWSの概要 アクティブなサービスの合計数：８ アクティブな AWS リージョンの合計数：５ アクティブなサービスの合計数が何かというのを調べるために、aws の請求 > 請求に行き、サービス別料金を見ると一覧で見れる。 アクティブなサービス 今回は下記を使用しているらしい。 API Gateway CloudWatch Data Transfer Elastic Compute Cloud Key Management Service Lambda Relational Database Service Simple Storage Service ぱっと見、知らないサービスもあったが、いったん寝かせておく。 アクティブな AWS リージョン 次にアクティブな aws リージョンの合計数について調べてみる。 調べた感じ利用できるリレージョンとのこと、つまり使用しているリレージョンではない。 つまり気にしなくていい。 awsの無料枠 AWSの無料枠は注意が必要。 というのも3パターンの無料枠がある。 無料トライアル 指定期間利用できる無料枠 12 か月間無料 AWS に最初にサインアップした日から 12 か月間無料で使用できるプラン 無料枠 有効期限はなく、AWS のすべてのお客様が利用可能 つまり上の２つは期限が過ぎれば支払いが発生する可能性がある。 また最後の１つも枠を超えれば、支払いが発生する可能性がある。 ただこちらは枠さえ守れば永久的に無料で使用することができる。 AWS 無料利用枠を参照することで無料枠を調査することができる。 これを用い、使用したサービスの無料枠を中心に見ていきたい。 今回使用したawsのサービスがどういう無料枠の形態を取っているか API Gatewayは12か月無料で以降は課金される。 CloudWatchは無期限無料で10 のカスタムメトリクスおよびアラームが無料とのこと カスタムメトリックスはユーザーが独自に定義し、収集、監視できるメトリックデータのこと アラームとは特定の条件が満たされた場合にユーザーに通知を送信するための仕組み Data Transferは記述がない。 使っているかもわからない Elastic Compute Cloud（EC2）は12か月無料で以降は課金される。 Key Management Serviceは無期限無料で20,000/月の無料リクエスト枠がある Lambdaは無期限無料で100 万/月の無料リクエスト枠がある Relational Database Serviceは12か月無料で以降は課金される。 Simple Storage Service（S3）は12か月無料で以降は課金される。 うーん、どうなんだろう 正直、釈然としない。...
本記事は不確かな情報が多く含まれる可能性がある 本職はフロントエンドエンジニアで、基本的に取得した情報に色をつけ表示させることで会社内での居場所を維持してきた。 ただ最近個人開発でバックエンドに触れることが増えセキュリティにも興味が出てきた。 ただ、まだまだ浅い理解しかない。 何が言いたいかというと、この記事は不確かな情報を含んでいる可能性があるということ。 浅く理解したくなったきっかけ 最近、個人開発ということでNestJSでAPIを作成した、 作成したAPIをLambdaに乗せ、カスタムドメインを設定せずに使用している。 そのため、CORSのクロスオリジンを指定する必要があった。 NestJSは一行ですべてのドメインに対しCORSを許可することができる。 開発環境ではそれでいいが、本番で運営するにあたり、許可するドメインを指定する必要がありそうだということを調べて知った。 しかし、なぜ？ という疑問が生じた。 いくら絞ったところでcurlコマンドで叩けるので別に絞る必要がないのでは？ という疑問を解決するために調べてみた。 CORSを指定しないことで考えられるセキュリティリスク クロスサイトリクエストフォージェリ（CSRF）攻撃 CSRFは悪意のある攻撃サイトにユーザーが訪問した際、意図しないリクエストがCSRFの脆弱性のあるウェブアプリケーションに投げられ、設定の変更や、強制投稿が行われるということ。 CSRF(Cross-Site Request Forgery)攻撃について このサイトが非常に参考になった。 CORSで防げる このサイトにあげられている下記のようなポイントのうち、 対象のWebサイトのユーザが、正規の手順でログイン済であることを前提とする 対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する 「対象のWebサイトが、設計上意図しない更新操作を受け付けてしまうことで攻撃が成立する」をCORSの設定で防ぐことができる。 悪意のあるサイトのドメインがCORSで許可されていなければ、いくらリクエストが飛ばされたところで問題ない。 そのため、CORSのドメインは信頼されたドメインに絞り込む必要がある。 そういうこと。
Row（行） 横方向を表す。 つまり、テーブルや行列などで、水平方向に並んでいる要素の集まり。 Col（列） 縦方向を表す。 つまり、テーブルや行列などで、垂直方向に並んでいる要素の集まり。 疑問 要素の集まりというのが肝な気がする。 それを考えると色々しっくりきた。 どうしっくりきたかの言語化はできない。 ので、以前の疑問を解消する形で言語化に近づけてみる。 4列シート 夜行バスの４列シートは横並びに４つシートが並んでいるという意味なので、４行シートではないのかという疑問が浮かんだ。 ただ１番前から見た時、垂直方向に並んでいる要素の集まりが４つある、つまり４列になる。 rowSpan これはHTMLのTableに関する属性で垂直方向のセルを結合する。いや垂直方向に結合するならColSpanではという疑問が浮かんだが、横並びの集まりを垂直方向に結合するのでRowSpanで正しい。 覚え方 ぱっと思い浮かばないので、 Row Gyo Yoko 🤙 というラップっぽく覚えることにした。