# 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로 만든 멋진 사이트가 뜰 것입니다!