Skip to content

Latest commit

 

History

History
760 lines (573 loc) · 18.1 KB

devcontainer_20m.md

File metadata and controls

760 lines (573 loc) · 18.1 KB
theme transition addons download browserExporter record editor overviewSnapshots glowEnabled layout background description hideInToc routeAlias
@xebia/slidev-theme-xebia
fade
slidev-component-progress
@xebia/slidev-addon-components-common
slidev-addon-qrcode
false
true
false
true
false
true
cover
/devcontainer.jpeg
Explore the benefits, configuration, and impact of Dev-Containers on modern development workflows.
true
devcontainer_20m

Use the full potential of devcontainers

title: Speaker layout: intro src: special-slides/speaker.md

layout: image-right background: /compass-right.png title: Agenda hideInToc: true

Agenda

layout: two-column

Why Dev-Containers?

::left::

  • Isolate dependencies and avoid conflicts
  • Portability across different systems
  • Transforming how we write, test, and deploy code
  • Applicable to web development, DevOps, and beyond (full-stack))
  • Ensure consistent environments across teams
  • Solve the "it works on my machine" issue

::right::

Supported IDEs

  • Visual Studio Code
  • GitHub Codespaces
  • Visual Studio (2022+)
  • JetBrains IDEs (IntelliJ IDEA)
  • CodeSandbox
  • more...

layout: two-column hideInToc: true

Development Performance Considerations

::left::

Pro

  • Faster setup times

  • Optimized resource usage compared to full Dev-VMs

  • Faster context switching

  • Improved developer productivity

  • Isolation of environments

  • Simplified onboarding for new team members

  • Easier collaboration across distributed teams

  • Enhanced security through isolation

::right::

Contra

  • Virtualization overhead slows down
  • Container images can be large and consume disk space
  • Isolation can lead to access issues (network, debugging)
  • Learning curve for new tools and technologies

layout: image-right background: /devcontainer2.jpeg hideInToc: true

Prerequisites

  • Docker: Docker is installed and running on your system
    • Windows: Docker Desktop 2.0+ on Windows 10 Pro/Enterprise. Windows 10 Home (2004+) requires Docker Desktop 2.3+ and the WSL 2 back-end. (Docker Toolbox is not supported. Windows container images are not supported.)
    • macOS: Docker Desktop 2.0+.
    • Linux: Docker CE/EE 18.06+ and Docker Compose 1.21+. (The Ubuntu snap package is not supported.
  • Visual Studio Code: Install VS-Code or any other supporting IDE
    • Dev Containers Extension: Add the "Dev Containers" extension in VS-Code
  • Access to Container Images: Ensure access to required container registries (e.g., Docker Hub)

layout: image-right background: /devcontainer_move.jpeg hideInToc: true

Configuring


  • Create a .devcontainer folder in your project
  • Add a devcontainer.json file with configuration details
  • Use predefined templates or customize as needed

  • Open the project in the containerized environment

layout: image-left background: /devcontainer_move.jpeg

VS-Code assisted Devcontainer creation

VS-Code assisted

  • Use the Command Palette Ctrl+Shift+P
    • Select "Dev Containers: Add Development Container Configuration Files"
  • Choose a template or customize your own configuration etc.
    • ...

  • VS-Code will generate the necessary files for you

  • Open the project in the containerized environment
    • Use the Command Palette again and select "Dev Containers: Reopen in Container"

layout: image-right-dark background: /code-right.png hideInToc: true

Demo

Create a new Dev-Container

title: What Happens?

What Happens?

flowchart LR
    %% Define styles to match colors
    classDef vsCodeBox fill:#4B83CD,color:white,stroke:#333,font-size:26px
    classDef serverBox fill:#4B83CD,color:white,stroke:#333,font-size:26px
    classDef uiExtensionBox fill:#EB7533,color:white,stroke:#333
    classDef workExtBox fill:#EB7533,color:white,stroke:#333
    classDef resourceBox fill:#6CB33F,color:white,stroke:#333
    classDef sourceBox fill:#6CB33F,color:white,stroke:#333
    classDef containerBox fill:white,stroke:#333,color:#4B83CD,font-weight:bold,font-size:26px
    classDef localBox fill:white,stroke:#333,color:#4B83CD,font-weight:bold,font-size:26px
    classDef hide stroke-opacity:0
    
    subgraph LocalOS["Local OS"]
        subgraph VSCodeSG["VS Code"]
          direction TB

          ThemeExt1["Theme/UI Extension"]:::uiExtensionBox
          ThemeExt2["Theme/UI Extension"]:::uiExtensionBox
          ThemeExt1 --- ThemeExt2
          %% hide the link
          linkStyle 0 display:none
        end
        LocalSource[("Source Code")]:::sourceBox
    end
    
    subgraph Container["Container"]
        subgraph VSServerSG["VS Code Server"]
          WorkExt1["Workspace Extension"]:::workExtBox
          WorkExt2["Workspace Extension"]:::workExtBox
          WorkExt1 --- WorkExt2
          %% hide the link
          linkStyle 1 display:none
        end
        ContSource[("Source Code")]:::sourceBox
        FileSystem[("File System")]:::resourceBox
        Terminal["Terminal Processes"]:::resourceBox
        RunApp["Running Application"]:::resourceBox
        Debugger["Debugger"]:::resourceBox

        VSServerSG --> FileSystem
        VSServerSG --> Terminal
        VSServerSG --> RunApp
        VSServerSG --> Debugger
        VSServerSG --> ContSource
    end
    
    %% Connections between the two environments
    ExpPort["Exposed Port"]
    VolMount["Volume Mount"]
    
    LocalSource L_local_mount@--- VolMount L_cont_mount@--> ContSource
    VSCodeSG L_code_port@--- ExpPort L_server_port@--> VSServerSG
    
    %% Apply styles to containers
    class LocalOS localBox
    class Container containerBox
    class VSCodeSG vsCodeBox
    class VSServerSG serverBox

    L_local_mount@{animation: slow}
    L_cont_mount@{animation: slow}
    L_code_port@{animation: slow}
    L_server_port@{animation: slow}
Loading

Configuration Options

  • VS-Code Extensions: Install VS-Code extensions that enhance your workflow.
  • VS-Code Settings: Configure settings specific to the container environment.
  • Environment Variables: Customize your development environment with specific variables.
  • Post-Create Commands: Run scripts or commands after the container is created to set up your environment.
  • Volume Mounts: Persist data by mounting host directories into the container.
  • Custom Dockerfile: Use a custom Dockerfile for more control over the container image.
  • Remote User: Specify the user that the container should run as.

layout: image-right background: /bulb.jpeg hideInToc: true

Examples

  • Web Development: Use Node.js, React, or Angular in isolated environments
  • Full-Stack: development environments with frontend and backend services
  • Data Science: Run Jupyter Notebooks with Python and R dependencies pre-installed
  • Embedded Systems: Develop and test firmware in a containerized environment
  • Legacy Applications: Maintain older software versions without affecting the host system

hideInToc: true

Typical Usage: Web Development

  • Use a pre-configured Node.js container for consistent development
  • Install project dependencies in the container
  • Run and debug applications directly in the containerized environment
  • Share the container configuration with the team for consistency
// filepath: .devcontainer/devcontainer.json
{
  "name": "Node.js Dev Container",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:18",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ]
    }
  },
  "remoteUser": "node"
}

src: special-slides/devcontainer/full-stack-devcontainer.md

title: "Example: Data Science Dev-Container" hideInToc: true hide: true

Example: Data Science Dev-Container 

// filepath: .devcontainer/devcontainer.json
{
  "name": "Data Science Dev Container",
  "image": "mcr.microsoft.com/vscode/devcontainers/python:3.9",  
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "postCreateCommand": "pip install -r requirements.txt",
  "settings": {
    "python.pythonPath": "/usr/local/bin/python"
  },  
  "remoteUser": "python"
}
  • Python: Pre-installed Python 3.9 environment
  • Jupyter Notebooks: Ready-to-use Jupyter Notebook support
  • Dependencies: Install additional Python libraries via requirements.txt
  • Docker-in-Docker: Run Docker commands within the container

hideInToc: true

Available Features

  • Azure CLI Dev Container ➡️ ghcr.io/devcontainers/features/azure-cli:1
  • Common Utilities               ➡️ ghcr.io/devcontainers/features/common-utils:2
  • Docker (Docker-in-Docker) ➡️ ghcr.io/devcontainers/features/docker-in-docker:2
  • PowerShell ➡️ ghcr.io/devcontainers/features/powershell:1
  • k6             ➡️ ghcr.io/dhoeric/features/k6:1
  • Postman ➡️ ghcr.io/frntn/devcontainers-features/postman:1

{
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
}

hideInToc: true

Environment variables

containerEnv: apply to the entire container

"containerEnv": {
    "MY_CONTAINER_VAR": "some-value-here",
    "MY_CONTAINER_VAR2": "${localEnv:SOME_LOCAL_VAR}"
}

remoteEnv: variables for VS Code and related sub-processes (terminals, tasks, debugging, etc.)

"remoteEnv": {
    "PATH": "${containerEnv:PATH}:/some/other/path",
    "MY_REMOTE_VARIABLE": "some-other-value-here",
    "MY_REMOTE_VARIABLE2": "${localEnv:SOME_LOCAL_VAR}"
}

title: Docker hide: true

Docker

Dockerfile based

{
  "build": {
    "context": ".",
    "dockerfile": "Dockerfile",
    "args": {
      "NODE_VERSION": "18",
      "PYTHON_VERSION": "3.9"
    },
    "target": "development",
    "cacheFrom": [
      "type=registry,ref=myregistry.com/myimage:cache"
    ]
  },
}

title: Docker Compose hide: true

Docker Compose

{
  "name": "Full-Stack Dev Container",
  "dockerComposeFile": [
    "docker-compose.yml",
    "docker-compose.override.yml"
  ],
  "service": "app",
  "runServices": [ "app", "be-service", "db" ],
  "workspaceFolder": "/workspace",
}
  • service Specifies the main service to use as the development container
  • runServices Lists the services that should be started when the container is launched

The image and dockerfile properties are not needed since Docker Compose supports them natively.

title: GitHub Codespaces layout: image-right background: /GitHub-Codespaces.svg backgroundSize: 80%

GitHub Codespaces 

{   "name": "Container for Codespaces",    
    "hostRequirements": { // codespaces env
        "cpus": 8,
        "memory": "8gb",
        "storage": "32gb"
    },
    "image": "mcr.microsoft.com/vscode/...}

  • create a Codespace based on your .devcontainer definitions:
    • select: Code ➡️ Codespaces ➡️ ... ➡️ New with options
  • VS Code can attach to a running Codespace
  • VS Code can controll the Codespace environment (e.g. rebuild, restart, etc.)

title: Performance Tweeks hide: true

Performance Tweeks

  • Clone Repository in Container Volume

  • Use a targeted named volume

    • folders like node_modules, data folders, or output folder
    "remoteUser": "node",
"mounts": [
    "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
],
"postCreateCommand": "sudo chown node node_modules"

  • Use a named volume for your entire source tree

    "workspaceMount": "source=your-volume-name-here,target=/workspace,type=volume"
"workspaceFolder": "/workspace",

  • Use WSL

layout: image-left background: /wsl_pinguin.jpeg hide: true

A Special Dev-Container

WSL (Windows Subsystem for Linux)

  • Windows 10 2004 and up (WSL 2)
  • Docker Desktop 2.3+ includes WSL 2 Engine
  • WSL 2 = full Linux kernel

Benefits

  • better performance
  • system integration
    • Explorer
    • VS-Code (remote Explorer)
    • Windows Terminal
    • WSL commands
    • UI apps from Linux (e.g. Firefox, Chrome, etc.)

title: Windows Dev Drive layout: image-right background: /dev-drive.png backgroundSize: 80% hideInToc: true hide: true

Windows Dev Drive

  • Available in Windows 11 22H2+ and Windows Server 2022+
    • create as a new volume or convert an existing NTFS volume
    • create as VHDX or VHD file
  • ReFS-based volume optimized for developer workloads
  • Uses performance mode by default:
    • Reduced security scanning by Microsoft Defender
    • Optimized file system oper**ations with ReFS
    • Bypassed file system filters that slow I/O
    • Enhanced caching for developer files
    • Priority I/O scheduling for file operations
  • Designed for source code, packages, and build outputs

layout: image-left background: /devcontainer2.jpeg hideInToc: true

Conclusion

  • IaC: Define environments with devcontainer.json for consistency and version control.
  • Security: Isolated environments reduce dependency conflicts and vulnerabilities.
  • Vs. Dockerfiles/Compose: Simplified setup (e.g. include mountpoint definitions), and includes predefined features.
  • Remote Development: Supports remote development with VS Code, no need to run Docker locally.
  • GitHub Codespaces: Enables cloud-based, consistent environments directly from repositories.

src: /special-slides/questions.md

src: /special-slides/thank-you.md

layout: end level: 2 hideInToc: true hide: true

Juli 2025


End of presentation

layout: end level: 2 hideInToc: true hide: true

Mai 2025


End of presentation