A Gentle Introduction to Using a Docker Container as a Dev Environment

Disclaimer: This article employs a degree of playful exaggeration. The author does not claim to speak for Dylan Thomas, nor advocate imposing light themes on unwilling users.

Dylan Thomas famously urged, "Do not go gentle into that good night." While referring to death, this sentiment might equally apply to the complexities of Linux containers. Though Thomas passed in 1953, the internet empowers confident pronouncements on his behalf (with appropriate caveats).

This confidence stems from a blend of overestimation and recent struggles configuring a Docker container as a development environment. The ensuing frustration mirrored a battle against insurmountable odds.

However, suffering is a potent teacher. This experience informs a (relatively) gentle introduction to using Docker containers for development. First, let's address the "why."

Why Use Docker Containers for Development?

Imagine a project encompassing not only code, but the entire development environment, dependencies, and runtimes. This project, portable and self-contained, could be shared with anyone, anywhere, running flawlessly without environment-specific configurations.

This is the essence of Docker containers. A Dockerfile defines the entire runtime environment in a single file, requiring only a method for development within the container.

VS Code Remote - Containers: A Powerful Combination

VS Code's "Remote - Containers" extension allows loading projects into Docker containers and accessing them via VS Code. This seamless integration simplifies the process.

Adding a Container to a Project

Consider a fresh Windows machine with WSL2 and Docker installed. Attempting to run a Node.js project without additional installations would result in an error. Instead of manual Node.js installation, let's configure the project to run within a pre-configured container.

VS Code simplifies this. The "Add Development Container Configuration Files..." command analyzes the project and suggests appropriate container definitions. Selecting a Node.js version (e.g., Node.js 14) adds a .devcontainer folder containing a Dockerfile (defining the Node.js image) and a devcontainer.json file (for project-level configuration).

Selecting "Rebuild and Reopen in Container" restarts VS Code, builds the container, and opens the project within it. The lower-left corner confirms the VS Code connection to the container. The terminal now operates within the Linux container, enabling npm install and npm start.

Port mapping is necessary to access the application (typically running on port 3000) from the browser. The Remote Containers extension's "Remote Explorer" (with a "Port Forwarding" section) allows specifying the port mapping (3000 in this case).

Customization is achieved via the devcontainer.json file. Automating port forwarding and npm install is possible by adding forwardPorts and postCreateCommand properties:

{
  // ...
  "forwardPorts": [3000],
  "postCreateCommand": "npm install",
  // ...
}

VS Code extensions can also be included, avoiding manual installation within the container. Adding extensions like Prettier and ESLint enhances the development experience.

{
  // ...
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "GitHub.github-vscode-theme"
  ]
  // ...
}

The Dockerfile can be customized to add software not included in the base image. For example, adding cowsay:

FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
RUN apt-get update && apt-get -y install cowsay
ENV PATH="/usr/games:${PATH}"

Remember: apt-get update refreshes the package list; -y avoids confirmation prompts; && chains commands; \ allows line breaks within commands; and grouping related commands minimizes layers.

After rebuilding, potential issues (e.g., cowsay path) might require adjustments to the PATH environment variable within the Dockerfile.

Advanced Configuration: Customizing the Terminal

To customize the terminal environment, modify the devcontainer.json file. Setting the default shell to /bin/zsh and adjusting VS Code settings is straightforward:

{
  // ...
  "settings": {
    "terminal.integrated.shell.linux": "/bin/zsh",
    "workbench.sideBar.location": "right"
  },
  // ...
}

Copying a customized .zshrc file (adjusting paths as needed) into the container completes the terminal setup. Downloading plugins via git clone within the Dockerfile further refines the environment.

In summary, project configuration resides in devcontainer.json, while environment configuration occurs within the Dockerfile. Consult the official Remote Containers documentation for more advanced techniques.

The above is the detailed content of A Gentle Introduction to Using a Docker Container as a Dev Environment. For more information, please follow other related articles on the PHP Chinese website!