169 lines
3.9 KiB
Markdown
169 lines
3.9 KiB
Markdown
# Deployment Guide
|
|
|
|
## 🚀 Deploy to a VPS with Nginx (Reverse Proxy)
|
|
|
|
This project exports fully static assets in `out/`. You can serve them directly with Nginx.
|
|
|
|
### 1) Build static files
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
By default, the app is built for the root path `/`. If you want to serve it under a subpath (e.g. `/namecard`), build with:
|
|
```bash
|
|
BASE_PATH=/namecard NEXT_PUBLIC_BASE_URL=https://example.com/namecard npm run build
|
|
```
|
|
|
|
### 2) Upload to server
|
|
```bash
|
|
scp -r out/ user@server:/var/www/namecard
|
|
```
|
|
|
|
### 3) Nginx config (root path)
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name example.com; # your domain
|
|
|
|
root /var/www/namecard;
|
|
index index.html;
|
|
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
}
|
|
```
|
|
|
|
### 4) Nginx config (subpath, e.g. /namecard)
|
|
Build with `BASE_PATH=/namecard` and then:
|
|
```nginx
|
|
server {
|
|
listen 80;
|
|
server_name example.com;
|
|
|
|
location /namecard/ {
|
|
alias /var/www/namecard/;
|
|
try_files $uri $uri/ /namecard/index.html;
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5) Reload Nginx
|
|
```bash
|
|
sudo nginx -t && sudo systemctl reload nginx
|
|
```
|
|
|
|
## 🌐 Custom Domain Setup
|
|
|
|
1. **Configure DNS:**
|
|
- Add A record pointing to your VPS IP address
|
|
- Or CNAME if using a subdomain (e.g., `card.rooftop.my`)
|
|
|
|
2. **SSL Certificate:**
|
|
- Use Let's Encrypt: `sudo certbot --nginx`
|
|
- Auto-renewal for free SSL certificates
|
|
|
|
## 📱 PWA Configuration (Optional)
|
|
|
|
To enable "Add to Home Screen" functionality:
|
|
|
|
1. **Create manifest.json:**
|
|
```json
|
|
{
|
|
"name": "Rooftop Energy Namecard",
|
|
"short_name": "Rooftop",
|
|
"description": "Digital namecard for Rooftop Energy staff",
|
|
"start_url": "/",
|
|
"display": "standalone",
|
|
"background_color": "#0a0a0a",
|
|
"theme_color": "#fcd913",
|
|
"icons": [
|
|
{
|
|
"src": "/logo.png",
|
|
"sizes": "192x192",
|
|
"type": "image/png"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
2. **Add to layout.tsx:**
|
|
```tsx
|
|
<head>
|
|
<link rel="manifest" href="/manifest.json" />
|
|
</head>
|
|
```
|
|
|
|
## 🔧 Environment Variables
|
|
|
|
Set at build time (locally or in CI):
|
|
|
|
```
|
|
# Base URL used for Open Graph/Twitter image URLs and absolute links
|
|
NEXT_PUBLIC_BASE_URL=https://example.com
|
|
|
|
# Optional: if serving under a subpath, set both
|
|
BASE_PATH=/namecard
|
|
NEXT_PUBLIC_BASE_URL=https://example.com/namecard
|
|
```
|
|
|
|
## 📊 Performance Monitoring
|
|
|
|
1. **Web Analytics:**
|
|
- Use Google Analytics or similar service
|
|
- Monitor Core Web Vitals with PageSpeed Insights
|
|
|
|
2. **Server Monitoring:**
|
|
- Monitor server resources (CPU, memory, disk)
|
|
- Set up alerts for high resource usage
|
|
|
|
## 🚨 Troubleshooting
|
|
|
|
### Build Errors
|
|
|
|
- **Node version:** Ensure Node.js 18+ is used
|
|
- **Dependencies:** Run `npm install` locally first
|
|
- **TypeScript errors:** Run `npm run type-check` locally
|
|
|
|
### Runtime Issues
|
|
|
|
- **Logo not loading:** Check `public/logo.png` exists
|
|
- **Styling issues:** Verify Tailwind CSS is building correctly
|
|
- **Query params not working:** Check URL encoding
|
|
|
|
### Performance Issues
|
|
|
|
- **Large bundle:** Check for unused dependencies
|
|
- **Slow loading:** Optimize images and enable compression
|
|
- **SEO issues:** Verify meta tags and Open Graph
|
|
|
|
## 📈 Post-Deployment Checklist
|
|
|
|
- [ ] Logo displays correctly
|
|
- [ ] All CTAs work (Call, Email, WhatsApp, LinkedIn)
|
|
- [ ] vCard download functions
|
|
- [ ] Copy details works
|
|
- [ ] Mobile responsive design
|
|
- [ ] URL query overrides work
|
|
- [ ] Performance scores meet targets
|
|
- [ ] Analytics tracking (if enabled)
|
|
- [ ] Custom domain configured (if applicable)
|
|
|
|
## 🔄 Updates & Maintenance
|
|
|
|
### Regular Updates
|
|
|
|
1. **Dependencies:** Run `npm audit` and update packages
|
|
2. **Content:** Edit `src/config/staff.ts` for staff changes
|
|
3. **Logo:** Replace `public/logo.png` when needed
|
|
|
|
### Deployment Updates
|
|
|
|
1. Build locally: `npm run build`
|
|
2. Sync `out/` to your server: `rsync -az out/ user@server:/var/www/namecard`
|
|
3. Reload Nginx: `sudo systemctl reload nginx`
|
|
|
|
---
|
|
|
|
**Need help?** Check the main README.md or contact the development team.
|