概要 | 使い方 | 開発履歴 | 使用技術 | インストール手順 | License
アプリはこちらで公開しています。
https://task-circle.onrender.com
タスク管理とタイマー、他のユーザーのステータス表示機能のあるWebアプリケーションです。
フロントエンドはReact、バックエンドはSpring Bootで制作しています。詳しい説明はそれぞれのREADME.mdをご覧ください。
アプリの機能の紹介はこちら↓
frontend/README.md
APIの表とER図はこちら↓
backend/README.md
(旧)AWSでのデプロイについて
- ビルド時は、まずReactアプリケーションをビルドしたものをSpring Bootプロジェクトに統合してから、Spring Bootアプリケーションをビルドします。
- AWS上でEC2とRDSを作成し、EC2上のTomcatでSpring Bootアプリケーションを起動させています。
- CI/CDツールはCircleCIを利用していて、mainブランチへのプッシュがあると自動でデプロイされます。
- 独自ドメインを取得してRoute53に登録し、Let's Encryptで取得した証明書をTomcatにインストールし、80番と443番ポートの通信を8443番ポートへ転送してHTTPS化しています。
2021年6月18日 Reactプロジェクトを作成
2021年6月29日 Spring Bootプロジェクトを追加
2021年7月 3日 AWSにデプロイし、アプリ公開
2021年7月15日 TypeScriptへの移行開始
2022年3月21日 ホスティングサービスをAWSからHerokuに移行
2022年11月21日 ホスティングサービスをHerokuからRenderに移行
React
JavaScriptのライブラリです。Create React Appでプロジェクトを作成しました。TypeScript
JavaScriptで型宣言をできるようにした言語です。Material-UI
ReactのUIフレームワークです。Googleが提唱するマテリアルデザインのようなUIを作ることができます。Jest, React Testing Library
JavaScriptのテストランナーと、Reactコンポーネントのテストライブラリです。Spring Boot
Javaのフレームワークです。バックエンド(サーバーサイド)アプリケーションとして利用しています。WebSocket (STOMP, SockJS)
HTTP通信とは別の通信方法で、リアルタイムな双方向通信ができます。ルーム機能でタイマーの状況を送受信するのに利用しています。MyBatis
Javaの世界とデータベースの世界をつなぐO/Rマッパーです。MySQL
データベースを管理するためのシステムおよび言語です。基本的なCRUD処理(新規作成、取得、更新、削除)を行っています。- Java 11.0.10
- Apache Maven 3.8.1
- Node.js 14.16.1
- npm 7.16.0
- MySQL 8.0.25
※Dockerで実行することもできます。
MySQLでデータベースを作成し、 backend/src/main/resources/schema.sqlにあるSQL文でテーブルを作成してください。
環境変数を設定するか、backend/src/main/resources/application.propertiesのデータベースの接続に関する記述を書き換えてください。
| 環境変数名 | 説明 |
|---|---|
| MYSQL_URL | jdbc:mysql://ホスト名:ポート番号/データベース名 |
| MYSQL_USERNAME | データベースに接続するユーザー名 |
| MYSQL_PASSWORD | データベースに接続するユーザーのパスワード |
Googleログイン機能を使用する場合は、frontendディレクトリに.envファイルを作成し、環境変数を記述してください。 ※2022年11月21日追記: 現在不具合のため使えません。
| 環境変数名 | 説明 |
|---|---|
| REACT_APP_CLIENT_ID | Google OAuthのクライアントID |
リポジトリをクローンします。
git clone https://github.com/ToshihiroWatanabe/task-circle.git
Spring Bootプロジェクトのディレクトリに移動します。
cd task-circle/backend
Mavenで依存関係をインストールします。
mvn install
Spring Bootアプリケーションを起動します。
mvn spring-boot:run
Reactプロジェクトのディレクトリに移動します。
cd ../frontend
npmで依存関係をインストールします。
npm install
Reactアプリケーションを起動します。
npm start
プロジェクトのディレクトリに移動します。
cd task-circle
Docker Composeで起動します。
docker-compose up
The MIT License (MIT)
Copyright © 2022 ワタナベトシヒロ