Custom Development Environment

About 665 wordsAbout 2 min

Specifying Development Environment via Docker Image

You can specify the development environment image by writing a Workspaces event pipeline in .cnb.yml and setting pipeline.docker.image.

.cnb.yml
$:
  vscode:
    - docker:
        # Specify the development environment image, which can be any accessible image.
        # If the specified image has code-server installed, the development environment will start in single-container mode
        # If the specified image does not have code-server installed, the development environment will start in double-container mode
        # The following image is the CNB default development environment image with code-server installed, which will start in single-container mode
        # You can replace it with other images as needed
        image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      # Tasks to execute after the development environment starts
      stages:
        - name: ls
          script: ls -al

Customizing Development Environment via Dockerfile

If specifying an image doesn't meet your requirements, you can write your own Dockerfile to customize the development environment.

Add a .ide/Dockerfile file in the repository root directory to freely customize your development environment.

If you haven't customized the startup pipeline, the default pipeline will be used to create the development environment when starting. The default pipeline will prioritize using .ide/Dockerfile to build an image as the base image for the development environment.

Note: In the default pipeline for starting the development environment, both the default image and .ide/Dockerfile are configured. If .ide/Dockerfile doesn't exist or fails to build, the default image will be used as the base image for the development environment. If the environment doesn't meet your expectations, you can check the build logs in the prepare stage to see if .ide/Dockerfile was built successfully.

# .ide/Dockerfile

# You can replace node with your required base image
FROM node:20

# Install code-server and common VSCode extensions
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension cnbcool.cnb-welcome \
  && code-server --install-extension redhat.vscode-yaml \
  && code-server --install-extension dbaeumer.vscode-eslint \
  && code-server --install-extension waderyan.gitblame \
  && code-server --install-extension mhutchie.git-graph \
  && code-server --install-extension donjayamanne.githistory \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# Install SSH service to support accessing the development environment via VSCode Remote-SSH (and other software as needed)
RUN apt-get update && apt-get install -y git wget unzip openssh-server

# Specify character set to support Chinese input in command line (choose character set as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

Customizing Both Development Environment and Startup Process

If you need to customize both the development environment and the startup process, you can write both .ide/Dockerfile and .cnb.yml.

Customizing the Startup Pipeline

.cnb.yml
$:
  vscode:
    - docker:
        build: .ide/Dockerfile
        # Optionally define both build and image
        # In this case, .ide/Dockerfile will be used to build the image first
        # If .ide/Dockerfile build fails, the image specified will be used to ensure the environment can start successfully
        # image: cnbcool/default-dev-env:latest
      services:
        - vscode
        - docker
      # Tasks to execute after the development environment starts
      stages:
        - name: ls
          script: ls -al

Customizing the Development Environment

# .ide/Dockerfile

# You can replace node with your required base image
FROM node:20

# Install code-server and common VSCode extensions
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension cnbcool.cnb-welcome \
  && code-server --install-extension redhat.vscode-yaml \
  && code-server --install-extension dbaeumer.vscode-eslint \
  && code-server --install-extension waderyan.gitblame \
  && code-server --install-extension mhutchie.git-graph \
  && code-server --install-extension donjayamanne.githistory \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# Install SSH service to support accessing the development environment via VSCode Remote-SSH (and other software as needed)
RUN apt-get update && apt-get install -y git wget unzip openssh-server

# Specify character set to support Chinese input in command line (choose character set as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8