誰も興味ないサイトの紹介をする意義

仕事では主に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認証に変更してみる
• マイグレーションの設定をちゃんとやる

とか🤔🤔