読み込み中...
このガイドでは、モダンなWebアプリケーションを開発するための全体像を解説します。技術選定からデプロイまで、実践的な知識を網羅しています。
┌─────────────────┐
│ プレゼンテーション層 │ (Frontend)
├─────────────────┤
│ ビジネスロジック層 │ (Backend)
├─────────────────┤
│ データアクセス層 │ (Database)
└─────────────────┘
役割: ユーザーインターフェース
技術スタック:
役割: ビジネスロジック、API提供
技術スタック:
役割: データ永続化
技術スタック:
フロントエンド:
バックエンド:
デプロイ:
特徴: 高速開発、低コスト
フロントエンド:
バックエンド:
インフラ:
特徴: スケーラビリティ、保守性
認証・認可
入力検証
通信暗号化
脆弱性対策
/\
/E2E\ 少ない
/──────\
/Integration\ 中程度
/────────────\
/ Unit Tests \ 多い
/────────────────\
name: CI/CD
on:
push:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npm test
deploy:
needs: test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: vercel/actions@v3
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}このガイドでは、Webアプリケーション開発の全体像を解説しました。
関連コンテンツ:
次のステップ:
このフォルダの内容:
コメント