matt
/
puffinOffsetCalculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates

This commit is contained in:
Matt 2025-04-25 01:39:55 +02:00
parent 58284e0d91
commit fce618589f
5 changed files with 214 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
README.docker.md
View File

@ -1,36 +1,73 @@
# Puffin Offset Calculator Docker Setup
This guide explains how to containerize the Puffin Offset Calculator app and embed it into your WordPress website.
This guide explains how to containerize the Puffin Offset Calculator app, push it to a Gitea container registry, and embed it into your WordPress website.
## Files Overview
- `Dockerfile` - Defines how to build the Docker image for the React app
- `docker-compose.yml` - Orchestrates the container deployment, pulling the image from Gitea registry
- `nginx.conf` - Configures Nginx to serve the React app correctly
- `docker-compose.yml` - Orchestrates the container deployment
- `wordpress-integration.php` - WordPress plugin file for embedding the calculator
- `setup.sh` - Script to automate the container deployment process including Gitea login
- `gitea-image-push.sh` - Script to build and push the Docker image to Gitea registry
- `puffin-calculator.css` - Styling for the WordPress integration
- `puffin-calculator.js` - JavaScript for the WordPress integration
## Workflow Overview
The workflow to deploy the Puffin Offset Calculator consists of two main stages:
1. **Build and Push Stage**: Build the Docker image and push it to the Gitea container registry
2. **Deployment Stage**: Pull the image from the registry and run it on your server
## Getting Started
### Prerequisites
- Docker and Docker Compose installed on your server
- Docker and Docker Compose installed on your development machine and server
- Gitea repository access with container registry enabled
- WordPress website where you want to embed the calculator
- Basic knowledge of Docker and WordPress
### Step 1: Build and Run the Docker Container
### Step 1: Build and Push the Docker Image
1. Place the `Dockerfile`, `nginx.conf`, and `docker-compose.yml` files in the project root directory (where your React app code is located).
1. Place the `Dockerfile`, `nginx.conf`, and `gitea-image-push.sh` files in the project root directory.
2. Create a `logs` directory for storing Nginx logs:
2. Make the image push script executable:
```bash
mkdir logs
chmod +x gitea-image-push.sh
```
3. Build and start the container:
3. Run the script to build and push the image:
```bash
docker-compose up -d
./gitea-image-push.sh
```
This script will:
- Prompt you to log in to the Gitea registry
- Build the Docker image using the Dockerfile
- Push the built image to the Gitea registry
### Step 2: Deploy the Container
1. Place the `docker-compose.yml`, `nginx.conf`, and `setup.sh` files in a directory on your server.
2. Make the setup script executable:
```bash
chmod +x setup.sh
```
3. Run the setup script:
```bash
./setup.sh
```
This script will:
- Create a logs directory
- Check if Docker and Docker Compose are installed
- Prompt you to log in to the Gitea registry
- Pull and start the Docker container
4. Verify the container is running:
```bash
docker ps

88
SIMPLE-SETUP.md Normal file
View File

@ -0,0 +1,88 @@
# Simple Puffin Offset Calculator Setup
This guide provides a minimalist approach to run the Puffin Offset Calculator in a Docker container and embed it into WordPress.
## Quick Start
### 1. Create a Directory and Required Files
Create a new directory and add these files:
- `docker-compose.yml` - Configuration for Docker container
- `.env` - Environment variables for the application
### 2. Run with Docker Compose
```bash
docker-compose up -d
```
This will:
- Pull the calculator image from Gitea registry
- Start the container
- Make the calculator available at http://localhost:8080
### 3. Embed in WordPress
Add this code to a page in your WordPress site:
```html
<iframe
src="http://localhost:8080"
width="100%"
height="800px"
frameborder="0"
style="border:none;overflow:hidden"
title="Carbon Offset Calculator">
</iframe>
```
Adjust the URL if you're hosting the Docker container on a different server.
## docker-compose.yml File Contents
```yaml
version: '3.8'
services:
puffin-calculator:
image: code.letsbe.solutions/matt/puffinoffsetcalculator:latest
container_name: puffin-calculator
ports:
- "8080:80"
restart: unless-stopped
environment:
- NODE_ENV=production
# Include any environment variables from .env file
- REACT_APP_API_KEY=${REACT_APP_API_KEY}
- REACT_APP_API_URL=${REACT_APP_API_URL}
volumes:
# Persist Nginx logs
- ./logs:/var/log/nginx
```
## .env File Example
Create a `.env` file with any required environment variables:
```
REACT_APP_API_KEY=your_api_key_here
REACT_APP_API_URL=https://api.example.com
```
## Gitea Registry Authentication
If you get authentication errors when Docker tries to pull the image:
```bash
docker login code.letsbe.solutions
# Enter your Gitea credentials when prompted
```
Then run `docker-compose up -d` again.
## Troubleshooting
- **Container not starting**: Check the logs with `docker-compose logs puffin-calculator`
- **Calculator not showing in WordPress**: Ensure the server hosting Docker is accessible from your WordPress server
- **CORS issues**: Your WordPress site must be able to load content from the calculator URL

14
docker-compose.yml
View File

@ -2,22 +2,16 @@ version: '3.8'
services:
puffin-calculator:
build: .
image: code.letsbe.solutions/matt/puffinoffsetcalculator:latest
container_name: puffin-calculator
ports:
- "8080:80"
restart: unless-stopped
environment:
- NODE_ENV=production
# Include any environment variables from .env file
- REACT_APP_API_KEY=${REACT_APP_API_KEY}
- REACT_APP_API_URL=${REACT_APP_API_URL}
volumes:
# For development only - remove these in production
# - ./src:/app/src
# - ./public:/app/public
# Persist Nginx logs
- ./logs:/var/log/nginx
networks:
- puffin-network
networks:
puffin-network:
driver: bridge

62
gitea-image-push.sh Normal file
View File

@ -0,0 +1,62 @@
#!/bin/bash
# Puffin Offset Calculator - Gitea Container Registry Push Script
# This script builds and pushes the Docker image to the Gitea container registry
echo "========================================"
echo "Puffin Offset Calculator - Gitea Push"
echo "========================================"
# Check if Docker is installed
if ! command -v docker &> /dev/null; then
echo "Error: Docker is not installed. Please install Docker first."
exit 1
fi
# Log in to Gitea registry
echo "Logging into Gitea container registry..."
echo "Please enter your Gitea credentials when prompted:"
docker login code.letsbe.solutions
if [ $? -ne 0 ]; then
echo "========================================"
echo "Error: Failed to log in to the Gitea registry."
echo "Please check your credentials and try again."
echo "========================================"
exit 1
fi
# Build the Docker image
echo "Building Docker image..."
docker build -t code.letsbe.solutions/matt/puffinoffsetcalculator:latest .
if [ $? -ne 0 ]; then
echo "========================================"
echo "Error: Failed to build the Docker image."
echo "Please check the error messages above and try again."
echo "========================================"
exit 1
fi
# Push the image to Gitea registry
echo "Pushing image to Gitea registry..."
docker push code.letsbe.solutions/matt/puffinoffsetcalculator:latest
if [ $? -eq 0 ]; then
echo "========================================"
echo "Success! Image pushed to Gitea registry."
echo ""
echo "The image is now available at: code.letsbe.solutions/matt/puffinoffsetcalculator:latest"
echo ""
echo "Next steps:"
echo "1. Copy setup.sh, docker-compose.yml, and nginx.conf to your server"
echo "2. Run the setup script on your server to deploy the container"
echo "3. Follow the WordPress integration steps in README.docker.md"
echo "========================================"
else
echo "========================================"
echo "Error: Failed to push the image to Gitea registry."
echo "Please check the error messages above and try again."
echo "========================================"
exit 1
fi

16
setup.sh
View File

@ -25,8 +25,20 @@ if ! command -v docker-compose &> /dev/null; then
exit 1
fi
echo "Building and starting the Docker container..."
docker-compose up -d --build
echo "Logging into Gitea container registry..."
echo "Please enter your Gitea credentials when prompted:"
docker login code.letsbe.solutions
if [ $? -ne 0 ]; then
echo "========================================"
echo "Error: Failed to log in to the Gitea registry."
echo "Please check your credentials and try again."
echo "========================================"
exit 1
fi
echo "Pulling and starting the Docker container..."
docker-compose up -d
if [ $? -eq 0 ]; then
echo "========================================"