阿里云服务器安装code-server实现ipad编程、浏览器编程

目录

  • 前言
    • code-server是什么
    • 背景
  • 安装code-server
    • RTFM
    • 以CentOS为例
      • 方法一
      • 方法二
      • 方法三
  • 配置code-server
  • 实现公网IP访问
    • 方法一- 直接部署在0.0.0.0
    • 方法二- Nginx反向代理
    • 其他办法
  • 效果一览
  • iPad编程

前言

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
    阿里云服务器安装code-server实现ipad编程、浏览器编程_第1张图片
  • 修改配置文件
	sudo vi ~/.config/code-server/config.yaml

阿里云服务器安装code-server实现ipad编程、浏览器编程_第2张图片

  • 端口
    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端口
    *阿里云服务器安装code-server实现ipad编程、浏览器编程_第3张图片

  • 然后你就可以用公网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;
    #    }
    #}

}

阿里云服务器安装code-server实现ipad编程、浏览器编程_第4张图片

  • 我们实际修改的内容很少,关键部分是这样的
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,具体步骤参考文档

效果一览

阿里云服务器安装code-server实现ipad编程、浏览器编程_第5张图片

iPad编程

  • 在App Store下载Servediter
  • 选择Self Hosted Server
  • 设置刚才在浏览器访问的code-server URL
    例如你的域名:7777
  • 输入code-server密码Instance password (if any)
  • 点击Save
  • OK
    阿里云服务器安装code-server实现ipad编程、浏览器编程_第6张图片

你可能感兴趣的:(TechTips,nginx,centos,vscode,ipad,阿里云)