106 lines
1.6 KiB
Markdown
106 lines
1.6 KiB
Markdown
# Merk Korea PDA 배포 가이드
|
|
|
|
## 1. 로컬 빌드 및 실행
|
|
|
|
### 빌드
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
빌드 결과물은 `dist/` 폴더에 생성됩니다.
|
|
|
|
### 로컬에서 빌드 결과 확인
|
|
```bash
|
|
npm run preview
|
|
```
|
|
http://localhost:4173 에서 확인 가능
|
|
|
|
---
|
|
|
|
## 2. Docker로 배포
|
|
|
|
### 이미지 빌드
|
|
```bash
|
|
docker build -t merk-korea-pda .
|
|
```
|
|
|
|
### 컨테이너 실행
|
|
```bash
|
|
docker run -d -p 80:80 --name merk-pda merk-korea-pda
|
|
```
|
|
|
|
http://localhost 에서 확인 가능
|
|
|
|
### 컨테이너 중지/삭제
|
|
```bash
|
|
docker stop merk-pda
|
|
docker rm merk-pda
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Docker Compose (선택)
|
|
|
|
`docker-compose.yml` 파일 생성:
|
|
```yaml
|
|
version: '3.8'
|
|
services:
|
|
web:
|
|
build: .
|
|
ports:
|
|
- "80:80"
|
|
restart: unless-stopped
|
|
```
|
|
|
|
실행:
|
|
```bash
|
|
docker-compose up -d
|
|
```
|
|
|
|
---
|
|
|
|
## 4. 정적 파일 직접 배포
|
|
|
|
`dist/` 폴더를 웹 서버에 업로드하면 됩니다.
|
|
|
|
### 주의사항
|
|
React Router(SPA)를 사용하므로, 모든 경로를 `index.html`로 리다이렉트 설정 필요:
|
|
|
|
**Nginx 예시:**
|
|
```nginx
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
```
|
|
|
|
**Apache 예시 (.htaccess):**
|
|
```apache
|
|
RewriteEngine On
|
|
RewriteBase /
|
|
RewriteRule ^index\.html$ - [L]
|
|
RewriteCond %{REQUEST_FILENAME} !-f
|
|
RewriteCond %{REQUEST_FILENAME} !-d
|
|
RewriteRule . /index.html [L]
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 포트 변경
|
|
|
|
### Docker 포트 변경
|
|
```bash
|
|
docker run -d -p 3000:80 --name merk-pda merk-korea-pda
|
|
```
|
|
→ http://localhost:3000 에서 접근
|
|
|
|
### Vite 개발 서버 포트 변경
|
|
`vite.config.ts`에서 설정:
|
|
```ts
|
|
export default defineConfig({
|
|
server: {
|
|
port: 3000
|
|
}
|
|
})
|
|
```
|