215 lines
5.2 KiB
Markdown
215 lines
5.2 KiB
Markdown
# Pokedex Online
|
||
|
||
A landing page for the Pokedex Online project, containerized and ready for deployment.
|
||
|
||
## 🚀 Local Development
|
||
|
||
### Quick Start
|
||
|
||
```bash
|
||
# Open index.html directly in browser
|
||
open index.html
|
||
```
|
||
|
||
## 🐳 Docker Deployment
|
||
|
||
### Build and Run Locally
|
||
|
||
```bash
|
||
# Build the image
|
||
docker build -t pokedex-online .
|
||
|
||
# Run the container
|
||
docker run -d -p 8080:80 --name pokedex-online pokedex-online
|
||
|
||
# View in browser
|
||
open http://localhost:8080
|
||
```
|
||
|
||
### Using Docker Compose
|
||
|
||
```bash
|
||
# Start the service
|
||
docker-compose up -d
|
||
|
||
# Stop the service
|
||
docker-compose down
|
||
|
||
# View logs
|
||
docker-compose logs -f
|
||
```
|
||
|
||
## 📦 Portainer Deployment
|
||
|
||
### Option 1: Stack Deployment (Recommended)
|
||
|
||
1. Log into Portainer
|
||
2. Navigate to **Stacks** → **Add stack**
|
||
3. Name: `pokedex-online`
|
||
4. Upload or paste the `docker-compose.yml` contents
|
||
5. Click **Deploy the stack**
|
||
|
||
### Option 2: Container Deployment
|
||
|
||
1. Build the image locally:
|
||
```bash
|
||
docker build -t pokedex-online:latest .
|
||
```
|
||
|
||
2. Tag for your registry (if using):
|
||
```bash
|
||
docker tag pokedex-online:latest your-registry/pokedex-online:latest
|
||
docker push your-registry/pokedex-online:latest
|
||
```
|
||
|
||
3. In Portainer:
|
||
- Navigate to **Containers** → **Add container**
|
||
- Name: `pokedex-online`
|
||
- Image: `pokedex-online:latest` (or your registry path)
|
||
- Port mapping: `8080:80`
|
||
- Restart policy: `unless-stopped`
|
||
- Deploy
|
||
|
||
### Option 3: Git Repository (Portainer with BuildKit)
|
||
|
||
1. In Portainer, navigate to **Stacks** → **Add stack**
|
||
2. Choose **Repository**
|
||
3. Repository URL: Your git repository URL
|
||
4. Compose path: `code/websites/pokedex.online/docker-compose.yml`
|
||
5. Deploy
|
||
|
||
## 🌐 Access
|
||
|
||
After deployment, access the site at:
|
||
- Local: http://localhost:8080
|
||
- Server: http://your-server-ip:8080
|
||
|
||
## <20> Automated Deployment to Synology
|
||
|
||
### Prerequisites
|
||
|
||
1. **SSH Configuration**: Ensure SSH keys are configured for Synology NAS:
|
||
- Host: `synology_internal` (10.0.0.81:2323) or `synology_external` (home.gregrjacobs.com:2323)
|
||
- User: `GregRJacobs`
|
||
- Key: `~/.ssh/ds3627xs_gregrjacobs`
|
||
|
||
2. **Remote Path**: Deployment target is `/volume1/docker/pokedex-online/base` on Synology
|
||
|
||
### Deployment Commands
|
||
|
||
```bash
|
||
# Deploy to internal Synology (10.0.0.81) on default port 8080
|
||
npm run deploy:pokedex
|
||
|
||
# Deploy to internal with custom port
|
||
npm run deploy:pokedex -- --port 8081
|
||
|
||
# Deploy to external Synology (home.gregrjacobs.com)
|
||
npm run deploy:pokedex:external
|
||
|
||
# Deploy to external with custom port
|
||
npm run deploy:pokedex:external -- --port 3000
|
||
|
||
# Full custom deployment
|
||
npm run deploy:pokedex -- --target internal --port 8082
|
||
```
|
||
|
||
### Deployment Process
|
||
|
||
The deployment script automatically:
|
||
|
||
1. **Connects** to Synology via SSH using configured host
|
||
2. **Captures** existing container state for rollback capability
|
||
3. **Transfers** files (index.html, Dockerfile, docker-compose.yml) via SFTP
|
||
4. **Modifies** docker-compose.yml port mapping based on `--port` argument
|
||
5. **Builds** and starts the Docker container with `docker-compose up -d --build`
|
||
6. **Health checks** the deployed container (5 retries with 3s intervals)
|
||
7. **Rolls back** to previous image on failure, or cleans up if no previous deployment existed
|
||
|
||
### Health Check
|
||
|
||
After deployment, the script verifies the container is responding by making HTTP requests to:
|
||
- Internal: `http://10.0.0.81:<port>`
|
||
- External: `http://home.gregrjacobs.com:<port>`
|
||
|
||
If health check fails after 5 attempts, the deployment is rolled back automatically.
|
||
|
||
### Rollback Behavior
|
||
|
||
- **Existing container**: Rolls back to previous Docker image
|
||
- **New deployment**: Runs `docker-compose down --volumes --remove-orphans` to clean up
|
||
|
||
### CLI Options
|
||
|
||
| Option | Values | Default | Description |
|
||
|--------|--------|---------|-------------|
|
||
| `--target` | `internal`, `external` | `internal` | SSH host to deploy to |
|
||
| `--port` | `1-65535` | `8080` | HTTP port to expose on host |
|
||
|
||
### Examples
|
||
|
||
```bash
|
||
# Production deployment to external Synology on port 80
|
||
npm run deploy:pokedex -- --target external --port 80
|
||
|
||
# Development deployment to internal Synology on port 8080
|
||
npm run deploy:pokedex:internal
|
||
|
||
# Test deployment on high port
|
||
npm run deploy:pokedex -- --port 9000
|
||
```
|
||
|
||
## 🔧 Configuration
|
||
|
||
### Change Port
|
||
|
||
Edit `docker-compose.yml`:
|
||
|
||
```yaml
|
||
ports:
|
||
- "3000:80" # Change 3000 to your desired port
|
||
```
|
||
|
||
Or use the `--port` argument during automated deployment.
|
||
|
||
### Custom Domain
|
||
|
||
If using a reverse proxy (nginx, Traefik, Caddy):
|
||
|
||
```yaml
|
||
labels:
|
||
- "traefik.enable=true"
|
||
- "traefik.http.routers.pokedex.rule=Host(`pokedex.yourdomain.com`)"
|
||
```
|
||
|
||
## 📁 Project Structure
|
||
|
||
```
|
||
pokedex.online/
|
||
├── index.html # Landing page
|
||
├── Dockerfile # Container configuration
|
||
├── docker-compose.yml # Compose configuration
|
||
└── README.md # This file
|
||
```
|
||
|
||
## 🛠️ Future Development
|
||
|
||
This is currently a landing page. Future plans:
|
||
- Interactive Pokédex with search
|
||
- Team builder
|
||
- Type effectiveness calculator
|
||
- Collection tracker
|
||
- Integration with Pokémon APIs
|
||
|
||
## 📝 Notes
|
||
|
||
- Uses nginx:alpine for minimal footprint (~23MB)
|
||
- Restart policy set to `unless-stopped`
|
||
- Watchtower compatible for auto-updates
|
||
- No environment variables needed for basic setup
|
||
|
||
---
|
||
|
||
**Status**: In Development
|
||
**Last Updated**: January 2026
|