使用 GitHub Codespaces 搭建云端开发环境

, , , ,

使用 GitHub Codespaces 搭建云端开发环境

作者： CaoZH
日期： 2026-01-20
本文为原创教程

2026 年，云端开发已经成为主流。GitHub Codespaces 让你可以在浏览器中就拥有完整的开发环境，无需配置本地环境，开箱即用。

一、什么是 Codespaces？

GitHub Codespaces 是基于 VS Code 的云端开发环境：

  • 一键启动——点击按钮，30 秒内获得完整开发环境
  • 配置即代码——.devcontainer/devcontainer.json 定义环境
  • 预构建——提前构建好镜像，启动只需数秒
  • 随处访问——浏览器、桌面 VS Code、JetBrains 都支持

价格

规格 vCPU 内存 存储 免费额度
Basic 2 4GB 32GB 120小时/月
Standard 4 8GB 64GB 60小时/月
Premium 8 16GB 128GB 30小时/月

二、快速开始

1
2
3
4
5
# 方式一：在 GitHub 仓库中点击 Code → Create codespace

# 方式二：使用命令行
gh codespace create --repo owner/repo
gh codespace code  # 在 VS Code 中打开

默认环境

GitHub Codespaces 默认提供：

  • VS Code（浏览器版）
  • Git
  • Docker
  • Node.js / Python / Go 等常用运行时
  • 终端（bash/zsh）

三、配置文件

创建 .devcontainer/devcontainer.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "name": "My Project",
  "image": "mcr.microsoft.com/devcontainers/universal:2",

  // 或使用 Dockerfile
  "build": {
    "dockerfile": "Dockerfile"
  },

  // 安装扩展
  "extensions": [
    "ms-python.python",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ],

  // 端口自动转发
  "forwardPorts": [3000, 8080],

  // 环境变量
  "remoteEnv": {
    "DATABASE_URL": "postgresql://localhost:5432/myapp"
  },

  // 创建后执行的命令
  "postCreateCommand": "npm install",

  // 特性（一键安装常用工具）
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20"
    }
  }
}

项目示例：Java 后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "Spring Boot Project",
  "image": "mcr.microsoft.com/devcontainers/java:17",
  "features": {
    "ghcr.io/devcontainers/features/java:1": {
      "version": "17",
      "installMaven": true,
      "installGradle": false
    },
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },
  "extensions": [
    "vscjava.vscode-java-pack",
    "vmware.vscode-spring-boot",
    "gabrielbb.vscode-lombok"
  ],
  "forwardPorts": [8080],
  "postCreateCommand": "mvn clean compile"
}

四、自定义 Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/base:ubuntu-22.04

# 安装 Node.js 20
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
    && apt-get install -y nodejs \
    && npm install -g pnpm

# 安装 Redis CLI
RUN apt-get update && apt-get install -y redis-tools

# 设置工作目录
WORKDIR /workspace

五、预构建配置

对于大型项目，预构建可以大幅加速启动时间：

1
2
3
4
5
{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "updateContentCommand": "npm ci",
  "postCreateCommand": "npm run build"
}

在仓库 Settings → Codespaces → Set up prebuild 配置预构建，每次 push 到 main 分支时自动构建镜像。

六、多容器配置

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Full Stack App",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "forwardPorts": [3000, 5432, 6379],
  "extensions": [
    "ms-python.python",
    "bradlc.vscode-tailwindcss"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# docker-compose.yml
version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/workspace:cached
    command: sleep infinity
    depends_on:
      - db
      - redis

  db:
    image: postgres:16
    environment:
      POSTGRES_DB: myapp
      POSTGRES_PASSWORD: password

  redis:
    image: redis:7-alpine

七、CLI 命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 列出所有 codespace
gh codespace list

# 创建新 codespace
gh codespace create -r owner/repo -b main

# 在 VS Code 中打开
gh codespace code

# 在浏览器中打开
gh codespace open --web

# SSH 连接
gh codespace ssh

# 停止
gh codespace stop

# 删除
gh codespace delete

# 查看使用情况
gh codespace view

八、总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
## Codespaces 的优势

✅ 零配置——克隆即开发
✅ 环境一致——避免"在我电脑上能跑"
✅ 按需付费——不用时停止，不收费
✅ 随处可访问——任何设备都能开发
✅ 团队统一——一个配置，全员一致

## 适用场景

- 新成员入职：秒级搭建开发环境
- 临时贡献：不用 fork 后配置环境
- 培训/教学：统一环境，排除配置干扰
- 代码审查：在完整环境中审查

首发于 CaoZH 的笔记

CaoZHProgrammer

学习使我快乐。