Skip to content

Commit 213e746

Browse files
YulikepythonYulikepython
authored
Merge pull request #6 from Yulikepython/feature/init-プロジェクトの立ち上げ
READMEの追加
2 parents 4127346 + 57bf5ea commit 213e746

3 files changed

Lines changed: 276 additions & 1 deletion

File tree

‎README.ja.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# mdstream (日本語版)
2+
3+
mdstream は、React (Vite) + TypeScript を使用したフロントエンドと、Serverless Framework (Node.js) を使用したバックエンドで構成されたサンプルプロジェクトです。MarkdownファイルをS3に保存し、それをWebアプリケーションで一覧・詳細表示する仕組みになっています。
4+
5+
## リンク
6+
- [README (English Version)](./README.md)
7+
8+
## プロジェクト概要
9+
10+
- **フロントエンド**:
11+
- `frontend/` ディレクトリ配下にあります。Vite をベースとしたReactアプリケーションです。
12+
- Markdownの読み込みやリスト表示、詳細表示の機能が含まれます。
13+
- `terms.md`, `privacy.md` といったMarkdownファイルを `/public/markdown/` に配置しており、`TermsPage` および `PrivacyPage` コンポーネントで表示しています。
14+
15+
- **バックエンド**:
16+
- `backend/` ディレクトリ配下にあります。Serverless Framework を使用し、AWS Lambda 上で動作します。
17+
- S3 から Markdownファイルを取得し、API (HTTP) 経由でフロントエンドへ返すサンプルとなっています。
18+
19+
- **ライセンス**:
20+
- 本プロジェクトは GNU General Public License (GPL) v3 で公開されています。詳細はリポジトリ直下の `LICENSE` をご覧ください。
21+
22+
---
23+
24+
## ディレクトリ構成
25+
26+
```bash
27+
mdstream/
28+
├─ frontend/ # React + Vite プロジェクト
29+
│ ├─ public/markdown # Markdownファイル
30+
│ ├─ src/ # ソースコード (コンポーネントなど)
31+
│ ├─ package.json
32+
│ ├─ vite.config.ts
33+
│ └─ ...(その他コンフィグ)
34+
├─ backend/ # Serverless Framework (Node.js) プロジェクト
35+
│ ├─ src/
36+
│ ├─ serverless.yml
37+
│ └─ package.json
38+
├─ LICENSE
39+
└─ README.md (あるいは README.ja.md)
40+
```
41+
42+
---
43+
44+
## セットアップ・利用方法
45+
46+
### 1. リポジトリのクローン
47+
48+
```bash
49+
git clone https://github.com/yourname/mdstream.git
50+
cd mdstream
51+
```
52+
53+
### 2. フロントエンドのセットアップ
54+
55+
```bash
56+
cd frontend
57+
npm install
58+
```
59+
60+
- 開発サーバ起動 (ローカルAPI用)
61+
```bash
62+
npm run dev:local
63+
```
64+
- デフォルトでは [http://localhost:5173](http://localhost:5173) が開きます。
65+
- `.env.dev`（または同等の環境変数設定ファイル）が存在する場合は、それを読み込みます。
66+
- ビルド
67+
```bash
68+
npm run build:dev
69+
# or
70+
npm run build:prod
71+
```
72+
- ビルド成果物は `frontend/dist/` に出力されます。
73+
74+
### 3. バックエンドのセットアップ
75+
76+
```bash
77+
cd ../backend
78+
npm install
79+
```
80+
81+
- ローカル開発 (serverless-offline使用)
82+
```bash
83+
npm run dev:local
84+
```
85+
- `.env.local` や `.env.dev` などのファイルに `BUCKET_NAME` や `ALLOWED_REFERER` を設定し、S3バケットとの連携を模擬します。
86+
- Serverless Offline により、[http://localhost:3000](http://localhost:3000) などで API をテストできます。（`serverless.yml` の設定により変わります）
87+
88+
- デプロイ例 (開発環境)
89+
```bash
90+
npm run deploy:dev
91+
```
92+
- AWS Lambda にデプロイされます。実際に利用するにはAWSアカウントの設定・認証が必要です。
93+
94+
---
95+
96+
## Markdownファイルの追加・編集
97+
98+
- フロントエンドの `/public/markdown/` ディレクトリ内に、`.md` ファイルを追加すると、`PrivacyPage.tsx` や `TermsPage.tsx` で直接参照できます。
99+
- バックエンド側で Markdown を管理する場合は、AWS S3 にファイルをアップロードし、`serverless.yml` や環境変数 (`S3_PREFIX` など) を通して連携します。
100+
- その場合、`fetchMarkdownList` / `fetchMarkdownDetail` 関数が参照する API が S3 から直接読み込みます。
101+
102+
---
103+
104+
## カスタマイズ方法
105+
106+
1. **デザイン・スタイルの修正**
107+
- `frontend/src/styles/` 配下の `.scss` や `.css` を編集してUIを変更できます。
108+
2. **コンポーネントの追加**
109+
- `frontend/src/components/` に新規コンポーネントを追加し、必要に応じてルーティング (`App.tsx`) を編集します。
110+
3. **API エンドポイントの変更**
111+
- `backend/src/handler.ts` 内でロジックを追加・修正します。
112+
- `serverless.yml` でAPIパスやAWSの設定を変更できます。
113+
4. **ライブラリの追加**
114+
- フロントエンドの場合 `frontend/package.json`、バックエンドの場合 `backend/package.json` に依存を追加し、必要に応じて `npm install` を実行してください。
115+
116+
---
117+
118+
## 貢献方法 (Contributing)
119+
120+
- バグ報告や機能要望はIssueを立ててください。
121+
- プルリクエストを歓迎します。大きな変更の場合は事前にIssueで議論しましょう。
122+
123+
---
124+
125+
## ライセンス
126+
127+
- このプロジェクトは GNU GPL v3 ライセンスの下で公開されています。
128+
- 詳細は [LICENSE](./LICENSE) ファイルをご確認ください。
129+
130+
---
131+
132+
## 問い合わせ
133+
134+
- 質問や不具合に関しては、Issueまたは [info@itc.tokyo](mailto:info@itc.tokyo) までご連絡ください。

‎README.md‎

Lines changed: 141 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,141 @@
1-
# mdstream
1+
# mdstream (English)
2+
3+
mdstream is a sample project consisting of a **React (Vite) + TypeScript** frontend and a **Serverless Framework (Node.js)** backend. It uses AWS S3 to store Markdown files and fetches them via HTTP APIs for listing and detail views in the web application.
4+
5+
6+
## Link
7+
[日本語版はこちら](./README.ja.md)
8+
9+
## Overview
10+
11+
- **Frontend**:
12+
- Located under the `frontend/` directory, built with Vite + React + TypeScript.
13+
- Displays a list of Markdown files and their contents.
14+
- Also demonstrates how to load local markdown (e.g., `terms.md` and `privacy.md`) in the `/public/markdown/` folder and render it with React.
15+
16+
- **Backend**:
17+
- Located under the `backend/` directory, built with the Serverless Framework on Node.js.
18+
- Fetches Markdown files from an S3 bucket and serves them via an HTTP API.
19+
- The environment variables (`BUCKET_NAME`, `ALLOWED_REFERER`, etc.) control where the Markdown files are stored and which referers are allowed.
20+
21+
- **License**:
22+
- This project is published under **GNU General Public License (GPL) v3**.
23+
- See the `LICENSE` file for more details.
24+
25+
---
26+
27+
## Directory Structure
28+
29+
```bash
30+
mdstream/
31+
├─ frontend/ # React + Vite project
32+
│ ├─ public/markdown # Markdown files
33+
│ ├─ src/ # Source code (components, services, etc.)
34+
│ ├─ package.json
35+
│ ├─ vite.config.ts
36+
│ └─ ...other configs
37+
├─ backend/ # Serverless Framework (Node.js) project
38+
│ ├─ src/
39+
│ ├─ serverless.yml
40+
│ └─ package.json
41+
├─ LICENSE
42+
└─ README.md (or README.ja.md for Japanese)
43+
```
44+
45+
---
46+
47+
## Getting Started
48+
49+
### 1. Clone the Repository
50+
51+
```bash
52+
git clone https://github.com/yourname/mdstream.git
53+
cd mdstream
54+
```
55+
56+
### 2. Frontend Setup
57+
58+
```bash
59+
cd frontend
60+
npm install
61+
```
62+
63+
- **Local Development** (connecting to a local API):
64+
```bash
65+
npm run dev:local
66+
```
67+
- By default, the local dev server runs at [http://localhost:5173](http://localhost:5173).
68+
- It will load environment variables from `.env.dev` (or any `.env.*` specified).
69+
- **Build**
70+
```bash
71+
npm run build:dev
72+
# or
73+
npm run build:prod
74+
```
75+
- The build output goes to `frontend/dist/`.
76+
77+
### 3. Backend Setup
78+
79+
```bash
80+
cd ../backend
81+
npm install
82+
```
83+
84+
- **Local Development (serverless-offline)**:
85+
```bash
86+
npm run dev:local
87+
```
88+
- This will read environment variables such as `BUCKET_NAME` and `ALLOWED_REFERER` from `.env.dev` or similar.
89+
- The local serverless-offline endpoint (e.g., http://localhost:3000) will serve the API (depending on your `serverless.yml` config).
90+
- **Deploy to AWS Example**:
91+
```bash
92+
npm run deploy:dev
93+
```
94+
- Requires your AWS credentials to be configured.
95+
- Deploys the backend as AWS Lambda functions.
96+
97+
---
98+
99+
## Editing / Adding Markdown Files
100+
101+
- **Local** (frontend-based):
102+
- Simply place new `.md` files under `frontend/public/markdown/`.
103+
- Import or fetch them in your React components (like `PrivacyPage.tsx` or `TermsPage.tsx`).
104+
- **Backend (S3-based)**:
105+
- Upload your `.md` files to the appropriate S3 bucket.
106+
- Update environment variables (`S3_PREFIX`, etc.) to point to the correct location.
107+
- The `fetchMarkdownList` and `fetchMarkdownDetail` functions in `frontend/src/services/api.ts` call the API endpoints that read from S3.
108+
109+
---
110+
111+
## Customization
112+
113+
1. **Styling**:
114+
- Edit SCSS/CSS files in `frontend/src/styles/` to change the UI appearance.
115+
2. **Add Components**:
116+
- Create new React components in `frontend/src/components/`, and add corresponding routes in `App.tsx` as needed.
117+
3. **API Changes**:
118+
- Modify logic in `backend/src/handler.ts` or the `serverless.yml` file to adjust endpoints, environment variables, AWS settings, etc.
119+
4. **Dependencies**:
120+
- Update `frontend/package.json` or `backend/package.json` for any additional libraries.
121+
- Run `npm install` to install new dependencies.
122+
123+
---
124+
125+
## Contributing
126+
127+
- Please open an Issue for bugs or feature requests.
128+
- Pull requests are welcome. For major changes, consider discussing them in an Issue first.
129+
130+
---
131+
132+
## License
133+
134+
- Released under the **GNU GPL v3** license.
135+
- Refer to [LICENSE](./LICENSE) for details.
136+
137+
---
138+
139+
## Contact
140+
141+
- For questions or issues, please open an Issue or email [info@itc.tokyo](mailto:info@itc.tokyo).

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"scripts": {
77
"dev:local": "cross-env VITE_API_BASE_URL=http://localhost:3000 vite",
88
"dev:remote": "env-cmd -f .env.dev vite",
9+
"dev:prod": "env-cmd -f .env.prod vite",
910
"build:dev": "tsc -b && vite build --mode dev",
1011
"build:prod": "tsc -b && vite build --mode prod",
1112
"lint": "eslint .",

0 commit comments

Comments
 (0)