Backend

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+
 /.pnp
 .pnp.js
 

README.md

@@ -4,62 +4,134 @@
 
 ## 必要なもの
 
-- Docker
-- Git
+-Docker
+
+-Git
 
 ## セットアップ手順
 
-### 1. リポジトリのクローン
+ ### 1. リポジトリのクローン
 
 まず、プロジェクトのリポジトリをクローンします。
 
-```bash
 git clone <repository-url>
 cd hackathon
-```
-## 2. 開発環境の立ち上げ
-、以下のコマンドで Docker コンテナをビルドし、アプリケーションを起動します
-```angular2html
-docker-compose up --build 
-```
-これにより、以下のサービスが立ち上がります
-- React アプリケーション: ポート 3000 でアクセス可能
-- MySQL データベース: ポート 3306 でアクセス可能
-## 3. アプリケーションの確認
+
+ ### 2. 開発環境の立ち上げ
+
+以下のコマンドで Docker コンテナをビルドし、アプリケーションを起動します。
+
+docker-compose up --build
+
+これにより、以下のサービスが立ち上がります。
+
+React アプリケーション: ポート 3000 でアクセス可能
+
+バックエンド（Express）: ポート 3001 でアクセス可能
+
+MySQL データベース: ポート 3306 でアクセス可能
+
+### 3. アプリケーションの確認
+
 http://localhost:3000 にアクセスし、React アプリケーションが動作しているか確認します。
 
-## 4. データベース接続の確認
-MySQL に接続するための情報は、docker-compose.yml 内に記載されています
-```
+### 4. データベース接続の確認
+
+MySQL に接続するための情報は、docker-compose.yml 内に記載されています。
+
 ホスト名: db（コンテナ名）
 ポート: 3306
 データベース名: hackathon
 ユーザー名: hackathon_user
 パスワード: hackathon_pass
-```
-## 5. 開発の進め方
-- ソースコードは src/ ディレクトリ内にあります。React アプリケーションのソースコードを変更し、保存することで、開発サーバーが自動的に更新されます（ホットリロード）。
-- 必要に応じて、バックエンドの MySQL データベースを操作することもできます。
-- 新しいパッケージを追加した場合は、コンテナ内で npm install を実行して依存関係をインストールしてください。
-## ディレクトリ構成
+
+# MySQL への接続方法
+
+## 1. MySQL コンテナに接続する
+
+docker exec -it hackathon-db mysql -u hackathon_user -p
+
+パスワード hackathon_pass を入力すると、MySQL にログインできます。
+
+## 2. MySQL クライアントから接続する
+
+mysql -h 127.0.0.1 -P 3306 -u hackathon_user -p
+
+## 3. phpMyAdmin を利用する（オプション）
+
+MySQL データベースをブラウザ上で管理したい場合は、phpMyAdmin を追加できます。
+
+docker-compose.yml に以下を追加してください。
+
+phpmyadmin:
+image: phpmyadmin
+restart: always
+ports:
+- "8080:80"
+environment:
+- PMA_HOST=db
+- MYSQL_ROOT_PASSWORD=rootpassword
+depends_on:
+- db
+
+追加後、再度 docker-compose up --build を実行し、
+
+http://localhost:8080 にアクセスすると phpMyAdmin で MySQL を管理できます。
+
+### 5. 開発の進め方
+
+ソースコードは src/ ディレクトリ内にあります。React アプリケーションのソースコードを変更し、保存することで、開発サーバーが自動的に更新されます（ホットリロード）。
+
+必要に応じて、バックエンドの MySQL データベースを操作することもできます。
+
+新しいパッケージを追加した場合は、コンテナ内で npm install を実行して依存関係をインストールしてください。
+
+ディレクトリ構成
 ```angular2html
 /hackathon
-├── Dockerfile            # React アプリケーションの Dockerfile
-├── docker-compose.yml    # Docker Compose 設定ファイル
-├── node_modules/         # Docker 内で依存関係がインストールされる
-├── package.json          # アプリケーションの依存関係とスクリプト
-├── package-lock.json     # npm の依存関係ロックファイル
-├── src/                  # React アプリケーションのソースコード
-├── nginx/                # (オプション) Nginx 設定ファイル
-├── .gitignore            # node_modules を Git に含めないように設定
-└── README.md             # このファイル
+├── backend/               # バックエンド（Express API）
+│   ├── src/               # サーバーサイドのソースコード
+│   ├── package.json       # バックエンドの依存関係とスクリプト
+│   ├── Dockerfile         # バックエンドの Docker 設定
+│   └── ...
+├── frontend/              # フロントエンド（React アプリケーション）
+│   ├── src/               # フロントエンドのソースコード
+│   ├── package.json       # フロントエンドの依存関係とスクリプト
+│   ├── Dockerfile         # フロントエンドの Docker 設定
+│   └── ...
+├── db_data/               # MySQL のデータ永続化ボリューム
+├── docker-compose.yml     # Docker Compose 設定ファイル
+├── README.md              # このファイル
+└── .gitignore             # Git の無視設定
 ```
-# 注意点
-- docker-compose.yml で定義されたサービス（React アプリケーションと MySQL）を同時に起動するためには、docker-compose up --build を使用してください。
+## 注意点
+
+- docker-compose.yml で定義されたサービス（React アプリケーション、バックエンド、MySQL）を同時に起動するためには、docker-compose up --build を使用してください。
+
 - npm install や npm run build などのコマンドは、Docker コンテナ内で実行されるため、ホスト側の環境に影響はありません。
-## 質問 (FAQ)
+
+# 質問 (FAQ)
+
 - Q: node_modules/ がないのに依存関係はどうやってインストールされるのか？
+
 - A: Dockerfile で npm install を実行するため、コンテナ内に依存関係がインストールされます。ローカルには node_modules を含める必要はありません。
 
 - Q: npm run start でエラーが発生する場合は？
+
 - A: まず、docker-compose logs を使ってエラーメッセージを確認し、必要に応じて設定を修正してください。
+
+- Q: MySQL に接続できない場合は？
+
+- A: 以下の手順を試してください。
+
+### docker ps で hackathon-db が起動しているか確認する。
+
+### docker logs hackathon-db でエラーメッセージを確認する。
+
+### docker exec -it hackathon-db mysql -u hackathon_user -p で直接ログインを試す。
+
+### FLUSH PRIVILEGES; を実行して権限をリロードする。
+
+### docker-compose down && docker-compose up --build でコンテナを再構築する。
+
+# 以上で、開発環境のセットアップが完了します！

backend/.env

@@ -0,0 +1,10 @@
+DB_HOST=localhost
+DB_USER=root
+DB_PASSWORD=0510
+DB_NAME=hackathon
+DB_PORT=3306
+
+JWT_SECRET=1230006
+BACKEND_PORT=3001
+
+FRONTEND_URL=http://localhost:3000

backend/Dockerfile

@@ -1,17 +1,19 @@
-FROM node:18
+# ベースイメージとして Node.js を使用
+FROM node:18 AS build
 
+# 作業ディレクトリを設定
 WORKDIR /app
 
-# `package.json` を確実にコピー
+# package.json と package-lock.json を最初にコピーして依存関係をインストール
+# これにより依存関係が変わらない限りキャッシュを使うためビルドが速くなる
 COPY package.json package-lock.json ./
-
-# 依存関係のインストール
 RUN npm install
 
-# 残りのコードをコピー
+# アプリケーションのソースコードをコピー
 COPY . .
 
-# ポートを開放
-EXPOSE 3000
+# ポート3001を公開
+EXPOSE 3001
 
-CMD ["npm", "run", "dev"]
+# 開発環境の場合（npm run devを実行）
+CMD ["npm", "run", "start"]