ホームページ > ウェブフロントエンド > jsチュートリアル > ENTスタック:5にフルスタックWebアプリを構築するための重要な決定

ENTスタック:5にフルスタックWebアプリを構築するための重要な決定

Patricia Arquette
リリース: 2025-01-30 00:36:09
オリジナル
826 人が閲覧しました

スケーラブルなフルスタックWebアプリケーションの構築には、最初から慎重な計画と戦略的決定が必要です。 フレームワークの選択から認証まで、すべての選択は、コスト、スケーラビリティ、および適応性に影響を与えます。 この記事では、Express、next.js、およびtrpc。

The ENT Stack: Key Decisions for Building a Full-Stack Web App in 5

ENTスタックは、独立した展開を許可しながら、バックエンドとフロントエンドの間でコードを共有する単一の展開可能なプロジェクトであることを目指しています。 費用対効果のために設計されています(最初は低コストのVPSで実行されています)が、将来の成長を処理するスケーラビリティを備えています。 費用のかかるリファクタリングを回避するために、フレームワークの選択、プロジェクト構造、APIレイヤー、環境と構成、データベース、認証と認証、認証とエラー処理、国家管理、国際化(I18N)、ロギング、郵送などの13の重要な領域にわたって、重要な決定が13の重要な領域にわたって構成されました。 、テスト、およびdevOps。

ENTスタックは、GitHubのモノレポとして、およびプロジェクトの足場を簡単にするためのNPMパッケージとして利用できます。

    githubリポジトリ
  • npmパッケージ
  • クイックスタートガイド
  • ドキュメント
(2025年であり、私たちの技術スタックを再訪することは実質的に毎年の儀式です!)

主要なアーキテクチャの決定の概要を次に示します

1。フレームワークの選択

BackEnd(Express):
  • frontend(next.js):Reactの人気とNext.Ext.JSの堅牢な機能、強力なコミュニティサポート、Vercelによる支援により、長期的な実行可能性と開発者のアクセシビリティが保証されます。
  • 2。プロジェクト構造(PNPM付きモノレポ)
  • PNPMワークスペースを使用したモノレポ構造は、バックエンドとフロントエンド間のコード共有を促進し、糸またはNPMワークスペースよりも速度とシンプルさを提供します。 ディレクトリ構造は、次のように編成されています 3。 APIレイヤー(TRPC)
  • TRPCは、開発者に優しいアプローチとエンドツーエンドタイプの安全性のために、RESTおよびGRAPHQLよりも選択されました。 next.jsおよびtanstackクエリとのシームレスな統合は、ボイラープレートを最小限に抑え、タイプの推論を強化します。

    4。環境と構成(T3 Env、ESM、Tailwind)

    T3 Envは、環境変数の静的検証を保証します。 カスタム構成クラスは静的設定を管理し、ESM(ECMAScriptモジュール)はバックエンドとフロントエンドの間のコード共有をサポートします。 Tailwind CSSは、フロントエンドのスタイリングに使用されます

    5。データベース(Drizzle ormを備えたmysql)

    信頼性とトランザクション保証のために、酸に準拠したMySQLデータベースが選択されました。 Drizzle ORMは、データベースの相互作用に対する軽量のタイプセーフアプローチを提供します。

    6。認証と承認(パスワードレス、ルートレベルの保護)

    カスタムパスワードレス認証システムは、柔軟性と制御を提供します。 基本的なフロントエンドルートレベルの保護は、ルートの定義の

    フラグを使用して実装されています。 protected 7。検証とエラー処理(ZOD、TRPC Errorformatter、Sonner)

    ZODは入力検証を処理しますが、TRPCの

    はエラー処理を標準化します。 ソナートーストはユーザーにエラーを表示します。カスタム

    は、明示的なエラー処理を保証します errorFormatter 8。国家管理(Zustand、Tanstack Query)ErrorService

    Zustandはシンプルで同期的なグローバル状態を管理しますが、Tanstackクエリは非同期状態管理を処理します。

    9。 Internationalization(I18N)(INTL-MESSAGEFORMATを使用したカスタムソリューション)

    ICU構文を使用したスタンドアロン型タイプスクリプト関数を使用したカスタムI18Nソリューション(

    を介して)は、タイプの安全性と自動ツリーシェーキングを提供します。 ルートも完全に翻訳可能です。

    10。ロギング(PINO)

    Pinoは、バックエンドとフロントエンドの両方に構造化されたロギングを提供し、速度と一貫した出力を提供します。 intl-messageformat 11。メーリング(ResEnd、HandleBars、MailSlurp)

    再送信は電子メールの送信を簡素化し、ハンドルバーは電子メールテンプレートを作成し、MailSlurpは電子メールテストを促進します。

    12。テスト(Playwright、Supertest)

    劇作家は、フロントエンドE2EとバックエンドAPIテストの両方を処理します(スーパーテストと統合)。

    13。 DevOps(AWS ECS、Terraform、GitHub Actions、S3、CloudFront) - 個別のリポジトリ

    AWS ECS、Terraform、GitHub Actions、S3、およびCloudFrontの管理インフラストラクチャとCI/CDの管理、別のリポジトリで詳細。

    entスタックはオープンソースであり、貢献を歓迎します。 問題を報告するか、githubリポジトリを介して質問します。

    以上がENTスタック:5にフルスタックWebアプリを構築するための重要な決定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート