diff --git a/README.docker.md b/README.docker.md index 9bed5c7..e605e28 100644 --- a/README.docker.md +++ b/README.docker.md @@ -1,35 +1,72 @@ # 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 diff --git a/SIMPLE-SETUP.md b/SIMPLE-SETUP.md new file mode 100644 index 0000000..485efd0 --- /dev/null +++ b/SIMPLE-SETUP.md @@ -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 + +``` + +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 diff --git a/docker-compose.yml b/docker-compose.yml index d367c09..9e1ba08 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -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 diff --git a/gitea-image-push.sh b/gitea-image-push.sh new file mode 100644 index 0000000..ac32364 --- /dev/null +++ b/gitea-image-push.sh @@ -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 diff --git a/setup.sh b/setup.sh index bd4b988..faca2e4 100644 --- a/setup.sh +++ b/setup.sh @@ -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 "========================================"