前言

code-server是什么

Code-server是一個運行在遠程服務器上的Visual Studio Code實體，可通過任何網路瀏覽器訪問，它允許你在任何地方和任何設備（如平板電腦或筆記本電腦）上用一致的集成開發環境（IDE）編碼，
只要你將code-server部署在你自己的服務器上（我使用的是阿里云學生機CentOS 7.6），就可以在任何瀏覽器上運行一個云vscode實作云編程，這也是用ipad編程的最簡單方法之一，

背景

網上有很多安裝code-server的教程，但開啟服務的方法基本都是使用命令export PASSWORD="你的密碼" && ./code-server --host 0.0.0.0 --port 8080，這個命令在code-server的最新版本中已被取消，下文將給出兩種最簡單可行的實作方法，

安裝code-server

RTFM

• 打開官網
  code-server github專案主頁
• 查看手冊
  安裝指導

以CentOS為例

方法一

• 創建一個目錄存盤安裝包
• 下載適合你服務器架構的code-server安裝包

	wget https://github.com/cdr/code-server/releases/download/v3.11.1/code-server-3.11.1-amd64.rpm

• 執行安裝命令

sudo rpm -i code-server-3.11.1-amd64.rpm
# 將3.11.1替換成安裝包對應的版本

方法二

在電腦上下載安裝包，上傳到服務器，然后參考方法二

方法三

curl -fOL https://github.com/cdr/code-server/releases/download/v$VERSION/code-server-$VERSION-amd64.rpm
sudo rpm -i code-server-$VERSION-amd64.rpm
sudo systemctl enable --now code-server@$USER
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml

配置code-server

注意將$VERSION替換成對應的版本號，去github-release頁面查看版本

• 啟動code-server服務

sudo systemctl enable --now code-server@$USER

• 到此為止，code-server已經部署在你的服務器的回環地址內了，如果你的ssh工具支持(比如vscode)，你可以直接用瀏覽器訪問 http://127.0.0.1:8080. 你的密碼設定在組態檔中~/.config/code-server/config.yaml
  
• 修改組態檔

	sudo vi ~/.config/code-server/config.yaml

• 埠
  bind-addr:后跟著coder-server系結的ip:埠號，注意默認是8080，可能會和tomcat沖突，自行修改
• 密碼
  password:設定密碼
  *重啟code-server

sudo systemctl restart code-server@$USER

實作公網IP訪問

現在code-server只是部署在了你的回環地址內，外部是無法訪問的，要想通過你的公網ip、域名直接訪問code-server，我們需要做點作業，

方法一- 直接部署在0.0.0.0

這個方法本質上和命令./code-server --host 0.0.0.0 --port 8080是一樣的

• 修改code-server組態檔

	sudo vi ~/.config/code-server/config.yaml

• 將地址直接系結到0.0.0.0，這里埠為7777致敬4396 (在服務器中，0.0.0.0指的是本機上的所有IPV4地址)

bind-addr: 0.0.0.0:7777
auth: password
password: 123456
cert: false

• 重啟code-server

sudo systemctl restart code-server@$USER

• 防火墻開放埠

firewall-cmd --zone=public --add-port=7777/tcp --permanent

• 登陸阿里云 官網在安全-防火墻中開啟7777埠
  *

• 然后你就可以用公網ip:7777訪問code-server了

方法二- Nginx反向代理

• 我們不需要修改code-server組態檔，仍然將服務系結在127.0.0.1:8080或任意內網ip，使用Nginx做一個反向代理

• 安裝Nginx，這里不介紹如何安裝，請看教程

• 安裝完成后，進入nginx配置目錄

/usr/local/nginx/conf

• 修改nginx組態檔

sudo vi nginx.conf

• 我們只修改http塊內的server塊

#user  nobody;
worker_processes  1;

#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;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       880;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /  {
	proxy_pass http://127.0.0.1:7777/;
	 proxy_set_header Host $host;
     	 proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection upgrade;
      	proxy_set_header Accept-Encoding gzip;

           # root   html;
           # index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

• 我們實際修改的內容很少，關鍵部分是這樣的

server {
    listen 880; 	# nginx監聽的埠
    server_name localhost;

    location / {
      proxy_pass http://127.0.0.1:7777/; # 與code-server組態檔中的bind-addr要一致
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    }
}

• 啟動nginx服務

cd /usr/local/nginx/sbin
./nginx

如果你之前啟動過nginx服務，這里可以重啟./nginx -s reload

• 大功告成

其他辦法

你也可以用caddy代替nginx，或者直接用ssh連接服務器訪問code-server，具體步驟參考檔案

效果一覽

iPad編程

• 在App Store下載Servediter
• 選擇Self Hosted Server
• 設定剛才在瀏覽器訪問的code-server URL
  例如你的域名:7777
• 輸入code-server密碼Instance password (if any)
• 點擊Save
• OK