前端程序员搭建自己的CodeIDE(code-server教程)

前端程序员建立自己的CodeIDE(code-server教程)

偶尔不能在自己电脑上写代码时,用用浏览器敲代码也挺便利;或许用平板刷刷算法题也挺有趣;测试JavaScript某一代码片段也不用在浏览器的控制台上打印输出了;

前端程序员搭建自己的CodeIDE(code-server教程)

装置code-server

我这儿运用的是ubuntu20,我们依据自己的系统下载对应的装置包即可,当然最好跟着我的教程来,这样出错了可能都是我踩过的坑,更容易处理,否则便是自己去折腾吧

  1. 首先下载code-server 官方地址如下:github.com/coder/code-… 我这边依据我的需求下载的是这个:
    前端程序员搭建自己的CodeIDE(code-server教程)
    然后两种方法,一种是直接在服务器上下载它,不过我服务器没配vpn,所以我采纳的第二种方法,本地下载然后经过某些ssh工具上传服务器即可,都是一样的,结果便是服务器上多了这样一个文件就行,用自己喜爱的方法即可。 因为买的云服务器都是我一人运用,不用特别在乎一些用户权限等等,所以接下来的操作为了便利我都是在root用户下操作的,运用的ssh工具是finalshell。 不是root的话先切换为root用户
sudo su root

然后上传(或直接下载)上述的code-server-xxx-linux-amd64.tar.gz文件 我这儿放在了download文件夹下面/root/download/code-server依据你自己的习气存放即可 解压:

tar -zxvf code-server-4.8.1-linux-amd64.tar.gz

然后其实就已经能够运转了(运转的是【code-server-4.8.1-linux-amd64(解压后的文件)/bin/code-server】)

./bin/code-server --port 8080 --host 0.0.0.0 --auth password
​

--port:Code Server运转的端口,能够自己设置 --host 0.0.0.0:答应恣意IP的拜访,必须加该字段,否者默许是localhost,这样你就不能在本地拜访远程运转的code-server了 这儿先这样,后续直接在yaml文件里装备这些就不用输入后续这些一长串的参数了

然后在浏览器中打开对应的ip:port即可 当然,假如运用的云厂商的服务记住装备放行端口,而且假如ubuntu里装备了防火墙也记住放行端口或许关闭防火墙,否者无法拜访(ubuntu默许是关闭防火墙的,除非你自己之前装备过,这儿就不具体介绍相关指令了,我们能够自行去搜搜相关指令)

额定装备

运转了上述指令之后,会生成一个默许的config.yaml文件,你能够经过运转后的输出信息得到; 修改其间的信息

vim ~/.config/code-server/config.yaml // 一般来说都是在对应用户的这个目录下

这是我的相关装备

前端程序员搭建自己的CodeIDE(code-server教程)
这儿我一起也装备了https拜访,究竟有些代码来回传输不加密可不行 简略说说证书的获取,途径很多,挑选自己适宜的即可,我这儿运用的是阿里云的免费证书:
前端程序员搭建自己的CodeIDE(code-server教程)
然后下载其间的证书后上传到服务器中对应的文件夹即可
前端程序员搭建自己的CodeIDE(code-server教程)
你能够从我上面的config.yaml装备中看到我服务器里证书密钥的放置位置,这个完全凭喜好放置。 此刻你就能够直接输入./code-server运转了,运用的便是config里面的默许参数了。

pm2发动&域名解析

然后咱们将其运用pm2办理起来,或许你直接nohup <command> &挂起该进程也能够。 这儿简略运用pm2办理如下:

npm i -g pm2
echo './code-server' > start_code_server.sh
pm2 start start_code_server.sh

pm2的其他常用指令和其他操作这儿就不逐个介绍了官网 运转后输入pm2 list如下

前端程序员搭建自己的CodeIDE(code-server教程)
之后,你就能够在浏览器中随时拜访你的codeIDE了,当然,我还解析了个子域名给ip地址,这个直接在对应的云服务厂商上操作即可(这儿不具体介绍域名解析操作,自己在界面点点试试就能够了):
前端程序员搭建自己的CodeIDE(code-server教程)
然后输入ip:port或许自己的域名就能够了
前端程序员搭建自己的CodeIDE(code-server教程)

简略装备vscode

当然,初始不是上述这个界面,还需要对vscode进行必定的装备,这个真就看我们习气了,自己喜爱什么插件就装备什么插件就行了。 我这儿暂时只装置了这些插件:

前端程序员搭建自己的CodeIDE(code-server教程)
简略摘要几点: 官方FAQ

How do I use my own extensions marketplace?

If you own a marketplace that implements the VS Code Extension Gallery API, you can point code-server to it by setting$EXTENSIONS_GALLERY. This corresponds directly with theextensionsGalleryentry in in VS Code’sproduct.json.

For example, to use the legacy Coder extensions marketplace:

export EXTENSIONS_GALLERY='{"serviceUrl": "https://extensions.coder.com/api"}'

Though you can technically use Microsoft’s marketplace in this manner, we strongly discourage you from doing so since this isagainst their Terms of Use.

For further information, seethis discussionregarding the use of the Microsoft URLs in forks, as well asVSCodium’s docs.

How can I reuse my VS Code configuration?

You can use theSettings Syncextension for this purpose.

Alternatively, you can also pass--user-data-dir ~/.vscodeor copy~/.vscodeinto~/.local/share/code-serverto reuse your existing VS Code extensions and configuration.

装置JavaScript版的jupyter(ijavascript)

为了在jupyter-notebook中运用JavaScript,需要装置对应的Node.js内核,这儿我运用的是ijavascript 依据官方文档装置即可,我这儿运用的是ubuntu20,node16出现了必定问题,经过该issue中的答复即可处理:github.com/n-riesco/ij… 首要便是要先装置libzmq3-dev

前端程序员搭建自己的CodeIDE(code-server教程)
目前我只遇到这一个问题,假如我们有其他问题,自行搜索和查看下issue中的其他答复吧 最后你应该就能得到我上述的页面了
前端程序员搭建自己的CodeIDE(code-server教程)