Update for documentation and config of repo location

This commit is contained in:
NinjaPug
2025-07-07 12:44:39 -04:00
parent 430cd263ac
commit 41f3df8289
18 changed files with 342 additions and 119 deletions

24
.env.example Normal file
View File

@@ -0,0 +1,24 @@
# Docker Registry Browser Environment Configuration
# Copy this file to .env and update with your values
# Registry host and port (without protocol)
REGISTRY_HOST=your-registry.example.com:5000
# Protocol to use for registry connection
REGISTRY_PROTOCOL=https
# Optional: Registry authentication
REGISTRY_USERNAME=your-username
REGISTRY_PASSWORD=your-password
# Development Examples:
# For local registry: REGISTRY_HOST=localhost:5000
# For Harbor: REGISTRY_HOST=harbor.example.com
# For Docker Hub: REGISTRY_HOST=registry-1.docker.io (not typically needed)
# For AWS ECR: REGISTRY_HOST=123456789012.dkr.ecr.us-west-2.amazonaws.com
# Development Usage:
# 1. Copy this file: cp .env.example .env
# 2. Edit .env with your registry details
# 3. Start development server: npm start
# 4. Or use convenience scripts: ./start-dev.sh

View File

@@ -1,12 +1,12 @@
# Multi-stage build for optimized production image
FROM node:18-alpine as build
FROM node:18-alpine AS build
# Set working directory
WORKDIR /app
# Copy package files and install dependencies
COPY package*.json ./
RUN npm ci --only=production --silent
RUN npm ci --silent
# Copy source code
COPY . .
@@ -26,21 +26,22 @@ COPY --from=build /app/dist/docker-registry-browser /usr/share/nginx/html
# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf
# Create nginx user and set permissions
RUN addgroup -g 1001 -S nginx && \
adduser -S -D -H -u 1001 -h /var/cache/nginx -s /sbin/nologin -G nginx -g nginx nginx && \
# Copy entrypoint script
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
# Create assets directory for env.js and set permissions
RUN mkdir -p /usr/share/nginx/html/assets && \
chown -R nginx:nginx /usr/share/nginx/html && \
chown -R nginx:nginx /var/cache/nginx && \
chown -R nginx:nginx /var/log/nginx && \
chown -R nginx:nginx /etc/nginx/conf.d
# Switch to non-root user
USER nginx
chown -R nginx:nginx /etc/nginx/conf.d && \
chmod -R 755 /usr/share/nginx/html
# Add labels for better container management
LABEL maintainer="Your Name <your.email@example.com>"
LABEL description="Docker Registry Browser - A web interface for browsing Docker registries"
LABEL version="1.1.0"
LABEL version="1.0.0"
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
@@ -49,5 +50,5 @@ HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
# Expose port
EXPOSE 80
# Start nginx
CMD ["nginx", "-g", "daemon off;"]
# Use custom entrypoint to generate environment config (run as root for file creation)
ENTRYPOINT ["/docker-entrypoint.sh"]

View File

@@ -13,6 +13,12 @@ A modern, responsive web interface for browsing Docker registries with support f
- Support for OCI and Docker v2 manifests
- Multi-platform image support
## Prerequisites
- Docker installed and running
- Access to a Docker registry (local or remote)
- Network connectivity to the registry
## Quick Start
### Option 1: Docker Run
@@ -24,13 +30,13 @@ docker run -d \
--add-host=host.docker.internal:host-gateway \
-e REGISTRY_HOST=localhost:5000 \
-e REGISTRY_PROTOCOL=http \
your-dockerhub-username/docker-registry-browser:latest
programmingpug/docker-registry-browser:latest
```
### Option 2: Docker Compose
```bash
git clone https://github.com/your-username/docker-registry-browser.git
git clone https://github.com/programmingPug/docker-registry-browser.git
cd docker-registry-browser
docker-compose up -d
```
@@ -38,7 +44,7 @@ docker-compose up -d
### Option 3: Build from Source
```bash
git clone https://github.com/your-username/docker-registry-browser.git
git clone https://github.com/programmingPug/docker-registry-browser.git
cd docker-registry-browser
docker build -t docker-registry-browser .
docker run -d -p 8080:80 --add-host=host.docker.internal:host-gateway docker-registry-browser
@@ -67,6 +73,26 @@ docker run -d -p 8080:80 --add-host=host.docker.internal:host-gateway docker-reg
2. Create a new compose stack with the provided `docker-compose.yml`
3. Deploy the stack
## Supported Registries
This browser works with any Docker Registry v2 compatible registry, including:
- **Local Docker Registry** - Self-hosted registry containers
- **Harbor** - Open source cloud native registry
- **AWS ECR** - Amazon Elastic Container Registry
- **Azure Container Registry** - Microsoft's container registry
- **Google Container Registry** - Google Cloud's container registry
- **GitLab Container Registry** - GitLab's integrated registry
- **Nexus Repository** - Sonatype's repository manager
- **Artifactory** - JFrog's universal repository manager
- **Docker Hub** - (limited support for browsing)
### Registry Requirements
- Docker Registry API v2 support
- CORS headers configured (for web access)
- Network accessibility from the browser container
## Configuration
### Environment Variables
@@ -127,25 +153,43 @@ docker run -d -p 8080:80 --add-host=host.docker.internal:host-gateway docker-reg
### Registry Connection Issues
**Problem**: Cannot connect to registry
**Solution**:
1. Verify `REGISTRY_HOST` is correct
2. Check if registry is accessible from container
3. For local registries, ensure `--add-host=host.docker.internal:host-gateway` is set
**Solutions**:
- Verify `REGISTRY_HOST` is correct (hostname:port format)
- Check if registry is accessible from container
- For local registries, ensure `--add-host=host.docker.internal:host-gateway` is set
- Test registry connectivity: `curl http://your-registry:5000/v2/`
### CORS Issues
**Problem**: API requests blocked by CORS
**Solution**: The nginx configuration includes CORS headers, but ensure your registry allows cross-origin requests
**Solutions**:
- The nginx configuration includes CORS headers
- Ensure your registry allows cross-origin requests
- For development, use the included proxy configuration
### Authentication Issues
**Problem**: 401 Unauthorized errors
**Solution**: Set `REGISTRY_USERNAME` and `REGISTRY_PASSWORD` environment variables
**Solutions**:
- Set `REGISTRY_USERNAME` and `REGISTRY_PASSWORD` environment variables
- Verify credentials are correct for your registry
- Check if registry requires authentication
### Manifest Issues
**Problem**: "OCI index found" errors
**Solution**: This should be resolved in the current version which supports OCI manifests
**Problem**: "OCI index found" or manifest parsing errors
**Solutions**:
- Current version supports OCI manifests
- Ensure registry supports Docker Registry API v2
- Check if image manifests are properly formatted
### Port Conflicts
**Problem**: Port 8080 already in use
**Solutions**:
- Change the host port: `-p 8081:80` instead of `-p 8080:80`
- Stop conflicting services or use different ports
- Check what's using the port: `netstat -tlnp | grep 8080`
## Development
@@ -192,6 +236,13 @@ MIT License - see LICENSE file for details.
## Changelog
### v1.1.0
- Updated Angular to v17
- Improved error handling
- Enhanced UI/UX
- Better multi-platform support
- Optimized build process
### v1.0.0
- Initial release
- Support for Docker v2 and OCI manifests

View File

@@ -46,8 +46,18 @@ if %ERRORLEVEL% neq 0 (
echo.
echo Build completed successfully!
echo.
echo To run the container:
echo docker run -d --name docker-registry-browser -p 8080:80 --add-host=host.docker.internal:host-gateway %FULL_IMAGE_NAME%
echo To run the container with environment variables:
echo docker run -d --name docker-registry-browser ^
echo -p 8080:80 ^
echo --add-host=host.docker.internal:host-gateway ^
echo -e REGISTRY_HOST=your-registry.com:5000 ^
echo -e REGISTRY_PROTOCOL=https ^
echo %FULL_IMAGE_NAME%
echo.
echo Or use docker-compose with .env file:
echo copy .env.example .env
echo # Edit .env with your values
echo docker-compose up -d
echo.
echo To push to registry (if configured):
if "%REGISTRY%"=="" (
@@ -61,7 +71,16 @@ REM Optional: Run the container immediately
set /p REPLY="Do you want to run the container now? (y/N): "
if /i "%REPLY%"=="y" (
echo Starting container...
REM Check if .env file exists
if exist ".env" (
echo Using .env file for configuration...
docker run -d --name docker-registry-browser -p 8080:80 --add-host=host.docker.internal:host-gateway --env-file .env "%FULL_IMAGE_NAME%"
) else (
echo No .env file found, using default values...
echo Copy .env.example to .env and edit it for your registry configuration.
docker run -d --name docker-registry-browser -p 8080:80 --add-host=host.docker.internal:host-gateway -e REGISTRY_HOST=localhost:5000 -e REGISTRY_PROTOCOL=http "%FULL_IMAGE_NAME%"
)
if %ERRORLEVEL% equ 0 (
echo.

View File

@@ -32,8 +32,18 @@ docker build -t "$FULL_IMAGE_NAME" .
echo ""
echo "Build completed successfully!"
echo ""
echo "To run the container:"
echo "docker run -d --name docker-registry-browser -p 8080:80 --add-host=host.docker.internal:host-gateway $FULL_IMAGE_NAME"
echo "To run the container with environment variables:"
echo "docker run -d --name docker-registry-browser \\"
echo " -p 8080:80 \\"
echo " --add-host=host.docker.internal:host-gateway \\"
echo " -e REGISTRY_HOST=your-registry.com:5000 \\"
echo " -e REGISTRY_PROTOCOL=https \\"
echo " $FULL_IMAGE_NAME"
echo ""
echo "Or use docker-compose with .env file:"
echo "cp .env.example .env"
echo "# Edit .env with your values"
echo "docker-compose up -d"
echo ""
echo "To push to registry (if configured):"
if [ -n "$REGISTRY" ]; then
@@ -48,6 +58,19 @@ read -p "Do you want to run the container now? (y/N): " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
echo "Starting container..."
# Check if .env file exists
if [ -f ".env" ]; then
echo "Using .env file for configuration..."
docker run -d \
--name docker-registry-browser \
-p 8080:80 \
--add-host=host.docker.internal:host-gateway \
--env-file .env \
"$FULL_IMAGE_NAME"
else
echo "No .env file found, using default values..."
echo "Copy .env.example to .env and edit it for your registry configuration."
docker run -d \
--name docker-registry-browser \
-p 8080:80 \
@@ -55,6 +78,7 @@ if [[ $REPLY =~ ^[Yy]$ ]]; then
-e REGISTRY_HOST=localhost:5000 \
-e REGISTRY_PROTOCOL=http \
"$FULL_IMAGE_NAME"
fi
echo ""
echo "Container started successfully!"

View File

@@ -8,12 +8,12 @@ services:
ports:
- "8080:80"
environment:
# Registry configuration
- REGISTRY_HOST=host.docker.internal:5000
- REGISTRY_PROTOCOL=http
# Registry configuration - update these values
- REGISTRY_HOST=${REGISTRY_HOST:-localhost:5000}
- REGISTRY_PROTOCOL=${REGISTRY_PROTOCOL:-http}
# Optional: Basic auth if your registry requires it
# - REGISTRY_USERNAME=username
# - REGISTRY_PASSWORD=password
- REGISTRY_USERNAME=${REGISTRY_USERNAME:-}
- REGISTRY_PASSWORD=${REGISTRY_PASSWORD:-}
extra_hosts:
# For accessing host services (like local registry)
- "host.docker.internal:host-gateway"

20
docker-entrypoint.sh Normal file
View File

@@ -0,0 +1,20 @@
#!/bin/sh
# Generate environment configuration for Docker Registry Browser
# This script is run at container startup to inject environment variables
# Create env.js with environment variables
cat <<EOF > /usr/share/nginx/html/assets/env.js
window.env = {
REGISTRY_HOST: '${REGISTRY_HOST:-localhost:5000}',
REGISTRY_PROTOCOL: '${REGISTRY_PROTOCOL:-http}',
REGISTRY_USERNAME: '${REGISTRY_USERNAME:-}',
REGISTRY_PASSWORD: '${REGISTRY_PASSWORD:-}'
};
EOF
echo "Environment configuration generated:"
cat /usr/share/nginx/html/assets/env.js
# Start nginx
exec nginx -g 'daemon off;'

43
generate-proxy-config.js Normal file
View File

@@ -0,0 +1,43 @@
const fs = require('fs');
const path = require('path');
// Get registry configuration from environment variables
const registryHost = process.env.REGISTRY_HOST || 'localhost:5000';
const registryProtocol = process.env.REGISTRY_PROTOCOL || 'http';
const registryUrl = `${registryProtocol}://${registryHost}`;
console.log(`Configuring proxy for registry: ${registryUrl}`);
// Create dynamic proxy configuration
const proxyConfig = {
"/api/*": {
"target": registryUrl,
"secure": registryProtocol === 'https',
"changeOrigin": true,
"logLevel": "debug",
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization"
},
"pathRewrite": {
"^/api": ""
}
}
};
// Add basic auth if credentials are provided
if (process.env.REGISTRY_USERNAME && process.env.REGISTRY_PASSWORD) {
const auth = Buffer.from(`${process.env.REGISTRY_USERNAME}:${process.env.REGISTRY_PASSWORD}`).toString('base64');
proxyConfig["/api/*"].headers.Authorization = `Basic ${auth}`;
console.log('Added basic authentication to proxy');
}
// Write the configuration file
const configPath = path.join(__dirname, 'proxy.conf.json');
fs.writeFileSync(configPath, JSON.stringify(proxyConfig, null, 2));
console.log('Proxy configuration updated successfully');
console.log('Configuration:', JSON.stringify(proxyConfig, null, 2));
module.exports = proxyConfig;

View File

@@ -3,7 +3,8 @@
"version": "1.1.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"start": "node generate-proxy-config.js && ng serve --proxy-config proxy.conf.json",
"start:dev": "npm run start",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"serve": "ng serve --host 0.0.0.0 --port 4200"

View File

@@ -1,6 +1,6 @@
{
"/api/*": {
"target": "http://192.168.1.193:5000",
"target": "http://localhost:5000",
"secure": false,
"changeOrigin": true,
"logLevel": "debug",

View File

@@ -5,11 +5,6 @@
<span class="toolbar-title">Docker Registry Browser</span>
<span class="spacer"></span>
<!-- Dark Mode Toggle -->
<button mat-icon-button (click)="toggleTheme()" [matTooltip]="isDarkMode ? 'Light mode' : 'Dark mode'">
<mat-icon>{{ isDarkMode ? 'light_mode' : 'dark_mode' }}</mat-icon>
</button>
<!-- Menu Button -->
<button mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Actions">
<mat-icon>more_vert</mat-icon>

View File

@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DockerRegistryService } from './services/docker-registry.service';
import { EnvironmentService } from './services/environment.service';
import { Repository, Tag, ImageDetails } from './models/registry.model';
import { PushCommandsDialogComponent } from './components/push-commands-dialog.component';
@@ -11,7 +12,6 @@ import { PushCommandsDialogComponent } from './components/push-commands-dialog.c
})
export class AppComponent implements OnInit {
registryUrl = '/api'; // Using proxy for CORS
registryHost = '192.168.1.193:5000'; // Actual registry host for commands
repositories: Repository[] = [];
selectedRepo: Repository | null = null;
tags: Tag[] = [];
@@ -22,34 +22,19 @@ export class AppComponent implements OnInit {
copyMessage = '';
selectedTag: Tag | null = null;
showingDetails = false;
isDarkMode = false;
constructor(
private registryService: DockerRegistryService,
private environmentService: EnvironmentService,
private dialog: MatDialog
) {}
ngOnInit() {
// Check for saved theme preference
const savedTheme = localStorage.getItem('theme');
this.isDarkMode = savedTheme === 'dark';
this.applyTheme();
this.loadRepositories();
}
toggleTheme() {
this.isDarkMode = !this.isDarkMode;
localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light');
this.applyTheme();
}
private applyTheme() {
if (this.isDarkMode) {
document.body.classList.add('dark-theme');
} else {
document.body.classList.remove('dark-theme');
}
get registryHost(): string {
return this.environmentService.displayHost;
}
openPushCommandsDialog() {

View File

@@ -0,0 +1,49 @@
import { Injectable } from '@angular/core';
declare global {
interface Window {
env: {
REGISTRY_HOST: string;
REGISTRY_PROTOCOL: string;
REGISTRY_USERNAME: string;
REGISTRY_PASSWORD: string;
};
}
}
@Injectable({
providedIn: 'root'
})
export class EnvironmentService {
private config: any = {};
constructor() {
// Load configuration from window object (set by env.js)
this.config = window.env || {};
}
get registryHost(): string {
return this.config.REGISTRY_HOST || 'localhost:5000';
}
get registryProtocol(): string {
return this.config.REGISTRY_PROTOCOL || 'http';
}
get registryUsername(): string {
return this.config.REGISTRY_USERNAME || '';
}
get registryPassword(): string {
return this.config.REGISTRY_PASSWORD || '';
}
get fullRegistryUrl(): string {
return `${this.registryProtocol}://${this.registryHost}`;
}
// Get display host (without protocol) for commands
get displayHost(): string {
return this.registryHost;
}
}

8
src/assets/env.js Normal file
View File

@@ -0,0 +1,8 @@
// Default environment configuration for development
// This file will be overwritten at container startup with actual values
window.env = {
REGISTRY_HOST: 'localhost:5000',
REGISTRY_PROTOCOL: 'http',
REGISTRY_USERNAME: '',
REGISTRY_PASSWORD: ''
};

View File

@@ -10,6 +10,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Load environment configuration -->
<script src="assets/env.js"></script>
</head>
<body class="mat-typography">
<app-root></app-root>

View File

@@ -1,29 +1,29 @@
@echo off
echo 🐳 Docker Registry Browser - Quick Start
echo ========================================
REM Development start script for Docker Registry Browser
REM Usage: start-dev.bat [registry_host] [protocol]
REM Check if npm is installed
npm --version >nul 2>&1
if errorlevel 1 (
echo ❌ npm is not installed. Please install Node.js and npm first.
pause
exit /b 1
REM Set default values
set REGISTRY_HOST=%1
set REGISTRY_PROTOCOL=%2
if "%REGISTRY_HOST%"=="" set REGISTRY_HOST=localhost:5000
if "%REGISTRY_PROTOCOL%"=="" set REGISTRY_PROTOCOL=http
echo Starting Docker Registry Browser development server...
echo Registry: %REGISTRY_PROTOCOL%://%REGISTRY_HOST%
echo.
REM Check if .env file exists and load it
if exist ".env" (
echo Loading environment from .env file...
for /f "delims== tokens=1,2" %%a in (.env) do (
if not "%%a"=="" if not "%%b"=="" (
set %%a=%%b
)
)
)
REM Check if Angular CLI is installed globally
ng version >nul 2>&1
if errorlevel 1 (
echo 📦 Installing Angular CLI globally...
npm install -g @angular/cli
)
REM Install dependencies
echo 📦 Installing dependencies...
npm install
REM Start the development server
echo 🚀 Starting development server...
echo The application will be available at http://localhost:4200
npm start
REM Generate proxy configuration and start server
npm run start
pause

View File

@@ -1,25 +1,25 @@
#!/bin/bash
echo "🐳 Docker Registry Browser - Quick Start"
echo "========================================"
# Development start script for Docker Registry Browser
# Usage: ./start-dev.sh [registry_host] [protocol]
# Check if npm is installed
if ! command -v npm &> /dev/null; then
echo "❌ npm is not installed. Please install Node.js and npm first."
exit 1
# Set default values
REGISTRY_HOST=${1:-"localhost:5000"}
REGISTRY_PROTOCOL=${2:-"http"}
echo "Starting Docker Registry Browser development server..."
echo "Registry: $REGISTRY_PROTOCOL://$REGISTRY_HOST"
echo ""
# Export environment variables
export REGISTRY_HOST="$REGISTRY_HOST"
export REGISTRY_PROTOCOL="$REGISTRY_PROTOCOL"
# Check if .env file exists and source it
if [ -f ".env" ]; then
echo "Loading environment from .env file..."
export $(cat .env | grep -v '^#' | xargs)
fi
# Check if Angular CLI is installed globally
if ! command -v ng &> /dev/null; then
echo "📦 Installing Angular CLI globally..."
npm install -g @angular/cli
fi
# Install dependencies
echo "📦 Installing dependencies..."
npm install
# Start the development server
echo "🚀 Starting development server..."
echo "The application will be available at http://localhost:4200"
npm start
# Generate proxy configuration and start server
npm run start

View File

@@ -1,18 +1,18 @@
<?xml version="1.0"?>
<Container version="2">
<n>docker-registry-browser</n>
<Repository>your-dockerhub-username/docker-registry-browser:latest</Repository>
<Repository>programmingpug/docker-registry-browser:latest</Repository>
<Registry>https://hub.docker.com/</Registry>
<Network>bridge</Network>
<MyIP/>
<Shell>sh</Shell>
<Privileged>false</Privileged>
<Support>https://github.com/your-username/docker-registry-browser</Support>
<Project>https://github.com/your-username/docker-registry-browser</Project>
<Support>https://github.com/programmingPug/docker-registry-browser</Support>
<Project>https://github.com/programmingPug/docker-registry-browser</Project>
<Overview>Docker Registry Browser - A modern web interface for browsing and managing Docker registries. Features include repository browsing, tag listing, image details inspection, and push command generation.</Overview>
<Category>Tools:</Category>
<WebUI>http://[IP]:[PORT:8080]/</WebUI>
<TemplateURL>https://raw.githubusercontent.com/your-username/docker-registry-browser/main/unraid-template.xml</TemplateURL>
<TemplateURL>https://raw.githubusercontent.com/programmingPug/docker-registry-browser/main/unraid-template.xml</TemplateURL>
<Icon>https://raw.githubusercontent.com/docker/docs/main/assets/images/docker-icon.png</Icon>
<ExtraParams>--add-host=host.docker.internal:host-gateway</ExtraParams>
<PostArgs/>