フロントエンド専のエンジニアが見よう見まねでawsのLambdaを用いて個人開発をした
誰も興味ないサイトの紹介をする意義 仕事では主に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認証に変更してみる マイグレーションの設定をちゃんとやる とか🤔🤔