DevOps Assessment - Basic Level

React Static Deployment with Docker and CI/CD

A comprehensive assessment for junior/trainee DevOps engineers focusing on containerization, continuous integration, and deployment practices.

📋 Assessment Overview

This assessment will test your understanding and practical skills in:

Docker containerization for React applications
GitHub Actions CI/CD pipeline creation
Railway.com deployment without automated repo linking
Best practices for static site deployment
Documentation and troubleshooting skills

Estimated Time: 3-4 hours
Difficulty: Basic to Intermediate
Prerequisites: Basic knowledge of Git, React, and command-line interface

🎯 Learning Objectives

By completing this assessment, you will:

Understand Docker multi-stage builds for React applications
Create efficient CI/CD pipelines using GitHub Actions
Deploy applications to Railway.com using manual deployment methods
Implement security best practices in containerized deployments
Document and troubleshoot deployment processes

📚 Required Reading & Resources

Before starting, please review these essential resources:

Docker Resources

Docker Build Documentation - Official Docker build guide
Multi-stage Builds - Optimizing Docker images
Docker Best Practices - Production-ready containers
Dockerfile Reference - Complete Dockerfile syntax

GitHub Actions Resources

GitHub Actions Documentation - Complete CI/CD guide
Workflow Syntax - YAML configuration reference
GitHub Actions Marketplace - Pre-built actions

Railway.com Resources

Railway Documentation - Complete deployment guide
Railway CLI - Command-line interface
Deployment Guide - Deployment concepts
Environment Variables - Configuration management

React & Static Sites

Create React App - Deployment guide
React Production Build - Optimization guide

🚀 Assessment Tasks

Task 1: Project Setup and Initialization

Objective: Create a React application with proper project structure

1.1 Create React Application

# You will need to run these commands
npx create-react-app devops-react-app
cd devops-react-app

1.2 Project Structure Requirements

Your project should include:

src/ - React source code
public/ - Static assets
package.json - Dependencies and scripts
Dockerfile - Container configuration
.github/workflows/ - CI/CD pipeline
README.md - Documentation
.dockerignore - Docker ignore patterns
.gitignore - Git ignore patterns

1.3 Customize the Application

Modify the default React app to display:
- Your name and assessment date
- A simple navigation menu
- At least 2 different pages/components
- Basic styling (CSS/Styled Components)

Deliverable: A functional React application with custom content

Task 2: Docker Containerization

Objective: Create an optimized Docker container for the React application

2.1 Create Dockerfile

Create a Dockerfile with the following requirements:

Requirements:

Use multi-stage build for optimization
Base image: node:20-alpine for build stage
Production image: nginx:alpine for serving
Copy only necessary files
Set appropriate working directories
Expose port 80
Include health check

Dockerfile Template Structure:

# Build stage
FROM node:20-alpine AS build

# Set working directory
WORKDIR /app

# Copy package files
# Install dependencies
# Copy source code
# Build the application

# Production stage
FROM nginx:alpine AS production

# Copy built files from build stage
# Copy nginx configuration (optional)
# Expose port
# Add health check
# Start nginx

2.2 Create .dockerignore

Include:

node_modules
npm-debug.log
.git
.gitignore
README.md
Dockerfile
.dockerignore
coverage
.env.local
.env.development.local
.env.test.local
.env.production.local

2.3 Nginx Configuration (Optional)

Create nginx.conf for custom server configuration:

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

    # Security headers
    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options DENY;
    add_header X-XSS-Protection "1; mode=block";
}

2.4 Test Docker Build

Build and test your container locally:

# Build the image
docker build -t devops-react-app .

# Run the container
docker run -p 8080:80 devops-react-app

# Test in browser: http://localhost:8080

Expected Outcomes:

Image size should be under 50MB
Application loads successfully
All routes work correctly
Health check passes

Deliverable: Working Dockerfile with multi-stage build

Task 3: GitHub Actions CI/CD Pipeline

Objective: Create an automated CI/CD pipeline using GitHub Actions

3.1 Create Workflow File

Create .github/workflows/ci-cd.yml with the following stages:

Pipeline Requirements:

Trigger: Push to main branch and pull requests
Build Stage:
- Install dependencies
- Run tests (if any)
- Build Docker image
Security Stage:
- Scan for vulnerabilities
- Lint Dockerfile
Deploy Stage:
- Deploy to Railway.com (manual method)

3.2 Basic CI/CD Pipeline Structure

name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  # Define your environment variables here

jobs:
  build:
    name: Build and Test
    runs-on: ubuntu-latest

    steps:
      # Checkout code
      # Setup Node.js
      # Cache dependencies
      # Install dependencies
      # Run tests
      # Build application

  docker:
    name: Build Docker Image
    needs: build
    runs-on: ubuntu-latest

    steps:
      # Checkout code
      # Setup Docker Buildx
      # Build Docker image
      # Test Docker image

  security:
    name: Security Scan
    needs: docker
    runs-on: ubuntu-latest

    steps:
      # Dockerfile linting
      # Vulnerability scanning

  deploy:
    name: Deploy to Railway
    needs: [build, docker, security]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      # Deploy using Railway CLI

3.3 Advanced Pipeline Features

Add these features to your pipeline:

Caching: Cache node_modules and Docker layers
Matrix Strategy: Test on multiple Node.js versions
Artifact Storage: Store build artifacts
Notifications: Slack/Discord/Email notifications (optional)
Security Scanning: Use Trivy or Snyk for vulnerability scanning

Deliverable: Complete GitHub Actions workflow file

Task 4: Railway.com Deployment (Manual Method)

Objective: Deploy the application to Railway.com without using automatic GitHub integration

4.1 Railway Account Setup

Visit Railway.com
Create a free account

Install Railway CLI:

npm install -g @railway/cli
# or
curl -fsSL https://railway.app/install.sh | sh

4.2 Manual Deployment Process

Important: Do NOT use the "Deploy from GitHub" button. We want manual deployment for this assessment.

Steps:

Initialize Railway Project:
```
railway login
railway init
```

Configure Environment Variables:

# Set any required environment variables
railway variables set NODE_ENV=production

Deploy Using Railway CLI:

# Deploy your Docker container
railway up

4.3 GitHub Actions Integration

Update your CI/CD pipeline to deploy to Railway:

deploy:
  name: Deploy to Railway
  needs: [build, docker, security]
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main'

  steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Install Railway CLI
      run: npm install -g @railway/cli

    - name: Deploy to Railway
      env:
        RAILWAY_TOKEN: ${{ secrets.RAILWAY_TOKEN }}
      run: |
        railway login --token $RAILWAY_TOKEN
        railway up --detach

4.4 Environment Configuration

Configure the following in Railway:

Custom Domain (optional)
Environment Variables
Health Check Endpoint
Scaling Configuration

Deliverable: Live application deployed on Railway.com

Task 5: Documentation and Best Practices

Objective: Document the entire process and implement best practices

5.1 Create Comprehensive Documentation

Update your README.md to include:

# DevOps React Application

## Overview

Brief description of the application and its purpose

## Architecture

- Technology stack
- Deployment architecture diagram
- CI/CD pipeline flow

## Local Development

### Prerequisites

### Installation

### Running Locally

### Testing

## Docker

### Building the Image

### Running the Container

### Environment Variables

## Deployment

### CI/CD Pipeline

### Manual Deployment

### Environment Configuration

## Monitoring and Maintenance

### Health Checks

### Logging

### Performance Monitoring

## Troubleshooting

### Common Issues

### Debug Commands

### Support Contacts

5.2 Security Best Practices Implementation

Implement these security measures:

Docker Security:
- Non-root user in container
- Minimal base images
- Security scanning
- Secret management
CI/CD Security:
- Secure secret storage
- Limited permissions
- Dependency scanning
- Code signing (optional)
Deployment Security:
- Environment variable protection
- HTTPS enforcement
- Security headers

5.3 Performance Optimization

Implement these optimizations:

Docker Optimizations:
- Multi-stage builds
- Layer caching
- Image size reduction
Application Optimizations:
- Code splitting
- Asset optimization
- Caching strategies
Deployment Optimizations:
- CDN configuration
- Compression
- Health checks

Deliverable: Complete documentation and implemented best practices

🔍 Assessment Criteria

Your submission will be evaluated based on:

Technical Implementation (60%)

Docker Container (20%):
- Multi-stage build implementation
- Image size optimization
- Security best practices
- Health check configuration
CI/CD Pipeline (25%):
- Workflow completeness
- Error handling
- Security scanning
- Deployment automation
Deployment (15%):
- Successful Railway deployment
- Environment configuration
- Application accessibility

Documentation & Best Practices (25%)

Code comments and documentation
README completeness and clarity
Security implementation
Performance optimization

Problem-Solving & Learning (15%)

Troubleshooting approach
Research and resource utilization
Implementation of feedback
Understanding of concepts

📋 Submission Guidelines

What to Submit:

GitHub Repository URL containing:
- Complete React application
- Dockerfile with multi-stage build
- GitHub Actions workflow file
- Comprehensive README.md
- All configuration files
Live Application URL (Railway.com deployment)
Assessment Report (PDF/Markdown) including:
- Process Documentation: Step-by-step process you followed
- Challenges Faced: Problems encountered and solutions
- Learning Outcomes: What you learned during the assessment
- Improvements: What you would do differently next time
- Resources Used: List of documentation and resources consulted

Submission Format:

Assessment Submission - [Your Name]
├── GitHub Repository: [URL]
├── Live Application: [URL]
├── Assessment Report: [File]
└── Additional Notes: [Optional]

🛠️ Troubleshooting Guide

Common Issues and Solutions:

Docker Issues:

# Issue: Docker build fails
# Solution: Check Dockerfile syntax and file paths

# Issue: Large image size
# Solution: Use multi-stage builds and .dockerignore

# Issue: Container won't start
# Solution: Check logs with docker logs <container-id>

GitHub Actions Issues:

# Issue: Workflow not triggering
# Solution: Check YAML syntax and branch settings

# Issue: Secrets not working
# Solution: Verify secret names and permissions

# Issue: Build failures
# Solution: Check environment setup and dependencies

Railway Deployment Issues:

# Issue: Deployment fails
# Solution: Check Railway logs and environment variables

# Issue: Application not accessible
# Solution: Verify port configuration and health checks

# Issue: CLI authentication
# Solution: Check token validity and permissions

Getting Help:

Docker: Docker Community Forum
GitHub Actions: GitHub Community Forum
Railway: Railway Discord
React: React Community

📚 Additional Learning Resources

Advanced Topics (Optional):

Kubernetes: Container orchestration
Monitoring: Prometheus, Grafana
Security: OWASP Container Security
Performance: Load testing, optimization
Infrastructure as Code: Terraform, Ansible

Certification Paths:

Docker Certified Associate
GitHub Actions Certification
AWS/Azure/GCP Cloud Certifications
Kubernetes Administrator (CKA)

🏆 Success Criteria

To successfully complete this assessment, ensure:

✅ Functional Requirements:

React application builds and runs locally
Docker container builds successfully
CI/CD pipeline executes without errors
Application deploys to Railway.com
All documentation is complete

✅ Technical Requirements:

Multi-stage Docker build implemented
Image size under 50MB
Security best practices followed
Health checks configured
Environment variables properly managed

✅ Quality Requirements:

Code is clean and well-commented
Documentation is comprehensive
Error handling is implemented
Performance optimizations applied

🎓 Final Notes

This assessment is designed to be challenging but achievable. Take your time to:

Read documentation thoroughly before implementing
Test each component before moving to the next
Document your process as you go
Ask questions when stuck (simulate real-world collaboration)
Iterate and improve based on testing results

Remember: The goal is learning and demonstrating practical DevOps skills. Focus on understanding the concepts rather than just completing tasks.

Good luck with your assessment! 🚀

Assessment Version: 1.0
Last Updated: September 2025
Created by: Syslify DevOps Team

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.github/workflows		.github/workflows
.dockerignore.template		.dockerignore.template
Dockerfile.template		Dockerfile.template
GRADING_RUBRIC.md		GRADING_RUBRIC.md
QUICK_START_GUIDE.md		QUICK_START_GUIDE.md
README.md		README.md
SUBMISSION_TEMPLATE.md		SUBMISSION_TEMPLATE.md
nginx.conf.template		nginx.conf.template

syslify/devops-assessment

Folders and files

Latest commit

History

Repository files navigation