【ITパスポート】【基本情報】システム、戦略開発技術、サイト設計書

/project-docs
├── README.md                ← 全体概要やリンクまとめ（GitHubのトップにも）
├── overview.md              ← プロジェクトの目的・背景・構成概要
├── setup.md                 ← 環境構築（Next.js / PHP / Docker）
├── deploy.md                ← デプロイ手順（手動・git pullなど）
├── structure.md             ← ディレクトリ構成・技術スタック説明
├── url-mapping.md           ← URL設計・CMS連携などの一覧
├── process-flow.md          ← 処理フロー・ページ生成・API連携など
└── faq.md                   ← よくある質問・トラブルシュートなど

# プロジェクト概要

## プロジェクトの目的・概要

本プロジェクトは、もともと外部制作されたPHPベースのWebサイトを、  
自社内で保守・運用・再構築しているWebアプリケーションです。

Next.js による静的生成（SSG）と、既存の PHP 構成を組み合わせたハイブリッド構成で運用しています。


## なぜ再構築したのか

- ビュー（HTML）と PHP のバックエンド処理が混在しており、保守性が低かった
- 共通パーツがモジュール化されておらず、修正コストが高い
- SSR（PHP）構成では表示速度やSEOに課題があり、  
  Webサイトパフォーマンスを強化するため Next.js の SSG を採用


## 技術スタック

| 技術       | 役割                                                             |
|------------|------------------------------------------------------------------|
| PHP        | 旧来のフォームページやバックエンド処理                         |
| Next.js    | SSGによる静的サイトの高速表示（トップページやSEO記事）         |
| WordPress  | ヘッドレスCMSとして使用し、Next.js側でGraphQL経由でコンテンツ取得 |
| Git        | バージョン管理                                                   |
| Docker     | ローカル開発環境の構築（PHP + Apache）                           |

# 環境構築手順

## ローカル開発環境（Next.js）

Next.js の開発環境は以下の手順でセットアップできます。

### 手順

1. **Node.js / NVM / npm をインストール**
   - Node.js の推奨バージョン（例：18.x など）をインストール
   - `nvm` を使うと複数バージョンの管理が楽になります

2. **プロジェクトリポジトリをクローンして移動**

```sh
git clone https://github.com/your-org/your-project.git
cd your-project/frontend
```

3. **依存パッケージをインストール**

```sh
npm install
```

4. **開発サーバーを起動**

```sh
npm run dev
```

http://localhost:3000 でNext.jsの開発環境が確認できます。

---

### Next.jsの環境変数

- `frontend/.env.local` にAPIキーやWordPressのエンドポイントなどを記載します。
- 例：

```env
NEXT_PUBLIC_API_URL=https://your-wp-site/graphql
NEXT_PUBLIC_API_KEY=your-api-key
```

---

## ローカル開発環境（PHP）

PHP部分の開発環境は Docker を使用して構築します。

### 手順

1. **Docker Desktop をインストールして起動**
   - https://www.docker.com/products/docker-desktop/
   - Windows の場合は **WSL2 の有効化** が必要です

2. **Docker設定ファイルを準備**
   - `Dockerfile` および `docker-compose.yml` を、コーダードライブまたは所定の場所から取得して `backend/` ディレクトリに配置

3. **Dockerを起動**

```sh
cd backend
docker compose up -d
```

4. **ブラウザで確認**

```text
http://localhost:8080
```

---

### PHPの環境変数

- `.env` ファイルを使用する場合、`backend/.env` に設定を記載します
- 例：

```env
API_URL=https://api.example.com
DEBUG=true
```

---

# デプロイ手順

## デプロイ方法

Next.jsで生成された静的ファイルを、さくらのレンタルサーバーにアップロードして本番反映を行います。

---

### 1. SSGファイルをビルド

Next.js のプロジェクトルート（`frontend/`）で以下のコマンドを実行し、静的ファイルを出力します。

```sh
npm run build
npm run export
```

出力先の `out/` ディレクトリに HTML/CSS/JS ファイルが生成されます。  
これらを本番環境の該当ディレクトリに**上書き配置**します。

---

### 2. 本番環境にSSH接続

```sh
ssh username@sakura.ne.jp
cd /path/to/project
```

※ `username` やパスはサーバー設定に応じて変更してください。

---

### 3. Git操作（本番サーバー上）

```sh
git pull origin main
```

または必要に応じて、特定のタグ・ブランチを指定して pull してください。  
更新内容が静的ファイルに反映されていれば、公開が完了です。

---

> 注意：`out/` ディレクトリは **ビルド済み静的ファイル** なので、サーバーにあるものと差し替える必要があります。旧ファイル削除やパーミッションに注意。