givery-bootcamp / dena-2024-team8

3 stars 0 forks source link

Training app 2024

docker-compose structure

How to develop

$ docker-compose up

でWebサーバが起動します。

Initial setup

初期状態で、DBから値を読み出してHello worldを表示する構成となっていますが、初回起動時にはテーブルが存在しないためWebサーバへのアクセスがエラーになります。 起動後に以下のスクリプトを実行してテーブルの作成と初期データの投入を行ってください。

host$ docker-compose exec db sh -c "mysql < /sqlscripts/create.sql"
host$ docker-compose exec db sh -c "mysql training < /sqlscripts/insert.sql"

Reactを開発する人はブラウザの拡張機能をインストールしてください。(任意)

How to connect database

host$ docker-compose exec db mysql training

How to connect backend/frontend shell

host$ docker-compose exec backend bash
host$ docker-compose exec frontend bash

ライブラリをインストールする場合はdockerコンテナ側でコマンドを実行してください。

e.g.

host$ docker-compose exec backend bash
backend$ go get -u gorm.io/gorm
host$ docker-compose exec frontend bash
frontend$ npm install something

VS Codeなどで開発する場合、コンテナ側にインストールされたモジュールが参照できないために、エディター上でエラーが表示される場合があります。

その場合はお手数ですが、ホストOS側でもモジュールのインストールをお願いします。

host$ cd frontend
host$ npm install

frontend(nodejs)をDocker外で動かすための設定変更

ディレクトリ構成

Backend

backend/
  internal/ : ソースコード
    config/ : 設定類
    entities/ : モデル/エンティティ
    external/ : 外部環境との接続定義
    interfaces/ : インターフェース
    middleware/ : ginのmiddleware
    repositories/ : リポジトリ - systemに近い部分の実装
    usecases/ : ユースケース - ビジネスに近い部分の実装

Frontend

frontend/
  index.html
  public/
    画像などの静的ファイル
  src/
    main.tsx: Reactアプリケーションが起動するエントリーポイント
    app/
      機能横断的に使う機能をまとめる
    features/
      post/
        ドメインごとの機能をまとめる
    shared/
      components/
        再利用可能な小さなUIコンポーネント
      services/
        共有関数
      hooks/
        共有React Hook
      models/
        共有Model
      store/
        Redux Store関連

Swaggerの使い方

ざっくりSwaggerの概要はこちら

フロントエンド

バックエンド