code-server 屏幕截图

介绍

部署 code-server 就可以在浏览器里随时编写代码 😎😎

配置反向代理，通过不同的域名访问到不同端口，这样在可以像在本地一样调试网页了。

比如，在 code-server 中运行将程序运行到 3000 端口，在访问 https://3000-view.oonnnoo.com 访问就可以在线调试程序

PS:如果对应的端口未运行程序，Nginx 就会返回的 502 了。

我是通过 docker-compose 运行的，下面是配置文件，内容仅供参考，需要自行部署。

docker-compose 配置文件

cat docker-compose.yml

version: '3.0'
services:
  ide:
    image: codercom/code-server:3.8.0
    restart: always
    user: coder
    volumes:
      - /srv/ide:/home/coder/project # 项目目录
      - /var/coder/.local/share/code-server:/home/coder/.local/share/code-server
      - ./dotfile/.gitignore:/home/coder/.gitignore # git 全局忽略文件
      - ./dotfile/.gitconfig:/home/coder/.gitconfig # git 全局配置文件
      - ./dotfile/.npmrc:/home/coder/.npmrc # node 配置文件
      - ./dotfile/.bash_profile:/home/coder/.bash_profile 
      - ./dotfile/.ssh:/home/coder/.ssh # ssh 文件为了方便，我单独生成了一个私钥
      - ./dotfile/.pip:/home/coder/.pip # python 配置文件
    expose:
      # 暴露 一个端口范围，用于后续的端口转发
      - "3000-10000"
      # - 8080
    env_file:
      - ./ide.env

  website:
    image: onnno/nginx:latest
    restart: always
    ports:
      - 443:443
      - 80:80
    volumes:
      - /srv/www:/srv/www
      - /etc/nginx/conf.d:/usr/local/nginx/conf.d
      - /var/log/nginx:/usr/local/nginx/logs
      - /etc/letsencrypt:/etc/letsencrypt
    depends_on:
      - ide

用于 code-server 配置文件

cat ide.env

PASSWORD=abcded

PASSWORD 指定是code-server运行后，登录的密码

Nginx 配置文件

ide.conf

server {
  listen                     80;
  listen                     443 ssl http2;
  listen                     [::]:80;
  listen                     [::]:443 ssl http2;
  server_name                ide.oonnnoo.com;
  include                    /usr/local/nginx/conf.d/ssl/oonnnoo.com;
  access_log                 /usr/local/nginx/logs/ide_access.log;
  error_log                  /usr/local/nginx/logs/ide_error.log;
  error_page                 404 /404.html;
  default_type               text/plain;
  charset                    utf-8;

  location / {
    proxy_pass               http://ide:8080;
    proxy_redirect           off;
    proxy_set_header         Host $host;
    proxy_set_header         X-Real-IP $remote_addr;
    proxy_set_header         X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version       1.1;
    proxy_set_header         Upgrade $http_upgrade;
    proxy_set_header         Connection "upgrade";
    proxy_set_header         Accept-Encoding gzip;
  }
}

view.conf

server {
  listen                     80;
  listen                     443 ssl http2;
  listen                     [::]:80;
  listen                     [::]:443 ssl http2;
  server_name                ~^(?<port>.+)\-view\.oonnnoo\.com$;
  include                    /usr/local/nginx/conf.d/ssl/oonnnoo.com;
  access_log                 /usr/local/nginx/logs/view_access.log;
  error_log                  /usr/local/nginx/logs/view_error.log;
  error_page                 404 /404.html;
  default_type               text/plain;
  charset                    utf-8;

  location /robots.txt {
    return 200
'User-agent: *
Disallow: /
';
  }
  # 因为 code-server 程序运行在 8080 端口
  if ($port = 8080){
      return 200 '该端口不可用，请使用其他端口，This port is not available. Please use another port';
  }
  location / {
    # 如果 proxy_pass 包含变量，需要指定 resolver
    resolver                 127.0.0.11;
    proxy_pass               http://ide:$port;
    proxy_redirect           off;
    proxy_set_header         Host $host;
    proxy_set_header         X-Real-IP $remote_addr;
    proxy_set_header         X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version       1.1;
    proxy_set_header         Upgrade $http_upgrade;
    proxy_set_header         Connection "upgrade";
    proxy_set_header         Accept-Encoding gzip;
  }
}

SSL 证书配置

ssl/oonnnoo.com

ssl_certificate              /etc/letsencrypt/live/lidong.me/fullchain.pem;
ssl_certificate_key          /etc/letsencrypt/live/lidong.me/privkey.pem;

ssl_ciphers                  TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;
ssl_protocols                TLSv1.2 TLSv1.3;
#  关闭服务端指定密钥套件顺序，允许客户端自行选择密钥套件
ssl_prefer_server_ciphers    off;

ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:2m;  # 1m 字节可以存储大约4000个session
ssl_session_tickets off;

# OCSP stapling （OCSP 封套）
ssl_stapling on;
ssl_stapling_verify on;

resolver                   100.100.2.138 233.5.5.5 8.8.8.8 valid=3600s;

# verify chain of trust of OCSP response using Root CA and Intermediate certs
ssl_trusted_certificate      /etc/letsencrypt/live/lidong.me/chain.pem;

遇到的问题及解决方案

在运行 vue 之类的项目的时候，出现以下错误

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/coder/project/ryanlid/sys/public'

解决办法：需要在主机上，不是在docker中执行

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf

sudo sysctl -p

https://stackoverflow.com/questions/58559074/increase-watchers-in-node-docker-image

https://github.com/cdr/code-server/issues/628

code-server 的项目地址: https://github.com/cdr/code-server

Docker 方式运行 code-server 搭建在线 vscode

Visual Studio Code 在右键添加快捷方式