196 lines
3.9 KiB
Markdown
196 lines
3.9 KiB
Markdown
# Deployment Guide
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 18+ and npm/yarn
|
|
- Backend API running on configured port (default: 3000)
|
|
|
|
## Development
|
|
|
|
```bash
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
The app will be available at `http://localhost:3001`
|
|
|
|
## Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This creates an optimized production build in the `dist/` directory.
|
|
|
|
## Environment Variables
|
|
|
|
Create a `.env` file:
|
|
|
|
```env
|
|
VITE_API_BASE_URL=http://localhost:3000
|
|
VITE_APP_NAME=DBIS Admin Console
|
|
VITE_REAL_TIME_UPDATE_INTERVAL=5000
|
|
```
|
|
|
|
For production, update `VITE_API_BASE_URL` to your production API URL.
|
|
|
|
## Production Deployment
|
|
|
|
### Option 1: Static Hosting (Recommended)
|
|
|
|
The build output is static files that can be served by any web server:
|
|
|
|
1. Build the application:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
2. Deploy the `dist/` directory to:
|
|
- **Nginx**: Copy `dist/` contents to `/var/www/html/`
|
|
- **Apache**: Copy `dist/` contents to web root
|
|
- **CDN**: Upload to S3/CloudFront, Azure Blob, etc.
|
|
- **Vercel/Netlify**: Connect repository and deploy
|
|
|
|
### Option 2: Docker
|
|
|
|
Create a `Dockerfile`:
|
|
|
|
```dockerfile
|
|
FROM node:18-alpine AS builder
|
|
WORKDIR /app
|
|
COPY package*.json ./
|
|
RUN npm ci
|
|
COPY . .
|
|
RUN npm run build
|
|
|
|
FROM nginx:alpine
|
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
EXPOSE 80
|
|
CMD ["nginx", "-g", "daemon off;"]
|
|
```
|
|
|
|
Build and run:
|
|
```bash
|
|
docker build -t dbis-admin-console .
|
|
docker run -p 80:80 dbis-admin-console
|
|
```
|
|
|
|
### Option 3: Serve with Node.js
|
|
|
|
Install `serve`:
|
|
```bash
|
|
npm install -g serve
|
|
```
|
|
|
|
Serve the build:
|
|
```bash
|
|
serve -s dist -l 3001
|
|
```
|
|
|
|
## Nginx Configuration
|
|
|
|
Example `nginx.conf`:
|
|
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name admin.dbis.local;
|
|
root /usr/share/nginx/html;
|
|
index index.html;
|
|
|
|
# Gzip compression
|
|
gzip on;
|
|
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
|
|
|
# Security headers
|
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
|
add_header X-Content-Type-Options "nosniff" always;
|
|
add_header X-XSS-Protection "1; mode=block" always;
|
|
|
|
# SPA routing
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
|
|
# API proxy (if needed)
|
|
location /api {
|
|
proxy_pass http://backend:3000;
|
|
proxy_set_header Host $host;
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
}
|
|
|
|
# Cache static assets
|
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
|
expires 1y;
|
|
add_header Cache-Control "public, immutable";
|
|
}
|
|
}
|
|
```
|
|
|
|
## Environment-Specific Builds
|
|
|
|
### Development
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Staging
|
|
```bash
|
|
VITE_API_BASE_URL=https://staging-api.dbis.local npm run build
|
|
```
|
|
|
|
### Production
|
|
```bash
|
|
VITE_API_BASE_URL=https://api.dbis.local npm run build
|
|
```
|
|
|
|
## Health Checks
|
|
|
|
The application includes error boundaries and error handling. Monitor:
|
|
- API connectivity
|
|
- Authentication token validity
|
|
- Error rates in console/logs
|
|
|
|
## Performance Optimization
|
|
|
|
- Code splitting is enabled
|
|
- Assets are minified and optimized
|
|
- Lazy loading ready for routes
|
|
- Efficient data polling (10-15s intervals)
|
|
|
|
## Security Considerations
|
|
|
|
- JWT tokens stored in localStorage (consider httpOnly cookies for production)
|
|
- CORS configured on backend
|
|
- XSS protection via React
|
|
- CSRF protection via token validation
|
|
- Security headers in nginx config
|
|
|
|
## Monitoring
|
|
|
|
Recommended monitoring:
|
|
- Error tracking (Sentry, LogRocket)
|
|
- Performance monitoring (Web Vitals)
|
|
- API response times
|
|
- User session tracking
|
|
|
|
## Troubleshooting
|
|
|
|
### Build fails
|
|
- Check Node.js version (18+)
|
|
- Clear `node_modules` and reinstall
|
|
- Check for TypeScript errors
|
|
|
|
### API connection issues
|
|
- Verify `VITE_API_BASE_URL` is correct
|
|
- Check CORS settings on backend
|
|
- Verify network connectivity
|
|
|
|
### Authentication issues
|
|
- Check token expiration
|
|
- Verify backend auth endpoints
|
|
- Check browser console for errors
|
|
|