🔰 概要

LVLPATHの技術スタックは、ウェブアプリ作成時期やポートフォリオ作成時期や、個人開発などで少し参考になるかと思います。

作成者（まんじ）がアプリケーションレイヤーのソフトウェア開発しかできないので、インフラ側が適当（簡単な構成）です。

技術スタック

フロントエンド

• Next.jsをpages routerで使っています
• フロントエンドUIライブラリはMUI
• こういった文字のコンテンツは.mdファイルのマークダウンで記入したものをreact-markdownでMUIコンポーネントにしてそれがhtmlに変換されて表示されています
• SEOも意識しているのでSSRで全てのページをレンダリングしています
  • SSGでもいいと思うんですけど、実装するのがめんどいので現状はSSRにしてます

バックエンド

• Express（API）とMySQLが起動していますが、現状は特に使っていません
• 会員登録してCRUDなどの機能を追加する際には使う予定

インフラ

• さくらVPSのメモリ1GBにデプロイしています
• デプロイ方法は手動で、GHCR(GitHub Container Registry)からdocker imageをpullして、docker-composeで起動しています
  • GitHub Actions(CI/CD)でrelease/current branchにマージした時に自動でdocker image化してGHCRにpushしています
• VPS側ではポートをnginxのdocker containerでreverse proxy(docker-compose)で紐づけています

ローカル開発環境

• devcontainer(docker-compose & vscode)を利用して、mysqlとフロントエンド&サーバーサイドの環境を構築しています

これらの技術スタックを使っている理由

1: シンプルにまんじが普段から使う言語、フレームワークなため

• TypeScript
• React
• Express
• MySQL
  • Prisma
• devcontainer
• docker-compose

これらの技術スタックを2022年終わり頃からずっと使っているので、学習コストがほぼ0なのと、ローカル環境の準備からドメイン取得してデプロイまで4~5時間かからない程度ですぐ開発してデプロイできるってのも大きいです。

今まで作ってきた個人開発のプロジェクトのディレクトリやファイルをコピーして少し編集して終わりです。

ちなみにこれらの技術スタックは基本的には長期インターンをしてる頃に実務でお金をもらいながら実際に使うことで勉強しました。（MUIだけ自分で使い始めましたが、MUIも実務で使ってさらに使い慣れました）

2: 目的はコードや設計などではないため

まんじがLVLPATHで使っている技術スタックはインフラ側は、モダンなウェブ開発では使われません。

最近のSaaSなどではマイクロサービスアーキテクチャ（サービスごとに分割）などが利用されますが、そういったアーキテクチャを利用するのはユーザーなどが多くなってきてそこに工数やコストを割いても、費用対効果が合うから行うという側面があります。

なので、「必要最低限で良いし勉強するのもめんどくさいし開発に工数を割きたくないし現状VPSのシングルインスタンスで十分だから」というのがざっくりとした1番の理由です。

3: 作ることが目的ではないため

少し2と重複していますが、「コードを書いて、Pull Requestを作成してMergeすること」がLVLPATHを作るうえでの目的ではなくて、それが手段だからです。

ソフトウェアエンジニアで実務をしている時は「要件に基づいて全体像を意識しながら複数人で開発することを前提に期日までにコードを書いてPull Request出してMergeすること」が最も意識すべきことになりますが、自分のプロダクトの場合はコード側はあくまで手段でしかないのでどうでもいいというのが理由です。

LVLPATHの目的は必要な情報や手段を提供するなので、それに必要なことだけをやっています。

スケーラビリティなどを意識するフェーズになればそれらを意識し始めればいいだけという感じです。

MVP(Minimum Viable Product)ってやつカナー。

✅ 具体的なアクション

• LVLPATHのアーキテクチャや技術スタックなどを参考にして気になるトピックは調べたりウェブアプリ作成やポートフォリオ作成や個人開発で導入したりしてください