背景知识

Github Codespaces 可以让你在云端上开发，这样可以帮助你从安装运行环境的麻烦中解脱出来，并且可以与你的团队伙伴保持相同的开发环境进行开发。

那么如果你想使用Github Codespace开发GUI应用应该怎么办呢？当你在无头环境如何运行GUI程序呢？本文就是为了解决该问题而写作的。

答案就是VNC！！

VNC是一个图形桌面分享系统使用RFB(Remote Frame Buffer)协议来操控远程计算机。

如何安装VNC？

我们可以手动安装VNC到Codespace环境也可以选择自动安装它，显然为了偷懒我们使用官方的简易安装方法来安装，我们只需要在devcontainer.json中添加:

{
    "image": "mcr.microsoft.com/devcontainers/universal:2",
    "features": {
        "ghcr.io/devcontainers/features/desktop-lite:1": {
            "version": "latest",
            "noVncVersion": "1.2.0",
            "password": "codespaces",
            "webPort": "6080",
            "vncPort": "5901"
        }
    },
    "forwardPorts": [5901],
      "portsAttributes": {
            "5901": {
          "label": "VNC desktop"
            }
        }
}

如果我们没有

devcontainer.json

的话，我们可以在VS Code命令行内输入

>Codespaces: Add Development Container Configuration Files...

选择

Create New Configuration

然后在

devcontainer.json

中输入上面的命令

用VNC连接Codespace

这一步相当的简单只需要在VNC连接软件内输入