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