VSCode在线编辑器及插件安装安装

code-server是一款在线的vscode工具，只要将 code-server 部署到自己的服务器之后，就可以通过浏览器使用vscode，很好的解决了远程编辑服务器中文件的问题，方便好用。
code-server的地址为： https://github.com/cdr/code-server

1、docker安装

(1)、准备

• 准备一台linux机器
• 安装docker：https://docs.docker.com/install/linux/docker-ce/centos/
• 如果要反向代理，安装nginx

(2)、安装

• 在linux上创建一个目录，用来存放编辑器可以访问的文件例如：

  mkdir -p /usr/local/codefolder
  

• 修改文件夹的权限，否则无法创建和修改文件

  chmod -R 777 /usr/local/codefolder
  

• 安装：

  docker run --name codeserver -d -p 127.0.0.1:8443:8443 -v "/usr/local/codefolder:/home/coder/project" codercom/code-server --allow-http --no-auth
  

• 浏览器访问http://localhost:8443

(3)、参数配置详情

sage: code-server [options]

Run VS Code on a remote server.

Options:
  -V, --version                         output the version number
  --cert <value>
  --cert-key <value>
  -e, --extensions-dir <dir>            Override the main default path for user extensions.
  --extra-extensions-dir [dir]          Path to an extra user extension directory (repeatable). (default: [])
  --extra-builtin-extensions-dir [dir]  Path to an extra built-in extension directory (repeatable). (default: [])
  -d, --user-data-dir <dir>             Specifies the directory that user data is kept in, useful when running as root.
  -h, --host <value>                    Customize the hostname. (default: "0.0.0.0")
  -o, --open                            Open in the browser on startup.
  -p, --port <number>                   Port to bind on. (default: 8443)
  -N, --no-auth                         Start without requiring authentication.
  -H, --allow-http                      Allow http connections.
  --disable-telemetry                   Disables ALL telemetry.
  --socket <value>                      Listen on a UNIX socket. Host and port will be ignored when set.
  --trust-proxy                         Trust the X-Forwarded-For header, useful when using a reverse proxy.
  --install-extension <value>           Install an extension by its ID.
  -h, --help                            output usage information

(4)、插件安装

code-server目前还不支持在线安装插件，不过它提供了.VSIX方式的安装，下面以python插件为例演示插件的安装。

• 下载python插件：https://github.com/Microsoft/vscode-python/releases。可以通过命令下载：

  wget https://github.com/Microsoft/vscode-python/releases/download/2019.3.6558/ms-python-release.vsix
  

• 查看docker容器中是否有Python环境，没有则安装Python。

  #进入dockers容器
  docker exec -it codeserver /bin/bash
  #查看Python环境
  sudo python -V
  sudo python3 -V
  #安装python，根据主机选择相应命令
  sudo apt-get update
  sudo apt-get install python3
  #再次查看Python环境
  sudo python3 -V
  #退出Python及docker容器（注意一定要退出容器）
  exit()
  exit()
  #切换到刚才下载的Python插件目录，将文件复制到docker容器
  sudo docker cp ms-python-release.vsix codeserver:/usr/local
  

• 利用VSIX安装
  

• 测试代码

  #!/usr/bin/python3
   
  # 计算面积函数
  def area(width, height):
      return width * height
   
  def print_welcome(name):
      print("Welcome", name)
   
  print_welcome("Runoob")
  w = 4
  h = 5
  print("width =", w, " height =", h, " area =", area(w, h))
  

  测试结果：
  

2、二进制文件

(1)、准备

• 准备一台Linux
• 下载二进制文件，下载地址：https://github.com/cdr/code-server/releases
• 如果要反向代理，安装nginx

(2)、安装

• 解压缩下载的文件
• 然后运行二进制文件./code-server。默认情况下，code-server使用随机生成的密码启用密码身份验证。您可以将PASSWORD环境变量设置为使用您自己的环境变量，或用于--auth none禁用密码身份验证。
• 如需后台启动请运行nohup ./code-server --auth none > /dev/null 2>&1 &，如需指定端口--port 8443
• 在浏览器访问localhost:8080。

(3)、参数配置详情

./code-server --help

(4)、插件安装

code-server目前还不支持在线安装插件，不过它提供了.VSIX方式的安装，下面以python插件为例演示插件的安装。

• 下载python插件：https://github.com/Microsoft/vscode-python/releases。可以通过命令下载：

  wget https://github.com/Microsoft/vscode-python/releases/download/2019.3.6558/ms-python-release.vsix
  

• 利用VSIX安装
  

• 测试代码

  #!/usr/bin/python3
   
  # 计算面积函数
  def area(width, height):
      return width * height
   
  def print_welcome(name):
      print("Welcome", name)
   
  print_welcome("Runoob")
  w = 4
  h = 5
  print("width =", w, " height =", h, " area =", area(w, h))
  

  测试结果：
  

3、Nginx反向代理

配置文件：

#user  nobody;
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    client_max_body_size  200m;

    #gzip  on;
    
    map $http_upgrade $connection_upgrade {  
        default upgrade;  
        '' close;  
    }
    
    upstream websocket {
        server localhost:8443;  
    }
 
	server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {  
            proxy_pass http://websocket;  
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade";  
        }
    }
}