Docker 部署vscode

大名鼎鼎的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 即可。

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

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

如果只是编辑代码，这样就可以了。但如果要运行代码，不管是后端服务，还是前端（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:///?variant=openjdk8&jvmVariant=hotspot
https://maven./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应该很熟悉，

nodejs vue项目

nodejs 下载
https:///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 是方向代理端口

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

• 根路径指向vue内置服务，这样能访问到vue调试运行的js，css，html

• 通过二级目录，执行api接口服务。

• vue.config.js的配置，后面两项很关键

  devServer: {
    port: 6255,
    disableHostCheck: true,
    public: 'vue.xyztech.good365.net:9090'
  },