用服务器搭建属于自己的在线VSCode(浏览器版VSCode)

星野梦璃
2024-08-14 / 0 评论 / 132 阅读

本文使用开源项目Code-server搭建一个在线的VSCode:
https://github.com/coder/code-server
系统环境: Ubuntu 20.04.6 LTS (Focal Fossa)
推荐VPS配置: 1C1G以上(实测内存占用较高)

安装Code-server

准备环境

先安装系统必要的依赖

sudo apt update
sudo apt install -y curl gnupg

安装

使用官方的一键脚本

curl -fsSL https://code-server.dev/install.sh | sh

启动

输入 code-server 就可以直接启动code-server了,默认是运行在8080端口。
不过这个时候还需要更改配置才可以在浏览器中访问
使用你喜欢的文本编辑器打开 ~/.config/code-server/config.yaml 文件,可以发现是如下的文件格式:

bind-addr: 127.0.0.1:8080
auth: password
password: e6980fb96c42b883b90b260a
cert: false

将127.0.0.1 改成0.0.0.0
将password:后面的内容改为你希望设置的密码
保存文件,在ssh终端输入code-server
这样你就可以通过你的ip/域名访问code-server啦 🎉
首次访问界面如下:
lzth18xy.png

设置systemd服务

虽然已经可以成功运行了,但是需要设置systemd服务才能在后台长期运行
创建一个新的systemd服务文件 /etc/systemd/system/code-server.service
内容为:

[Unit]
Description=code-server
After=network.target

[Service]
Type=simple
User=root
ExecStart=/usr/bin/code-server 
Restart=always

[Install]
WantedBy=multi-user.target

保存并关闭文件,然后重新加载systemd守护进程:

sudo systemctl daemon-reload

启动 code-server 服务

sudo systemctl start code-server
sudo systemctl enable code-server

使用Nginx配置HTTPS访问

安装软件

sudo apt install nginx
sudo apt install certbot python3-certbot-nginx

自动获取SSL证书

先将你的域名添加一条A记录解析到vps的ip
然后使用certbot自动获取SSL证书:

sudo certbot --nginx -d yourdomain.com
注意要将yourdomain.com 替换为你自己的域名
按照指示来就可以。可以选择将所有http流量redirect到https

修改Nginx配置

创建配置文件/etc/nginx/sites-available/yourdomain.com并编辑为以下内容(注意将文件名中的yourdomain.com 替换为你的域名)

server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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_set_header X-Forwarded-Proto $scheme;
    }
}
这个配置文件开启了Websocket访问(是code-server必须的)
注意将yourdomain.com 全部替换为你的域名。
注意SSL证书路径。如果你使用了certbot的默认路径,那么只需要将yourdomain.com 替换为你的域名即可。

重启Nginx服务

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
同样注意将yourdomain.com 替换为你的域名
sudo nginx -t 是为了检查配置文件中是否有拼写错误,如果有拼写错误会直接报错

结语

如果一切顺利的话,现在就已经可以通过 https://yourdomain.com 访问你的在线VSCode了。

0

评论 (0)

取消