{
"$type": "site.standard.document",
"canonicalUrl": "https://blog.nove-b.dev//posts/rontend-engineer-aws-lambda-personal-project/index",
"path": "/posts/rontend-engineer-aws-lambda-personal-project/index",
"publishedAt": "2023-08-24T00:00:00.000Z",
"site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
"tags": [
"aws",
"lambda",
"個人開発"
],
"textContent": "誰も興味ないサイトの紹介をする意義\n\n仕事では主にAngular、Vue、Reactを使っているフロントエンドしかできない30歳が、インフラ~すべてに手を出してみた。\n\n作成したはいいけど、12か月後、awsの無料枠終了を見据え、運用する気はない。\n\nそこで、ひとつ記事にでも残しておこうという思いで筆を取ることにした。\n\n作成したサービス\n\n- Vote For Name-難読エンジニアワードの読み方を投票で決めよう\n\n簡単なアンケートサイト。\n\nアイデアに関しては、悲しいかな、特筆すべき点はない。\n\nエンジニアリングするうえで、読み方がよくわからない言葉が良くあるので、それを投票で決めようといった魂胆。\n\n競合とかは特に調べていない。\n\n使用した技術\n\n- インフラ\n - aws Lambda\n - aws RDB\n - aws API GateWay\n - Vercel\n- バックエンド\n - NestJS\n - TypeORM\n- フロントエンド\n - NextJS\n\nインフラ\n\nインフラは初めて、awsに手を出してみた。\n\n永久無料枠がない従量課金制は初めてなので、請求に不安を感じる。\n\n柔軟にスケールできていいのだろうけれど、スケールアップしないので、定額の方がうれしい。\n\nまあ、いい勉強にはなった。\n\n- 無料枠のよくわからないawsの無料枠について真剣に調べてみた\n- CORSでクロスオリジンの設定をする際に、なんでドメインを絞り込む必要があるのか浅く理解した\n- AWSのRDSに接続したいけど踏み台サーバーでうまく接続できなかったので、RDSをパブリックサブネットに置きHeidiSQLで接続を試みる\n\nバックエンド\n\nバックエンドにはNestJSを採用した。\n\n理由は、フロントと言語を統一することで効率化を図れるという点と、学習コストが低そうだった点。\n\nAngularに似ている言語ということで、普段Angularを業務利用している身としては、非常に手っ取り早く、概要をつかむことができた。\n\n言語としての不満はなく、今後も使っていきたいと思ったが、いかんせん日本語の情報が少なく苦労した。\n\nNestJSのエラーレスポンスをカスタマイズする\nNestJsで作成したプロジェクトをAWSのLambdaにあげて動かすまでの作業ログを残しておく\nLambdaにのせたNestJSでapp.enableCors();を指定しているのにCORSエラーがでたので解消するまでを記録した\n\nフロント\n\n迷うことなく、NextJSにした。\n\n現在、個人開発をするとなったら、一択の選択肢かなと感じている。\n\nただ今回、Next13のAppDirにちょっと戸惑う点もあった。\n\nSSRの書き方とかが簡略してていいと思う反面、サーバーコンポーネントとかの概念がいまだにつかみ切れていない。\n\nそれでも、引き続きNextJSを採用し続けると思われる。\n\nフロントのサーバーはVercelにアップしたNextJS使うのであれば、第一の選択肢だろうし、実際そうなった。\n\nエックスサーバーで借りたドメインのサブドメイン使用し、Vercelにカスタムドメインを設定する\n\nこのサービスの今後\n\nawsの無料枠を終えた後も続けるメリットはないので、運用していく気はない。\n\nただせっかく勉強のために作ったので、無料枠を終えるまでは暇を見つけて、issueを解決していきたいと考えている。\n\nisuue\n\n動けばいいやという思いもありつくったので、細かい箇所を理解しつつ、ブラッシュアップしていきたい。\n\n- 初回アクセス時Vercelがサーバーレス関数の発火をまたずにタイムアウトする。\n- CORSの設定をちゃんやる\n- LambdaとGithubの連携をする\n- JWT認証をCSRF認証に変更してみる\n- マイグレーションの設定をちゃんとやる\n\nとか🤔🤔",
"title": "フロントエンド専のエンジニアが見よう見まねでawsのLambdaを用いて個人開発をした"
}