Synology NAS React 앱 배포 가이드

이제 개발하신 웹사이트를 실제 인터넷(sokuree.com)에 공개하는 과정입니다. 로컬에 있는 코드 전체를 올리는 것이 아니라, **최적화된 빌드 파일(dist 폴더)**만 올리는 것입니다.

1. React 앱 빌드 (내 컴퓨터에서)

개발 모드(dev)는 테스트용입니다. 배포를 위해서는 '빌드'를 해야 합니다.

VS Code 터미널에서 기존 서버가 켜져 있다면 Ctrl + C로 끕니다.
다음 명령어를 입력합니다:
```
npm run build
```
잠시 후 dist 라는 폴더가 새로 생깁니다.
- 이 dist 폴더 안에 있는 파일들(index.html, assets 폴더 등)이 실제 서버에 올라갈 주인공입니다.

2. Synology에 폴더 생성 및 업로드

Synology File Station을 엽니다.
/web 폴더 아래에 새 폴더 sokuree_front를 만듭니다. (워드프레스 폴더와 섞이지 않게 따로 만듭니다)
방금 만든 내 컴퓨터의 dist 폴더 안에 있는 모든 내용물을 sokuree_front 폴더 안으로 업로드합니다.
- 결과 경로 예시: /web/sokuree_front/index.html 이 있어야 함.

3. Web Station 설정 (프론트엔드용)

이제 sokuree.com 주소를 이 폴더에 연결합니다.

Web Station -> 웹 서비스 포털 -> 생성.
서비스: 정적 웹 사이트 (또는 가상 호스트).
설정:
- 호스트 이름: sokuree.com (메인 도메인)
- 문서 루트: /web/sokuree_front
- 백엔드 서버: Nginx (추천) 또는 Apache
확인.

4. 새로고침 시 404 에러 방지 (중요!)

React 대시보드는 "단일 페이지 앱(SPA)"이라서, 새로고침을 하면 시놀로지가 "어? 뉴스 페이지 파일은 없는데?" 하고 404 에러를 냅니다. 이를 방지하는 설정 파일이 필요합니다.

방법 A: 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>

파일 이름을 .htaccess로 저장합니다. (파일 형식을 '모든 파일'로 선택)
이 .htaccess 파일을 시놀로지의 /web/sokuree_front 폴더에 업로드합니다.

방법 B: Nginx 사용 시

Web Station 설정에서 해당 포털 편집 -> 스크립트 언어 설정 탭 (또는 고급 설정).
try_files $uri $uri/ /index.html; 규칙을 추가할 수 있는 곳이 있는지 확인합니다. (시놀로지 버전마다 UI가 다름)
Nginx가 복잡하다면 마음 편하게 백엔드 서버를 Apache로 선택하고 위의 A방법(.htaccess)을 쓰는 것이 가장 쉽습니다.

5. 완료

이제 스마트폰이나 다른 PC에서 http://sokuree.com (도메인 연결이 되어 있다면) 으로 접속해보세요. React로 만든 멋진 사이트가 뜰 것입니다!

3.0 KiB Raw Permalink Blame History