https://github.com/calloc134/callstack

pnpm/turborepo モノリポボイラープレート
https://github.com/calloc134/callstack

commitlint devcontainer graphql graphql-yoga nextui pnpm pnpm-workspaces prisma react storybook tailwindcss turborepo

Last synced: about 2 months ago
JSON representation

pnpm/turborepo モノリポボイラープレート

• Host: GitHub
• URL: https://github.com/calloc134/callstack
• Owner: calloc134
• License: mit
• Created: 2023-06-21T01:51:10.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-11-11T14:34:39.000Z (over 1 year ago)
• Last Synced: 2025-02-28T02:48:45.954Z (about 2 months ago)
• Topics: commitlint, devcontainer, graphql, graphql-yoga, nextui, pnpm, pnpm-workspaces, prisma, react, storybook, tailwindcss, turborepo
• Language: TypeScript
• Homepage:
• Size: 1.96 MB
• Stars: 24
• Watchers: 1
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
callstack



  



 pnpm + turborepoで構成されたモノリポ構成のボイラープレート 




   

    

    

    

    

    

    

## コンテンツ内容

- 📋 [概要](#概要)

- ℹ️ [モノリポ構成とは](#モノリポ構成とは)

- 🔧 [全体構成](#全体構成)

- 🔧 [技術スタック](#技術スタック)

  - 💻 [バックエンド](#バックエンド)

  - 🌐 [フロントエンド](#フロントエンド)

  - ⚙️ [開発環境整備](#開発環境整備)

  - 🐳 [インフラ環境(開発環境)](#インフラ環境開発環境)

  - 🐳 [インフラ環境(本番環境)](#インフラ環境本番環境)

  - 🚀 [CI/CD 環境](#cicd-環境)

- 📂 [ディレクトリ構成](#ディレクトリ構成)

- 💻 [起動方法](#起動方法)

  - 💻 [開発環境の起動方法](#開発環境の起動方法)

  - 💻 [本番環境の起動方法](#本番環境の起動方法)

- 📅 [今後の予定](#今後の予定)

- 📜 [ライセンス](#ライセンス)

# 概要

このプロジェクトは、pnpm と turbo を用いて構成されたボイラープレートです。  

現在開発途上です。

### モノリポ構成とは

モノリポ構成とは、複数のプロジェクトを一つのリポジトリで管理する構成のことです。

## 全体構成

このリポジトリは、バックエンドを graphql で、フロントエンドを react で実装した Web アプリケーションをモノリポ構成で管理しています。

## 技術スタック

### バックエンド

- graphql-yoga  

  graphql サーバの立ち上げに使用しています。

- tsx  

  開発環境のビルドツールとして利用しています。

- swc

  本番環境のビルドツールとして利用しています。

- prisma  

  データベースへのアクセスに使用しています。

- grpahql-scalars  

  日付型や JSON 型などのスカラー型を graphql-yoga へ追加するために使用しています。

- graphql-codegen  

  graphql スキーマから、resolver や型定義を生成するために使用しています。

- @envelop/useAuth0  

  後述する Logto との連携に使用しています。

- @envelop/useGenericAuth  

  認可処理や権限管理に使用しています。  

  これを用いて graphql の@auth ディレクティブを実装しています。

- graphql-armor  

  様々なセキュリティ対策に使用しています。

- @envelop/disable-introspection  

  GraphQL のイントロスペクションを無効化するために使用しています。

- jsonwebtoken  

  JWT 認証処理に利用しています。

- jimp  

  画像のリサイズ処理に使用しています。

- minio-js  

  後述する minio にリサイズ画像をアップロードするために使用しています。

### フロントエンド

- react  

  フロントエンドのフレームワークとして使用しています。

- vite  

  ビルドツールとして使用しています。

- @tanstack/react-router

  ルーティングに使用しています。

- nextui  

  tailwind 対応のコンポーネントライブラリとして使用しています。

- tailwindcss  

  CSS フレームワークとして使用しています。

- storybook  

  コンポーネントの管理に使用しています。

- urql  

  graphql クライアントとして使用しています。

- @urql/exchange-auth

  後述する Logto との認証連携に使用しています。

- graphql-codegen  

  graphql スキーマから、型定義を生成するために使用しています。

- logto-js  

  後述する Logto を用いた認証処理に使用しています。

### 開発環境整備

- pnpm  

  パッケージマネージャとして使用しています。

- turborepo  

  モノリポ構成の管理に使用しています。

- prettier  

  コードのフォーマットに使用しています。

- husky  

  git のフックに使用しています。

- commitlint  

  コミットメッセージのフォーマットをチェックするために使用しています。

- changesets  

  バージョン管理とリリース管理に使用しています。

### インフラ環境(開発環境)

- devcontainer  

  開発環境の立ち上げに使用しています。  

  ベースとなるアプリケーションコンテナに加えて、PostgreSQL のデータベースコンテナと minio を立ち上げています。

- minio  

  AWS S3 互換のオブジェクトストレージです。

### インフラ環境(本番環境)

- docker compose  

  本番環境の立ち上げに使用しています。

- Logto  

  Auth0 互換の認証サービスです。

- minio  

  AWS S3 互換のオブジェクトストレージです。

- nginx  

  フロントエンドの HTML ファイルの配信を行っています。  

  nginx のコンテナ内でフロントエンドのビルドを行い、そのビルド済みのファイルを配信しています。

- traefik

  リバースプロキシとして使用しています。

### CI/CD 環境

- Github Actions  

  ここで、型チェックを行っています。  

  現時点では型チェックのみですが、今後はテストコードの実行も行う予定です。

## ライセンス

MIT License

Copyright (c) 2023 calloc134