Add Docker build for browser mode with optimized 3-stage build, multi-platform support, comprehensive UI testing, one-click deployment, enterprise SSO integration, and biweekly CI pipeline (#934)
## Docker Build for Browser Solution This PR creates a Docker build for the browser solution (MQTT Explorer server mode). ### Completed: - [x] Create a production Dockerfile for the browser solution (`Dockerfile.browser`) - **NEW**: 3-stage build for maximum optimization - **NEW**: Clean production dependency installation with `yarn --production` - **NEW**: Only compiled dist/ folder copied (no source code) - Alpine Linux base with Node.js 24 - Non-root user (UID 1001) for security - Health check endpoint with proper error handling - Proper signal handling with dumb-init - Production dependencies automatically filtered by yarn - [x] Apply Docker best practices (multi-stage build, minimal image, non-root user, .dockerignore) - Created comprehensive .dockerignore - **FIXED**: Removed events from .dockerignore (needed for build) - **NEW**: Optimized for smaller layers with combined RUN commands - **NEW**: Removed development dependencies from final image - Used alpine base image - [x] Create GitHub Actions workflow for building, publishing, and testing the Docker image - Builds for linux/amd64, linux/arm64, linux/arm/v7 - **FIXED**: Added tsconfig.json and events/** to workflow trigger paths - **FIXED**: Attestation now uses correct digest from build step output - **NEW**: Mosquitto MQTT broker service for integration testing - **NEW**: MQTT broker configurable via MQTT_BROKER_HOST and MQTT_BROKER_PORT environment variables - **NEW**: Full UI test suite runs against containerized application - Tests container startup, health check, HTTP response, data persistence - **NEW**: Image size reporting in workflow summary - Tests verify application works with MQTT broker - Publishes to GitHub Container Registry (ghcr.io/thomasnordquist/mqtt-explorer) - Includes build attestation for supply chain security - [x] Configure workflow to run on push and every two weeks via cron schedule - Runs on 1st and 15th of each month at 2:00 AM UTC - Also runs on push to master/beta/release branches when relevant files change - Manual trigger via workflow_dispatch - [x] Add comprehensive test suite - Basic smoke tests: startup, health check, HTTP response, data persistence - **NEW**: Full UI test suite (`test:browser`) runs against Docker container - **NEW**: Tests connect to configurable MQTT broker (default localhost:1883) - Tests execute with Mosquitto MQTT broker available for backend integration - Same comprehensive tests validate both Electron and browser modes - [x] Test organization and naming - **NEW**: Renamed `test:ui` to `test:electron` for Electron-specific tests - **NEW**: Added `test:browser` script for browser mode tests (runs same UI test suite) - **NEW**: Kept `test:ui` as backward-compatible alias - **NEW**: Renamed `ui-tests` workflow job to `electron-tests` for clarity - [x] Update documentation with Docker usage instructions - Created DOCKER.md with comprehensive Docker documentation - Updated README.md with Docker quick start - **UPDATED**: CI_CD.md now lists all 10 test steps accurately - **NEW**: Added one-click deployment options section - **NEW**: Added authentication modes documentation - [x] **NEW**: One-click deployment solutions - **NEW**: Created docker-compose.yml for easy deployment - **NEW**: Added Play with Docker (PWD) badge for instant browser-based demo - **NEW**: Added DigitalOcean App Platform deployment badge - **NEW**: Added Koyeb deployment badge - **NEW**: Comprehensive deployment options documentation in DOCKER.md - **NEW**: "Try It Now" section in README.md and DOCKER.md with PWD badge - [x] **NEW**: Enterprise authentication integration - **NEW**: Added `MQTT_EXPLORER_SKIP_AUTH` environment variable - **NEW**: Allows disabling built-in authentication for proxy-based auth (OAuth2 Proxy, Authelia, enterprise SSO) - **NEW**: Socket.IO emits `auth-status` event on connection with authentication state - **NEW**: Frontend receives auth status via Socket.IO and skips login dialog when disabled - **NEW**: Logout button hidden when authentication is disabled - **NEW**: Created AuthContext for managing authentication state across components - **NEW**: Comprehensive security warnings in documentation about using skip auth only behind trusted authentication proxies - **NEW**: Updated docker-compose.yml with commented example for proxy authentication - [x] Code review and security scan passed - Fixed health check to handle connection errors properly - Corrected cron schedule comment - No security vulnerabilities found - Fixed image tag naming consistency - Simplified dependency management - **FIXED**: Workflow trigger paths now include all build-affecting files - **FIXED**: Attestation digest reference corrected - **FIXED**: events directory included in Docker build context - **FIXED**: Mosquitto service properly configured for integration testing - **FIXED**: MQTT broker connection now configurable for flexible testing environments - **IMPROVED**: Auth status now communicated via Socket.IO for better real-time synchronization - [x] Rename image to ghcr.io/thomasnordquist/mqtt-explorer (removed -browser suffix) - [x] Add multi-platform support for Raspberry Pi - linux/arm64 (Raspberry Pi 3/4/5) - linux/arm/v7 (Raspberry Pi 2/3) - [x] Upgrade to Node.js 24 (matching project requirements) - [x] **NEW**: Optimize Docker image for minimal size - Only production dependencies (no devDependencies) - No backend source code (only compiled JavaScript) - Removed build tools and dev dependencies - Combined layers for smaller image - **Image size reported in workflow summary** - [x] **NEW**: Fix webpack build configuration - **Enable minification** for production builds (was disabled) - **Update Material-UI references** from @material-ui to @mui - Fix vendor chunking to include @mui and @emotion packages - Reduces bundle size and fixes missing component issues ### Docker Image Features: - **Base**: Alpine Linux with Node.js 24 - **Size**: Reported automatically in workflow summary - **Platforms**: amd64, arm64, arm/v7 (Raspberry Pi support) - **Security**: Non-root user, minimal attack surface - **Reliability**: Health checks, graceful shutdown - **Persistence**: Data volume at `/app/data` - **Registry**: ghcr.io/thomasnordquist/mqtt-explorer - **Runtime deps**: Only production dependencies (automatically filtered) - **Frontend**: Minified webpack bundles with proper vendor splitting - **Testing**: Full UI test suite with configurable MQTT broker integration - **One-Click Deploy**: Play with Docker, DigitalOcean, Koyeb - **Enterprise Ready**: Optional authentication bypass for proxy-based SSO ### Available Tags: - `latest` - Latest stable from master - `master`, `beta`, `release` - Latest from each branch - `<branch>-<sha>` - Specific commits ### Authentication Options: 1. **Standard Mode** (default): Built-in username/password authentication - Set credentials via `MQTT_EXPLORER_USERNAME` and `MQTT_EXPLORER_PASSWORD` environment variables 2. **Skip Authentication Mode**: Set `MQTT_EXPLORER_SKIP_AUTH=true` for proxy-based auth - Use only behind trusted authentication proxies (OAuth2 Proxy, Authelia, enterprise SSO) - Socket.IO automatically informs frontend about auth status on connection - Frontend skips login dialog and logout button is hidden when authentication is disabled - ⚠️ **Security Warning**: Only use in environments with external authentication protection ### One-Click Deployment: Try MQTT Explorer instantly without installation: - **Play with Docker**: Free browser-based demo (click badge in README.md or DOCKER.md) - **DigitalOcean**: Deploy to managed platform starting at $5/month - **Koyeb**: Deploy to global edge network with free tier ### Security Summary: - CodeQL scan passed with no vulnerabilities - Docker image runs as non-root user (UID 1001) - Multi-stage build reduces attack surface - Health check includes proper error handling - Minimal runtime dependencies reduce vulnerability exposure - Full UI test suite validates application functionality - Build attestation with correct digest reference - MQTT broker integration tested with configurable connection via environment variables - Optional authentication bypass for enterprise SSO integration (with comprehensive security warnings) - Auth status communicated via Socket.IO for real-time synchronization <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>create a docker build for the browser solution</issue_title> > <issue_description>Create a docker build for amd64, that ships with a minimal image including nodes. Apply best practices and create a test workflow that builds it , publishes it and tests the built image. Build it every two weeks</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes thomasnordquist/MQTT-Explorer#933 <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com> Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Copilot
@@ -2,6 +2,7 @@ import * as React from 'react'
|
||||
import { LoginDialog } from './LoginDialog'
|
||||
import { updateSocketAuth, connectSocket } from '../browserEventBus'
|
||||
import { isBrowserMode } from '../utils/browserMode'
|
||||
import { AuthContext } from '../contexts/AuthContext'
|
||||
|
||||
interface BrowserAuthWrapperProps {
|
||||
children: React.ReactNode
|
||||
@@ -10,17 +11,48 @@ interface BrowserAuthWrapperProps {
|
||||
export function BrowserAuthWrapper(props: BrowserAuthWrapperProps) {
|
||||
const [isAuthenticated, setIsAuthenticated] = React.useState(false)
|
||||
const [loginError, setLoginError] = React.useState<string | undefined>()
|
||||
const [showLogin, setShowLogin] = React.useState(isBrowserMode) // Show login initially in browser mode
|
||||
const [showLogin, setShowLogin] = React.useState(false)
|
||||
const [waitTimeSeconds, setWaitTimeSeconds] = React.useState<number | undefined>()
|
||||
const [isConnecting, setIsConnecting] = React.useState(false)
|
||||
const [authCheckComplete, setAuthCheckComplete] = React.useState(false)
|
||||
const [authDisabled, setAuthDisabled] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isBrowserMode) {
|
||||
// Not in browser mode, skip authentication
|
||||
setIsAuthenticated(true)
|
||||
setAuthCheckComplete(true)
|
||||
return
|
||||
}
|
||||
|
||||
// Listen for auth status from socket connection
|
||||
const handleAuthStatus = (event: CustomEvent) => {
|
||||
const { authDisabled } = event.detail
|
||||
setAuthDisabled(authDisabled)
|
||||
|
||||
if (authDisabled) {
|
||||
// Authentication is disabled on server
|
||||
console.log('Authentication is disabled on server, skipping login')
|
||||
setIsAuthenticated(true)
|
||||
setShowLogin(false)
|
||||
setAuthCheckComplete(true)
|
||||
} else {
|
||||
// Authentication is enabled, check if we have credentials
|
||||
setAuthCheckComplete(true)
|
||||
|
||||
const username = sessionStorage.getItem('mqtt-explorer-username')
|
||||
const password = sessionStorage.getItem('mqtt-explorer-password')
|
||||
|
||||
if (username && password) {
|
||||
// Credentials exist, connection will authenticate automatically
|
||||
setIsConnecting(true)
|
||||
} else {
|
||||
// No credentials, show login dialog
|
||||
setShowLogin(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for successful authentication from socket
|
||||
const handleAuthSuccess = (event: CustomEvent) => {
|
||||
console.log('Authentication successful')
|
||||
@@ -66,23 +98,15 @@ export function BrowserAuthWrapper(props: BrowserAuthWrapperProps) {
|
||||
}
|
||||
}
|
||||
|
||||
// Connect socket to trigger auth-status event
|
||||
connectSocket()
|
||||
|
||||
window.addEventListener('mqtt-auth-status', handleAuthStatus as EventListener)
|
||||
window.addEventListener('mqtt-auth-success', handleAuthSuccess as EventListener)
|
||||
window.addEventListener('mqtt-auth-error', handleAuthError as EventListener)
|
||||
|
||||
// Check if already authenticated
|
||||
const username = sessionStorage.getItem('mqtt-explorer-username')
|
||||
const password = sessionStorage.getItem('mqtt-explorer-password')
|
||||
|
||||
if (username && password) {
|
||||
// Credentials exist, try to connect with them
|
||||
setIsConnecting(true)
|
||||
connectSocket()
|
||||
} else {
|
||||
// No credentials, show login dialog
|
||||
setShowLogin(true)
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mqtt-auth-status', handleAuthStatus as EventListener)
|
||||
window.removeEventListener('mqtt-auth-success', handleAuthSuccess as EventListener)
|
||||
window.removeEventListener('mqtt-auth-error', handleAuthError as EventListener)
|
||||
}
|
||||
@@ -109,9 +133,14 @@ export function BrowserAuthWrapper(props: BrowserAuthWrapperProps) {
|
||||
return <>{props.children}</>
|
||||
}
|
||||
|
||||
// Show nothing while checking auth status to avoid flash
|
||||
if (!authCheckComplete) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return <LoginDialog open={showLogin} onLogin={handleLogin} error={loginError} waitTimeSeconds={waitTimeSeconds} />
|
||||
}
|
||||
|
||||
return <>{props.children}</>
|
||||
return <AuthContext.Provider value={{ authDisabled }}>{props.children}</AuthContext.Provider>
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import { connectionActions, globalActions, settingsActions } from '../../actions
|
||||
import { Theme } from '@mui/material/styles'
|
||||
import { withStyles } from '@mui/styles'
|
||||
import { isBrowserMode } from '../../utils/browserMode'
|
||||
import { useAuth } from '../../contexts/AuthContext'
|
||||
|
||||
const styles = (theme: Theme) => ({
|
||||
title: {
|
||||
@@ -104,15 +105,7 @@ class TitleBar extends React.PureComponent<Props, {}> {
|
||||
>
|
||||
Disconnect <CloudOff className={classes.disconnectIcon} />
|
||||
</Button>
|
||||
{isBrowserMode && (
|
||||
<Button
|
||||
className={classes.logout}
|
||||
sx={{ color: 'primary.contrastText' }}
|
||||
onClick={this.handleLogout}
|
||||
>
|
||||
Logout <Logout className={classes.disconnectIcon} />
|
||||
</Button>
|
||||
)}
|
||||
<LogoutButton classes={classes} onLogout={this.handleLogout} />
|
||||
<ConnectionHealthIndicatorAny withBackground={true} />
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
@@ -120,6 +113,25 @@ class TitleBar extends React.PureComponent<Props, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
// Separate component to use hooks
|
||||
function LogoutButton({ classes, onLogout }: { classes: any; onLogout: () => void }) {
|
||||
const { authDisabled } = useAuth()
|
||||
|
||||
if (!isBrowserMode || authDisabled) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={classes.logout}
|
||||
sx={{ color: 'primary.contrastText' }}
|
||||
onClick={onLogout}
|
||||
>
|
||||
Logout <Logout className={classes.disconnectIcon} />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: AppState) => {
|
||||
return {
|
||||
topicFilter: state.settings.get('topicFilter'),
|
||||
|
||||
Reference in New Issue
Block a user