/Kojirer

Primary LanguageTypeScript

Kojirer

  • AR会謹製豚そば「こうじろう」の食券管理システム

How to Start Develop

０. 前提

以下のインストールおよびセットアップをすること．

  • VSCode
  • Docker
  • Git

また，VSCode内に以下の拡張機能のインストールが必要．

  • Dev Containers

1. リポジトリのクローン

Workingディレクトリにおいて，GitHubからソースファイルをクローンする．

git clone "git@github.com:ARCircle/Kojirer.git"

クローンしたディレクトリに移動し，.envファイルをコピーする．

cd Kojirer
cp example.env .env

VSCodeでクローンしたディレクトリを開く．

code .

2. devcontainerの起動

VSCodeの画面左の「><」のようなマークから， 「コンテナーで再度開く（Reopen in Container）」という欄をクリック．

初めてビルドする際は，右下にダイアログが出現するので 「コンテナーで再度開く」を実行しても可能．

3. マイグレーションの実行

開発中のDBとスキーマ定義を合わせるため， 開発開始時には必ずマイグレーションを実行する．

npm run migrate:dev

TARGET=devでは，ホットリロードの恩恵を受けるため，フロントエンドサーバ (port: 52800) とバックエンドサーバ (port: 52600) の両方が起動する． なお，バックエンドのコンソール表示が2重になっているが，これは仕様である (原因探し中)．

How to Start Production

sudo docker-compose up -d --build

開発環境ではバックエンドサーバ (port: 52600) のみ起動する．

ディレクトリ構成

pakages

Kojirerのコア部分．基本的にここをいじくることになる．

pakages/backend

Feature Package
HTTPサーバフレームワーク Express.js
ORM/マイグレーションツール Prisma.js
データベース PostgreSQL

Routeの追加

tsファイルをsrc/routesに追加すると，そのファイル名のパスが作られる．

APIスキーマ編集

バックエンド側の型再生成

npm run api

DBマイグレーション

データベースへのテーブルの追加や編集といったスキーマへの操作を記録し，それらを逐次実行することで，開発者間で環境を揃えることをマイグレーションという．

このリポジトリにおけるマイグレーションの手順は以下のとおりです．

  1. prisma/schema.prismaにおいて，スキーマを編集する
  2. npm run migrate:createを実行し，sqlファイルをprismaディレクトリ以下に作成される
  3. 作成されたsqlファイルを確認し，既存のスキーマを壊すことがないか確認
  4. npm run migrate:devでsqlを実行する

開発用データのInsert

.devcontainerの外，すなわちWSL上のKojirerディレクトリにおいて，以下のコマンドを実行．

docker exec -i kojirer_devcontainer-db-1 psql -U kojirer -d kojirer < packages/backend/examples/devdata.sql

pakages/frontend

Feature Package
UIライブラリ React
ルーティングライブラリ @generouted/react-router
UIコンポーネント Chakra UI

本番環境

docker-compose up -d --build
docker-compose exec web npm run migrate:dev