大名鼎鼎的VSCode自然不需要多介绍了，作为一款跨平台的编辑器，配合各种插件作为主力IDE也不成问题。
最近看到vscode的服务器版，通过浏览器访问，编辑代码，运行，调试代码。决定试一试，vscode已经很轻量了，但是将其部署到云端，做到开箱即用，在这个疫情时代还是很有意义的。

基本部署

本文采用docker部署code-server，基于linuxserver的镜像，code-server

docker-compose.yaml

version: "2.1"
services:
  code-server:
    image: linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1026
      - PGID=100
      - DEFAULT_WORKSPACE=/workspace
      - PASSWORD=123456
      - TZ=Asia/Shanghai
    volumes:
      - /volume3/docker/vscode/config:/config
      - /volume3/docker/vscode/workspace:/workspace
    ports:
      - 8443:8443
    restart: unless-stopped

docker-compose up -d

浏览器方式 http://ip:8443 即可。

codecombat docker安装 docker部署vscode_maven


输入配置的密码就可以打开熟悉的vs-code的界面了

codecombat docker安装 docker部署vscode_vscode_02

后面可以按照自己的喜好安装自己常用的插件了，大部分插件是支持在server端运行的。也可以把自己桌面端的vs-code的一些配置直接复制过来。

codecombat docker安装 docker部署vscode_docker_03

如果只是编辑代码，这样就可以了。但如果要运行代码，不管是后端服务，还是前端（nodejs，vue）开发，总会要运行很多服务，这时就需要访问容器内的端口。
我采用两种方案：
1.是预先暴露一组端口运行容器，运行调试各种代码时，将端口改为这组开发的端口内；
2.安装一个nginx，做反向代理，通过自定义域名+固定端口访问，这样配置灵活，做前端开发用反向代理解决跨域问题也比较方便。

在docker-compose.yaml里增加一组固定暴露的端口范围

ports:
      - 8443:8443
	  - 30000-39000:30000-39000

配置开发环境

已经是现代的编辑器了，内置了git的支持，但是老旧的项目还是很多很多的。尝试把手头一个svn+java（jdk8）+spring的项目迁移到上面。

java项目

直接容器里安装依赖环境

docker exec -it -u root code-server bash

基础镜像基于ubuntu，以root登录容器，通过apt命令可以安装大部分依赖包。安装速度慢的，可以自行替换国内镜像源。
vs-code的java扩展需要jdk-11以上，而我们很多项目还停留在古老的jdk-8，所以需要两个都安装，启动vs-code使用11，编译运行项目使用jdk8.

apt update apt install openjdk-11-jdk openjdk-8-jdk subversion fontconfig libfreetype6 上面的操纵实际是修改的容器里的内容，一旦容器重新部署或者需要升级镜像，所有变化又丢失了，所以比较好的方法是重新编译新的镜像，并把jdk，maven这些放到宿主机上，并挂载到容器里，通过环境变量配置运行时，类似于我们本机开发手动配置运行编译环境。

根据自身需要以官方镜像为母版，构建自己的镜像，集成subversion到镜像

Dockerfile.yml

FROM linuxserver/code-server:latest
RUN set -eux; apt update;\
    apt install -y subversion fontconfig libfreetype6; \
    rm -rf /var/lib/apt/lists/*
ENV LANG C.UTF-8

docker build -t vs-code:my .

fontconfig，libfreetype6 是我的工程里的图像验证码采用的字体需要，各位要根据自己的需要安装。其实如果在linux服务器部署过自己的工程，需要什么系统依赖一般都能解决，大部分是运行时依赖。

手动安装jdk，maven等

下载jdk
https://www.oracle.com/java/technologies/downloads/ https://adoptopenjdk.net/?variant=openjdk8&jvmVariant=hotspot
https://maven.apache.org/index.html

更新过后的

version: "2.1"
services:
  code-server:
    image: linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1026
      - PGID=100
      - DEFAULT_WORKSPACE=/workspace
      - PASSWORD=123456
      - TZ=Asia/Shanghai
      - JDK_HOME=/runtime/java/jdk-11.0.14.1
      - JAVA_HOME=/runtime/java/jdk-11.0.14.1
      - PATH=/app/code-server/lib/vscode/bin/remote-cli:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/runtime/apache-maven-3.6.2-bin/apache-maven-3.6.2/bin
    volumes:
      - /volume3/docker/vscode/config:/config
      - /volume3/docker/vscode/workspace:/workspace
      - /volume3/docker/vscode/runtime:/runtime
    ports:
      - 8443:8443
    restart: unless-stopped

maven的运行环境可以在容易path中指定，也可以通过vscode的配置指定，这样可以安装多个版本，不同的工程指定不同的版本

vs-code的工程settings.json

{
    "java.configuration.runtimes": [
        {
          "name": "JavaSE-1.8",
          "path": "/runtime/java/openjdk-8",
          "default": true
        },
        {
          "name": "JavaSE-11",
          "path": "/runtime/java/jdk-11.0.14.1",
        },
    ],
    "java.configuration.updateBuildConfiguration": "automatic",
    "maven.terminal.customEnv": [
      {
         "environmentVariable": "JAVA_HOME",
         "value": "/runtime/java/openjdk-8",
      },{
         "environmentVariable": "MAVEN_OPTS",
         "value": "-Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n"
      }
    ],
	"maven.executable.path": "/runtime/apache-maven-3.6.2-bin/apache-maven-3.6.2/bin/mvn",
    "maven.view": "hierarchical",
}

java远程调试

这是VS-Code原生就支持的，使用Java的远程debug功能，具体需要配置launch.json

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Debug java",
            "request": "attach",
            "hostName": "localhost",
            "port": "8000",
            "projectName": "platform-admin"
        }
    ]
}

调试工程采用jetty的maven插件，所以其实是Maven启动的java进程，所以需要配置Maven的运行参数，开启java的远程调试，这里的远程并不是指我们的浏览器和code-server，而是指code-server和在容器里运行的java进程通过socket进行调试，所以并不需要映射容器的8000端口。如果做过本机远程连服务器调试bug应该很熟悉，

codecombat docker安装 docker部署vscode_maven_04

nodejs vue项目

nodejs 下载
https://nodejs.org/en/download/

我的项目在nodejs v12.18.2 下运行良好，所以需要将下载的nodejs放到宿主机的runtime目录，映射到容器里，并把nodejs的bin目录配置到环境变量PATH中。

version: "2.1"
services:
  code-server:
    image: linuxserver/code-server
    container_name: code-server
    environment:
      - PUID=1026
      - PGID=100
      - DEFAULT_WORKSPACE=/workspace
      - PASSWORD=123456
      - TZ=Asia/Shanghai
      - JDK_HOME=/runtime/java/jdk-11.0.14.1
      - JAVA_HOME=/runtime/java/jdk-11.0.14.1
      - PATH=/app/code-server/lib/vscode/bin/remote-cli:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/runtime/apache-maven-3.6.2-bin/apache-maven-3.6.2/bin:/runtime/nodejs/node-v12.18.2-linux-x64/bin
    volumes:
      - /volume3/docker/vscode/config:/config
      - /volume3/docker/vscode/workspace:/workspace
      - /volume3/docker/vscode/runtime:/runtime
    ports:
      - 8443:8443
    restart: unless-stopped

前端项目是vue工程，编译打包其实很简单，但是要远程访问并且热更新，稍微麻烦点

vue会启动一个内嵌的web服务器，而热刷新则是vue会实时编译，浏览器通过websocket监听服务器的变化，进而刷新页面需要变化的内容或资源。
而且如果是全栈开发，通常还需要起一个API服务端，供前端调取各种接口。
这里引入另一个镜像，作为一个反向代理服务器，其实就是nginx，但是提供图形界面，使用方便，作为开发很合适。
类外需要自己通过hosts或者内容dns服务器，配置域名指向宿主机，而容器只要暴露几个接口，通过子域名，vhost的方式访问不同的服务。

docker run -d --network code-server_default -p 8080:8080 -p 8181:8181 --name nginx-proxy jlesage/nginx-proxy-manager:latest 8181 是管理端口

8080 是方向代理端口

codecombat docker安装 docker部署vscode_vscode_05

  • 反向代理默认执行vue的内置服务端口，同时勾选websocket

codecombat docker安装 docker部署vscode_maven_06

  • 根路径指向vue内置服务，这样能访问到vue调试运行的js，css，html
  • 通过二级目录，执行api接口服务。
  • vue.config.js的配置，后面两项很关键
devServer: {
    port: 6255,
    disableHostCheck: true,
    public: 'vue.xyztech.good365.net:9090'
  },