davidl/MyTube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Customize build configuration with environment variables

Browse Source
This commit is contained in:
Peifan Li
2025-03-21 10:09:04 -04:00
parent 15d71f546e
commit 2c15fc88b3
6 changed files with 162 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
DEPLOYMENT.md
View File

@@ -19,9 +19,13 @@ The application is containerized into two Docker images:
### 1. Build and Push Docker Images
Use the provided script to build and push the Docker images to Docker Hub:
You can customize the build configuration by setting environment variables before running the build script:
```bash
# Optional: Set custom API URLs for the build (defaults to localhost if not set)
export VITE_API_URL="http://your-build-server:5551/api"
export VITE_BACKEND_URL="http://your-build-server:5551"
# Make the script executable
chmod +x build-and-push.sh
@@ -32,49 +36,36 @@ chmod +x build-and-push.sh
The script will:
- Build the backend and frontend Docker images optimized for amd64 architecture
- Apply the specified environment variables during build time (or use localhost defaults)
- Push the images to Docker Hub under your account (franklioxygen)
### 2. Configure Environment Variables
### 2. Deploy on Server or QNAP Container Station
The docker-compose.yml file uses environment variables that should be set according to your specific deployment environment:
#### For Standard Docker Environment:
#### a) Setting Environment Variables Directly
Before deploying, you can export the variables in your shell:
```bash
export API_URL=http://your-server-ip:5551/api
export BACKEND_URL=http://your-server-ip:5551
```
#### b) Using .env File
Alternatively, create a `.env` file in the same directory as your docker-compose.yml with the following content:
```
API_URL=http://your-server-ip:5551/api
BACKEND_URL=http://your-server-ip:5551
```
Replace `your-server-ip` with your actual server IP address or hostname.
### 3. Deploy on Server or QNAP Container Station
#### For Generic Server with Docker Compose:
By default, the docker-compose.yml is configured to use Docker's service discovery for container communication:
```bash
docker-compose up -d
```
#### For QNAP Container Station:
#### For QNAP Container Station or Environments with Networking Limitations:
1. Copy the `docker-compose.yml` file to your QNAP NAS
2. If using the .env approach, copy the .env file as well
3. Open Container Station on your QNAP
4. Navigate to the "Applications" tab
5. Click on "Create" and select "Create from YAML"
6. Upload the `docker-compose.yml` file or paste its contents
7. Click "Create" to deploy the application
If you're deploying to QNAP or another environment where container-to-container communication via service names doesn't work properly, you'll need to specify the host IP:
1. Create a `.env` file with your server's IP:
```
API_HOST=your-server-ip
API_PORT=5551
```
2. Place this file in the same directory as your docker-compose.yml
3. Deploy using Container Station or docker-compose:
```bash
docker-compose up -d
```
#### Volume Paths on QNAP
@@ -95,13 +86,63 @@ mkdir -p /share/CACHEDEV2_DATA/Medias/MyTube/data
If deploying to a different server (not QNAP), you may want to modify these paths in the docker-compose.yml file.
### 4. Access the Application
### 3. Access the Application
Once deployed:
- Frontend will be accessible at: http://your-server-ip:5556
- Backend API will be accessible at: http://your-server-ip:5551/api
## Docker Networking and Environment Variables
### Container Networking Options
The application provides two ways for containers to communicate with each other:
#### 1. Docker Service Discovery (Default)
In standard Docker environments, containers can communicate using service names. This is the default configuration:
```yaml
environment:
- VITE_API_URL=http://backend:5551/api
- VITE_BACKEND_URL=http://backend:5551
```
This works for most Docker environments including Docker Desktop, Docker Engine on Linux, and many managed container services.
#### 2. Custom Host Configuration (For QNAP and Special Cases)
For environments where service discovery doesn't work properly, you can specify a custom host:
```
# In .env file:
API_HOST=192.168.1.105
API_PORT=5551
```
The entrypoint script will detect these variables and configure the frontend to use the specified host and port.
### How Environment Variables Work
This application handles environment variables in three stages:
1. **Build-time configuration** (via ARG in Dockerfile):
- Default values are set to `http://localhost:5551/api` and `http://localhost:5551`
- These values are compiled into the frontend application
2. **Container start-time configuration** (via entrypoint.sh):
- The entrypoint script replaces the build-time URLs with runtime values
- Uses either service name (backend) or custom host (API_HOST) as configured
- This happens every time the container starts, so no rebuild is needed
3. **Priority order**:
- If API_HOST is provided → Use that explicitly
- If not, use VITE_API_URL from docker-compose → Service discovery with "backend"
- If neither is available → Fall back to default localhost values
## Volume Persistence
The Docker Compose setup includes a volume mount for the backend to store downloaded videos:
@@ -116,28 +157,26 @@ This ensures that your downloaded videos are persistent even if the container is
## Network Configuration
The services are connected through a dedicated bridge network called `mytube-network`.
## Environment Variables
The Docker images now use configurable environment variables with sensible defaults:
### Frontend
- `VITE_API_URL`: Defaults to http://localhost:5551/api if not set
- `VITE_BACKEND_URL`: Defaults to http://localhost:5551 if not set
### Backend
- `PORT`: 5551
The services are connected through a dedicated bridge network called `mytube-network`, which enables service discovery by name.
## Troubleshooting
If you encounter issues:
1. Check if the Docker images were successfully pushed to Docker Hub
2. Verify that your server or Container Station has internet access to pull the images
3. Check the logs for any deployment errors with `docker-compose logs`
4. Ensure ports 5551 and 5556 are not being used by other services
5. Verify that the environment variables are correctly set
6. If backend fails with Python-related errors, verify that the container has Python installed
1. **Network Errors**:
- If you're using Docker service discovery and get connection errors, try using the custom host method
- Create a .env file with API_HOST=your-server-ip and API_PORT=5551
- Check if both containers are running: `docker ps`
- Verify they're on the same network: `docker network inspect mytube-network`
- Check logs for both containers: `docker logs mytube-frontend` and `docker logs mytube-backend`
2. **Checking the Applied Configuration**:
- You can verify what URLs the frontend is using with: `docker logs mytube-frontend`
- The entrypoint script will show "Configuring frontend with the following settings:"
3. **General Troubleshooting**:
- Ensure ports 5551 and 5556 are not being used by other services
- Check for any deployment errors with `docker-compose logs`
- If backend fails with Python-related errors, verify that the container has Python installed

2
backend/data/status.json
View File

@@ -1,5 +1,5 @@
{
"isDownloading": false,
"title": "",
"timestamp": 1742524470654
"timestamp": 1742565862280
}

11
build-and-push.sh
View File

@@ -6,6 +6,10 @@ USERNAME="franklioxygen"
BACKEND_IMAGE="$USERNAME/mytube:backend-latest"
FRONTEND_IMAGE="$USERNAME/mytube:frontend-latest"
# Default build arguments (can be overridden by environment variables)
VITE_API_URL=${VITE_API_URL:-"http://localhost:5551/api"}
VITE_BACKEND_URL=${VITE_BACKEND_URL:-"http://localhost:5551"}
# Ensure Docker is running
echo "🔍 Checking if Docker is running..."
$DOCKER_PATH ps > /dev/null 2>&1 || { echo "❌ Docker is not running. Please start Docker and try again."; exit 1; }
@@ -18,9 +22,12 @@ $DOCKER_PATH build --no-cache --platform linux/amd64 -t $BACKEND_IMAGE .
cd ..
# Build frontend image with no-cache to force rebuild
echo "🏗️ Building frontend image..."
echo "🏗️ Building frontend image with default localhost configuration..."
cd frontend
$DOCKER_PATH build --no-cache --platform linux/amd64 -t $FRONTEND_IMAGE .
$DOCKER_PATH build --no-cache --platform linux/amd64 \
--build-arg VITE_API_URL="$VITE_API_URL" \
--build-arg VITE_BACKEND_URL="$VITE_BACKEND_URL" \
-t $FRONTEND_IMAGE .
cd ..
# Push images to Docker Hub

11
docker-compose.yml
View File

@@ -23,9 +23,14 @@ services:
ports:
- "5556:5556"
environment:
# Update these values with your actual server IP/hostname and ports
- VITE_API_URL=${API_URL:-http://localhost:5551/api}
- VITE_BACKEND_URL=${BACKEND_URL:-http://localhost:5551}
# For internal container communication, use the service name
# These will be replaced at runtime by the entrypoint script
- VITE_API_URL=http://backend:5551/api
- VITE_BACKEND_URL=http://backend:5551
# For QNAP or other environments where service discovery doesn't work,
# you can override these values using a .env file with:
# - API_HOST=your-ip-or-hostname
# - API_PORT=5551
depends_on:
- backend
restart: unless-stopped

13
frontend/Dockerfile
View File

@@ -7,9 +7,9 @@ RUN npm install
COPY . .
# Create a production build with environment variables
ARG VITE_API_URL=http://192.168.1.105:5551/api
ARG VITE_BACKEND_URL=http://192.168.1.105:5551
# Set default build-time arguments that can be overridden during build
ARG VITE_API_URL=http://localhost:5551/api
ARG VITE_BACKEND_URL=http://localhost:5551
ENV VITE_API_URL=${VITE_API_URL}
ENV VITE_BACKEND_URL=${VITE_BACKEND_URL}
@@ -20,4 +20,11 @@ FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 5556
# Add a script to replace environment variables at runtime
RUN apk add --no-cache bash
COPY ./entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

40
frontend/entrypoint.sh Normal file
View File

@@ -0,0 +1,40 @@
#!/bin/bash
set -e
# Default values from build time
DEFAULT_API_URL="http://localhost:5551/api"
DEFAULT_BACKEND_URL="http://localhost:5551"
# Runtime values from docker-compose environment variables
DOCKER_API_URL="${VITE_API_URL:-http://backend:5551/api}"
DOCKER_BACKEND_URL="${VITE_BACKEND_URL:-http://backend:5551}"
# If API_HOST is provided, override with custom host configuration
if [ ! -z "$API_HOST" ]; then
API_PORT="${API_PORT:-5551}"
DOCKER_API_URL="http://${API_HOST}:${API_PORT}/api"
DOCKER_BACKEND_URL="http://${API_HOST}:${API_PORT}"
echo "Using custom host configuration: $API_HOST:$API_PORT"
fi
echo "Configuring frontend with the following settings:"
echo "API URL: $DOCKER_API_URL"
echo "Backend URL: $DOCKER_BACKEND_URL"
# Replace environment variables in the JavaScript files
# We need to escape special characters for sed
ESCAPED_DEFAULT_API_URL=$(echo $DEFAULT_API_URL | sed 's/\//\\\//g')
ESCAPED_API_URL=$(echo $DOCKER_API_URL | sed 's/\//\\\//g')
ESCAPED_DEFAULT_BACKEND_URL=$(echo $DEFAULT_BACKEND_URL | sed 's/\//\\\//g')
ESCAPED_BACKEND_URL=$(echo $DOCKER_BACKEND_URL | sed 's/\//\\\//g')
echo "Replacing $DEFAULT_API_URL with $DOCKER_API_URL in JavaScript files..."
find /usr/share/nginx/html -type f -name "*.js" -exec sed -i "s/$ESCAPED_DEFAULT_API_URL/$ESCAPED_API_URL/g" {} \;
echo "Replacing $DEFAULT_BACKEND_URL with $DOCKER_BACKEND_URL in JavaScript files..."
find /usr/share/nginx/html -type f -name "*.js" -exec sed -i "s/$ESCAPED_DEFAULT_BACKEND_URL/$ESCAPED_BACKEND_URL/g" {} \;
echo "Environment variable substitution completed."
# Execute CMD
exec "$@"