docs: Add WordPress setup and Synology deployment guides, alongside a site completion task list.

This commit is contained in:
choibk 2026-01-19 14:53:32 +09:00
parent b473f40065
commit 21533c3300
6 changed files with 394 additions and 0 deletions

View File

@ -0,0 +1,59 @@
# Synology NAS React 앱 배포 가이드
이제 개발하신 웹사이트를 실제 인터넷(`sokuree.com`)에 공개하는 과정입니다.
로컬에 있는 코드 전체를 올리는 것이 아니라, **최적화된 빌드 파일(`dist` 폴더)**만 올리는 것입니다.
## 1. React 앱 빌드 (내 컴퓨터에서)
개발 모드(`dev`)는 테스트용입니다. 배포를 위해서는 '빌드'를 해야 합니다.
1. VS Code 터미널에서 기존 서버가 켜져 있다면 `Ctrl + C`로 끕니다.
2. 다음 명령어를 입력합니다:
```bash
npm run build
```
3. 잠시 후 `dist` 라는 폴더가 새로 생깁니다.
- 이 **`dist` 폴더 안에 있는 파일들**(`index.html`, `assets` 폴더 등)이 실제 서버에 올라갈 주인공입니다.
## 2. Synology에 폴더 생성 및 업로드
1. Synology **File Station**을 엽니다.
2. `/web` 폴더 아래에 새 폴더 `sokuree_front`를 만듭니다. (워드프레스 폴더와 섞이지 않게 따로 만듭니다)
3. 방금 만든 내 컴퓨터의 `dist` 폴더 **안에 있는 모든 내용물**을 `sokuree_front` 폴더 안으로 업로드합니다.
- 결과 경로 예시: `/web/sokuree_front/index.html` 이 있어야 함.
## 3. Web Station 설정 (프론트엔드용)
이제 `sokuree.com` 주소를 이 폴더에 연결합니다.
1. **Web Station** -> **웹 서비스 포털** -> **생성**.
2. **서비스**: 정적 웹 사이트 (또는 가상 호스트).
3. **설정**:
- 호스트 이름: `sokuree.com` (메인 도메인)
- 문서 루트: `/web/sokuree_front`
- 백엔드 서버: Nginx (추천) 또는 Apache
4. **확인**.
## 4. 새로고침 시 404 에러 방지 (중요!)
React 대시보드는 "단일 페이지 앱(SPA)"이라서, 새로고침을 하면 시놀로지가 "어? 뉴스 페이지 파일은 없는데?" 하고 404 에러를 냅니다. 이를 방지하는 설정 파일이 필요합니다.
### 방법 A: Apache 사용 시 (추천)
1. 메모장을 열고 다음 내용을 붙여넣습니다:
```apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
```
2. 파일 이름을 `.htaccess`로 저장합니다. (파일 형식을 '모든 파일'로 선택)
3. 이 `.htaccess` 파일을 시놀로지의 `/web/sokuree_front` 폴더에 업로드합니다.
### 방법 B: Nginx 사용 시
1. Web Station 설정에서 해당 포털 편집 -> **스크립트 언어 설정** 탭 (또는 고급 설정).
2. `try_files $uri $uri/ /index.html;` 규칙을 추가할 수 있는 곳이 있는지 확인합니다. (시놀로지 버전마다 UI가 다름)
3. Nginx가 복잡하다면 마음 편하게 **백엔드 서버를 Apache로 선택**하고 위의 A방법(.htaccess)을 쓰는 것이 가장 쉽습니다.
## 5. 완료
이제 스마트폰이나 다른 PC에서 `http://sokuree.com` (도메인 연결이 되어 있다면) 으로 접속해보세요.
React로 만든 멋진 사이트가 뜰 것입니다!

View File

@ -0,0 +1,59 @@
# Synology NAS React 앱 배포 가이드
이제 개발하신 웹사이트를 실제 인터넷(`sokuree.com`)에 공개하는 과정입니다.
로컬에 있는 코드 전체를 올리는 것이 아니라, **최적화된 빌드 파일(`dist` 폴더)**만 올리는 것입니다.
## 1. React 앱 빌드 (내 컴퓨터에서)
개발 모드(`dev`)는 테스트용입니다. 배포를 위해서는 '빌드'를 해야 합니다.
1. VS Code 터미널에서 기존 서버가 켜져 있다면 `Ctrl + C`로 끕니다.
2. 다음 명령어를 입력합니다:
```bash
npm run build
```
3. 잠시 후 `dist` 라는 폴더가 새로 생깁니다.
- 이 **`dist` 폴더 안에 있는 파일들**([index.html](file:///d:/antigravity/index.html), `assets` 폴더 등)이 실제 서버에 올라갈 주인공입니다.
## 2. Synology에 폴더 생성 및 업로드
1. Synology **File Station**을 엽니다.
2. `/web` 폴더 아래에 새 폴더 `sokuree_front`를 만듭니다. (워드프레스 폴더와 섞이지 않게 따로 만듭니다)
3. 방금 만든 내 컴퓨터의 `dist` 폴더 **안에 있는 모든 내용물**을 `sokuree_front` 폴더 안으로 업로드합니다.
- 결과 경로 예시: `/web/sokuree_front/index.html` 이 있어야 함.
## 3. Web Station 설정 (프론트엔드용)
이제 `sokuree.com` 주소를 이 폴더에 연결합니다.
1. **Web Station** -> **웹 서비스 포털** -> **생성**.
2. **서비스**: 정적 웹 사이트 (또는 가상 호스트).
3. **설정**:
- 호스트 이름: `sokuree.com` (메인 도메인)
- 문서 루트: `/web/sokuree_front`
- 백엔드 서버: Nginx (추천) 또는 Apache
4. **확인**.
## 4. 새로고침 시 404 에러 방지 (중요!)
React 대시보드는 "단일 페이지 앱(SPA)"이라서, 새로고침을 하면 시놀로지가 "어? 뉴스 페이지 파일은 없는데?" 하고 404 에러를 냅니다. 이를 방지하는 설정 파일이 필요합니다.
### 방법 A: Apache 사용 시 (추천)
1. 메모장을 열고 다음 내용을 붙여넣습니다:
```apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
```
2. 파일 이름을 `.htaccess`로 저장합니다. (파일 형식을 '모든 파일'로 선택)
3. 이 `.htaccess` 파일을 시놀로지의 `/web/sokuree_front` 폴더에 업로드합니다.
### 방법 B: Nginx 사용 시
1. Web Station 설정에서 해당 포털 편집 -> **스크립트 언어 설정** 탭 (또는 고급 설정).
2. `try_files $uri $uri/ /index.html;` 규칙을 추가할 수 있는 곳이 있는지 확인합니다. (시놀로지 버전마다 UI가 다름)
3. Nginx가 복잡하다면 마음 편하게 **백엔드 서버를 Apache로 선택**하고 위의 A방법(.htaccess)을 쓰는 것이 가장 쉽습니다.
## 5. 완료
이제 스마트폰이나 다른 PC에서 `http://sokuree.com` (도메인 연결이 되어 있다면) 으로 접속해보세요.
React로 만든 멋진 사이트가 뜰 것입니다!

109
docs/WORDPRESS_SETUP.md Normal file
View File

@ -0,0 +1,109 @@
# Synology NAS Headless WordPress 설치 및 설정 가이드
본 가이드는 Synology NAS (DS920+) 환경에서 Headless WordPress를 구축하기 위한 절차입니다.
React 앱(`sokuree.com`)이 데이터를 가져오기 위해 필요한 백엔드 설정을 다룹니다.
## 1. 사전 준비 (Synology 패키지 센터)
다음 패키지들이 설치되어 있어야 합니다.
- **Web Station**
- **Apache HTTP Server 2.4** (또는 Nginx)
- **PHP 8.0 이상** (Headless 모드는 최신 PHP 권장)
- **MariaDB 10** (데이터베이스)
- **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천)
## 2. 데이터베이스 생성 (MariaDB 10)
1. Synology에서 `MariaDB 10`을 실행하고 root 비밀번호를 설정합니다.
2. `phpMyAdmin`을 실행하여 root로 로그인합니다.
3. 상단 메뉴의 **[데이터베이스]** 탭을 클릭합니다.
4. **새 데이터베이스 만들기**:
- 데이터베이스 이름: `sokuree`
- 데이터와(collation): `utf8mb4_unicode_ci` (한글 및 이모지 지원)
- [만들기] 클릭.
5. (보안 권장) `wp_user` 같은 전용 사용자를 만들고 `sokuree` DB에 대한 모든 권한을 부여합니다.
## 3. WordPress 파일 설치
1. [WordPress.org](https://ko.wordpress.org/download/)에서 최신 zip 파일을 다운로드합니다.
2. Synology File Station을 통해 `/web` 폴더 아래에 새 폴더 `sokuree_wp`를 만듭니다. (React 앱과 구분하기 위해 이름 뒤에 `_wp` 추천)
3. zip 파일을 `sokuree_wp` 폴더에 업로드하고 압축을 풉니다.
4. 최종 경로가 `/web/sokuree_wp/index.php` 등이 보이도록 정리합니다.
## 4. Web Station 설정
1. **Web Station** 실행 -> **웹 서비스 포털** -> **생성** -> **웹 서비스 포털**.
2. **서비스**: `가상 호스트` 선택.
3. **호스트 이름 기반**:
- 호스트 이름: `api.sokuree.com` (React 앱은 `sokuree.com`을 쓸 것이므로, WP는 서브도메인이나 별도 포트 추천. 여기서는 API 전용임을 명확히 하기 위해 `api` 예시)
- 포트: 80 / 443
4. **문서 루트**: 찾아보기 -> `/web/sokuree_wp` 선택.
5. **백엔드 서버**: Apache HTTP Server 2.4 / PHP 8.x 프로필 선택.
6. **확인**을 눌러 저장합니다.
> **주의**: 도메인 `api.sokuree.com`의 DNS A 레코드가 Synology NAS의 공인 IP를 가리키고 있어야 합니다. 공유기 포트포워딩(80, 443)도 필수입니다.
## 5. WordPress 설치 진행
1. 브라우저에서 `http://api.sokuree.com` (설정한 주소) 접속.
2. 언어 선택 (한국어).
3. DB 연결 정보 입력:
- 데이터베이스 이름: `sokuree`
- 사용자명: `root` 또는 생성한 유저
- 비밀번호: MariaDB 비밀번호
- 데이터베이스 호스트: `localhost:/run/mysqld/mysqld10.sock` (Synology MariaDB 10 소켓 경로. 보통 `localhost`로 안 되면 `127.0.0.1:3307` 등을 시도)
4. 사이트 제목, 관리자 계정 생성 후 설치 완료.
## 6. Headless 설정 (필수!)
React 앱이 데이터를 잘 가져오기 위해 다음 설정이 필요합니다.
### A. 고유주소 (Permalinks) 설정
1. 워드프레스 관리자 -> **설정** -> **고유주소**.
2. **글 이름 (Post name)** 선택.
3. [변경 사항 저장].
- *이 설정을 안 하면 JSON API가 404 에러를 낼 수 있습니다.*
### B. CORS 허용 (중요)
React 앱(다른 도메인)에서 WP(API 도메인)로 요청을 보내려면 CORS 허용이 필요합니다.
`functions.php` 파일은 **워드프레스 최상위 폴더가 아니라, 테마 폴더 안**에 있습니다.
---
### [추천] Headless용 테마 선택
Headless 방식에서는 **테마의 디자인이 사용자에게 보이지 않습니다**. (우리가 만든 React 앱이 보이기 때문입니다.)
따라서 관리자 페이지가 빠르고 가벼운 테마가 가장 좋습니다.
**추천 테마:**
1. **Twenty Twenty-Four (기본 테마)**: 가장 무난하고 관리가 잘 됩니다. 기본 설치되어 있으니 그대로 쓰셔도 충분합니다.
2. **Ollie**: 매우 가볍고 모던한 블록 테마입니다.
3. **Frost**: WP Engine에서 만든 미니멀 테마로 불필요한 기능이 없어 Headless용으로 인기가 많습니다.
**설정 방법:**
1. `wp-content` 폴더 더블클릭.
2. `themes` 폴더 더블클릭.
3. 선택한 테마(예: `twentytwentyfour`) 폴더로 들어갑니다.
4. 그 안에 있는 `functions.php` 파일을 엽니다.
5. 파일 맨 끝에 다음 코드를 추가합니다:
```php
add_action( 'init', function() {
header("Access-Control-Allow-Origin: *"); // 실제 운영 시 https://sokuree.com 으로 변경 권장
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
});
```
## 7. React 앱 연결 확인
React 앱의 `src/config/wordpress.js` 파일에서 `BASE_URL`이 위에서 설정한 워드프레스 주소와 맞는지 확인합니다.
예: `https://api.sokuree.com/wp-json`
이제 모든 준비가 되었습니다! React 앱에서 글을 불러올 수 있습니다.
## 8. 문제 해결 (Troubleshooting)
### Q. 테마/플러그인 삭제 시 FTP/SSH 정보를 물어봅니다.
이것은 워드프레스가 파일 권한 문제로 직접 쓰기를 못할 때 발생합니다. `wp-config.php` 파일에 한 줄만 추가하면 해결됩니다.
1. Synology File Station에서 `/web/sokuree_wp/wp-config.php` 파일을 엽니다.
2. 파일 **맨 마지막** 또는 `/* That's all, stop editing! ... */` 위에 다음 줄을 추가하세요:
```php
define('FS_METHOD', 'direct');
```
3. 저장하면 더 이상 FTP 정보를 묻지 않습니다.

View File

@ -0,0 +1,109 @@
# Synology NAS Headless WordPress 설치 및 설정 가이드
본 가이드는 Synology NAS (DS920+) 환경에서 Headless WordPress를 구축하기 위한 절차입니다.
React 앱(`sokuree.com`)이 데이터를 가져오기 위해 필요한 백엔드 설정을 다룹니다.
## 1. 사전 준비 (Synology 패키지 센터)
다음 패키지들이 설치되어 있어야 합니다.
- **Web Station**
- **Apache HTTP Server 2.4** (또는 Nginx)
- **PHP 8.0 이상** (Headless 모드는 최신 PHP 권장)
- **MariaDB 10** (데이터베이스)
- **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천)
## 2. 데이터베이스 생성 (MariaDB 10)
1. Synology에서 `MariaDB 10`을 실행하고 root 비밀번호를 설정합니다.
2. `phpMyAdmin`을 실행하여 root로 로그인합니다.
3. 상단 메뉴의 **[데이터베이스]** 탭을 클릭합니다.
4. **새 데이터베이스 만들기**:
- 데이터베이스 이름: `sokuree`
- 데이터와(collation): `utf8mb4_unicode_ci` (한글 및 이모지 지원)
- [만들기] 클릭.
5. (보안 권장) `wp_user` 같은 전용 사용자를 만들고 `sokuree` DB에 대한 모든 권한을 부여합니다.
## 3. WordPress 파일 설치
1. [WordPress.org](https://ko.wordpress.org/download/)에서 최신 zip 파일을 다운로드합니다.
2. Synology File Station을 통해 `/web` 폴더 아래에 새 폴더 `sokuree_wp`를 만듭니다. (React 앱과 구분하기 위해 이름 뒤에 `_wp` 추천)
3. zip 파일을 `sokuree_wp` 폴더에 업로드하고 압축을 풉니다.
4. 최종 경로가 `/web/sokuree_wp/index.php` 등이 보이도록 정리합니다.
## 4. Web Station 설정
1. **Web Station** 실행 -> **웹 서비스 포털** -> **생성** -> **웹 서비스 포털**.
2. **서비스**: `가상 호스트` 선택.
3. **호스트 이름 기반**:
- 호스트 이름: `api.sokuree.com` (React 앱은 `sokuree.com`을 쓸 것이므로, WP는 서브도메인이나 별도 포트 추천. 여기서는 API 전용임을 명확히 하기 위해 `api` 예시)
- 포트: 80 / 443
4. **문서 루트**: 찾아보기 -> `/web/sokuree_wp` 선택.
5. **백엔드 서버**: Apache HTTP Server 2.4 / PHP 8.x 프로필 선택.
6. **확인**을 눌러 저장합니다.
> **주의**: 도메인 `api.sokuree.com`의 DNS A 레코드가 Synology NAS의 공인 IP를 가리키고 있어야 합니다. 공유기 포트포워딩(80, 443)도 필수입니다.
## 5. WordPress 설치 진행
1. 브라우저에서 `http://api.sokuree.com` (설정한 주소) 접속.
2. 언어 선택 (한국어).
3. DB 연결 정보 입력:
- 데이터베이스 이름: `sokuree`
- 사용자명: `root` 또는 생성한 유저
- 비밀번호: MariaDB 비밀번호
- 데이터베이스 호스트: `localhost:/run/mysqld/mysqld10.sock` (Synology MariaDB 10 소켓 경로. 보통 `localhost`로 안 되면 `127.0.0.1:3307` 등을 시도)
4. 사이트 제목, 관리자 계정 생성 후 설치 완료.
## 6. Headless 설정 (필수!)
React 앱이 데이터를 잘 가져오기 위해 다음 설정이 필요합니다.
### A. 고유주소 (Permalinks) 설정
1. 워드프레스 관리자 -> **설정** -> **고유주소**.
2. **글 이름 (Post name)** 선택.
3. [변경 사항 저장].
- *이 설정을 안 하면 JSON API가 404 에러를 낼 수 있습니다.*
### B. CORS 허용 (중요)
React 앱(다른 도메인)에서 WP(API 도메인)로 요청을 보내려면 CORS 허용이 필요합니다.
`functions.php` 파일은 **워드프레스 최상위 폴더가 아니라, 테마 폴더 안**에 있습니다.
---
### [추천] Headless용 테마 선택
Headless 방식에서는 **테마의 디자인이 사용자에게 보이지 않습니다**. (우리가 만든 React 앱이 보이기 때문입니다.)
따라서 관리자 페이지가 빠르고 가벼운 테마가 가장 좋습니다.
**추천 테마:**
1. **Twenty Twenty-Four (기본 테마)**: 가장 무난하고 관리가 잘 됩니다. 기본 설치되어 있으니 그대로 쓰셔도 충분합니다.
2. **Ollie**: 매우 가볍고 모던한 블록 테마입니다.
3. **Frost**: WP Engine에서 만든 미니멀 테마로 불필요한 기능이 없어 Headless용으로 인기가 많습니다.
**설정 방법:**
1. `wp-content` 폴더 더블클릭.
2. `themes` 폴더 더블클릭.
3. 선택한 테마(예: `twentytwentyfour`) 폴더로 들어갑니다.
4. 그 안에 있는 `functions.php` 파일을 엽니다.
5. 파일 맨 끝에 다음 코드를 추가합니다:
```php
add_action( 'init', function() {
header("Access-Control-Allow-Origin: *"); // 실제 운영 시 https://sokuree.com 으로 변경 권장
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
});
```
## 7. React 앱 연결 확인
React 앱의 [src/config/wordpress.js](file:///d:/antigravity/src/config/wordpress.js) 파일에서 `BASE_URL`이 위에서 설정한 워드프레스 주소와 맞는지 확인합니다.
예: `https://api.sokuree.com/wp-json`
이제 모든 준비가 되었습니다! React 앱에서 글을 불러올 수 있습니다.
## 8. 문제 해결 (Troubleshooting)
### Q. 테마/플러그인 삭제 시 FTP/SSH 정보를 물어봅니다.
이것은 워드프레스가 파일 권한 문제로 직접 쓰기를 못할 때 발생합니다. `wp-config.php` 파일에 한 줄만 추가하면 해결됩니다.
1. Synology File Station에서 `/web/sokuree_wp/wp-config.php` 파일을 엽니다.
2. 파일 **맨 마지막** 또는 `/* That's all, stop editing! ... */` 위에 다음 줄을 추가하세요:
```php
define('FS_METHOD', 'direct');
```
3. 저장하면 더 이상 FTP 정보를 묻지 않습니다.

29
docs/project_status.md Normal file
View File

@ -0,0 +1,29 @@
# Site Polish & Completion
- [x] **Wordpress Integration (Backend)** <!-- id: 8 -->
- [x] API Setup
- [x] News Page Created
- [x] **Frontend Integration** <!-- id: 9 -->
- [x] Add "News" link to Navbar <!-- id: 10 -->
- [x] Add "Latest News" section to Homepage (`Home.jsx`) <!-- id: 11 -->
- [x] Update Footer with News link <!-- id: 12 -->
- [ ] **Content Updates** <!-- id: 14 -->
- [x] Update About Page (Profile, Intro)
- [x] **Update Services Page** <!-- id: 15 -->
- [x] Add "Training Courses" section (ISO, Auditor, Core Tools)
- [x] Add visual elements/images for training
- [x] **Resources Page Upgrade**
- [x] Implement Category Filtering (Downloads/Columns)
- [x] Update API to support categories
- [x] **Contact Page & Global UI**
- [x] Remove global "Consultation" buttons
- [x] Implement EmailJS/Formsubmit for Contact Form
- [x] **Deployment & Git**
- [x] Initialize Local Git Repository
- [x] Create Remote Gitea Repository
- [x] Push to Remote (Tag v1.0.0)
- [ ] Deploy to Synology
- [ ] **Deployment** <!-- id: 7 -->
- [x] Create `DEPLOYMENT_GUIDE_SYNOLOGY.md`
- [ ] Build React App (`npm run build`)
- [ ] Configure Synology Web Station for Frontend

29
docs/task.md.resolved Normal file
View File

@ -0,0 +1,29 @@
# Site Polish & Completion
- [x] **Wordpress Integration (Backend)** <!-- id: 8 -->
- [x] API Setup
- [x] News Page Created
- [x] **Frontend Integration** <!-- id: 9 -->
- [x] Add "News" link to Navbar <!-- id: 10 -->
- [x] Add "Latest News" section to Homepage ([Home.jsx](file:///d:/antigravity/src/pages/Home.jsx)) <!-- id: 11 -->
- [x] Update Footer with News link <!-- id: 12 -->
- [ ] **Content Updates** <!-- id: 14 -->
- [x] Update About Page (Profile, Intro)
- [x] **Update Services Page** <!-- id: 15 -->
- [x] Add "Training Courses" section (ISO, Auditor, Core Tools)
- [x] Add visual elements/images for training
- [x] **Resources Page Upgrade**
- [x] Implement Category Filtering (Downloads/Columns)
- [x] Update API to support categories
- [x] **Contact Page & Global UI**
- [x] Remove global "Consultation" buttons
- [x] Implement EmailJS/Formsubmit for Contact Form
- [x] **Deployment & Git**
- [x] Initialize Local Git Repository
- [x] Create Remote Gitea Repository
- [x] Push to Remote (Tag v1.0.0)
- [ ] Deploy to Synology
- [ ] **Deployment** <!-- id: 7 -->
- [x] Create [DEPLOYMENT_GUIDE_SYNOLOGY.md](file:///C:/Users/choib/.gemini/antigravity/brain/9bc9f20a-cce8-4ffe-8a11-80ec51a849d7/DEPLOYMENT_GUIDE_SYNOLOGY.md)
- [ ] Build React App (`npm run build`)
- [ ] Configure Synology Web Station for Frontend