云vscode搭建之使用容器化部署的方法
vscode作为一个轻量级的IDE，其支持丰富的插件，而通过这些插件我们就可以实现在Vscode中写任何语言的代码。Code-Server是Vscode的网页版，启动Code-Server之后我们就可以在浏览器中打开vscode来愉快的编写代码了。这种方式非常适合我们做linux编程。使用C/C++的时候，在windows上编写的代码在linux上可能跑不了，而且安装linux图形界面，然后在图像界面中使用vscode又很麻烦。当然也可以使用vscode的远程开发。但是我认为启动code-server来在浏览器上使用vscode也是非常方便的。
随着容器化的发展，现在涌现出了很多云IDE，比如腾讯的Cloud Studio，但是其也是基于Code-Server进行开发部署的，用了它的云IDE后，我便产生出了自己部署一个这样的云IDE的想法。
1、Code-Server下载部署
1.1 Code-Server下载
下载地址：https://GitHub.com/coder/code-server/releases/
在上面的网址中下载code-server，并将其传输到linux服务器上。
也可以在linux服务器中直接使用命令来下载：
wget Https://github.com/coder/code-server/releases/download/v4.6.1/code-server-4.6.1-linux-amd64.tar.gz
1.2 Code-Server部署
1.解压tar.gz文件：
tar -zxvf code-server-4.6.1-linux-amd64.tar.gz
2.进入code-server目录：
cd code-server-4.6.1-linux-amd64
3.设置密码到环境变量中
export PASSWord="xxxx"
4.启动code-server
./code-server --port 8888 --host 0.0.0.0 --auth password
在浏览器中输入ip:8888来访问如下：
后台运行的方式：
nohup ./code-server --port 8888 --host 0.0.0.0 --auth password &
1.3 Docker部署Code-Server
接下来将介绍使用Docker的方式来部署Code-Server：
下面的Dockerfile创建了一个带有golang开发环境的容器，然后在容器中运行Code-Server，将Dockerfile放在跟code-server-4.4.0-linux-amd64.tar.gz同目录。
1.创建名为Dockerfile的文件（Dockerfile要跟code-server的tar.gz文件在同一目录中），将下面内容复制进去
FROM Golang
WORKDIR /workspace
RUN cp /usr/local/go/bin
function activate(context) {
// Use the console to output diagnostic infORMation (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
// The command has been defined in the package.JSON file
// Now provide the implementation of the command with reGISterCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('port-finder.helloWorld', function () {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showinformationMessage('Hello World from port_finder!');
});
context.subscriptions.push(disposable);
initGetPorts()
}
var s = new Set()
function initGetPorts() {
getListeningPorts(function(ports) {
ports.forEach(p => {
s.add(p)
})
setInterval(function() { // 设置定时器，每隔一秒获取一次
listenPortChange()
}, 1000)
})
}
function listenPortChange() {
// 获取处于LISTEN状态的端口
getListeningPorts(function(ports) {
var tmpSet = new Set()
ports.forEach(p => {
if (!s.has(p)) {
// 发现新的端口被监听就提醒用户是否在浏览器中打开
vscode.window.showInformationMessage("发现新开启的端口:" + p + ",是否在浏览器中访问?", "是", "否", "不再提示")
.then(result=> {
if (result === "是") {
// 在浏览器中打开来访问代理服务器，后面带上端口信息，以便代理服务器知道访问容器的哪个端口
vscode.env.openExternal(vscode.Uri.parse(`http://192.168.44.100/proxy/` + p))
}
})
}
tmpSet.add(p)
})
s = tmpSet
})
}
function getListeningPorts(callback) {
var exec = require('child_process').exec;
exec('netstat -nlt', function(error, stdout, stderr){
if(error) {
console.error('error: ' + error);
return;
}
var ports = parsePort(stdout)
callback(ports)
})
}
function parsePort(msg) {
var idx = msg.indexOf("tcp")
msg = msg.slice(idx, msg.length)
var colums = msg.split("\n")
var ret = new Array()
colums = colums.slice(0, colums.length - 1)
colums.forEach(element => {
var port = findPort(element)
if (port != -1) {
ret.push(port)
}
});
return ret;
}
function findPort(colum) {
var idx = colum.indexOf(':')
var first = colum.slice(0, idx)
while (colum[idx] == ':') {
idx++
}
var second = colum.slice(idx, colum.length)
var fidx = first.lastIndexOf(' ')
var sidx = second.indexOf(' ')
var ip = first.slice(fidx + 1, first.length)
var port = second.slice(0, sidx)
if (ip == "127.0.0.1") {
return -1
} else {
return Number(port)
}
}
// this method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
4.然后构建项目，首先安装vsce库，再打包
npm i -g vsce
vsce package5.打包后生成了vsix文件，将vsix文件上传到服务器，然后再拷贝到docker容器中
# docker拷贝命令
docker cp 主机文件名 容器ID或容器名:/容器内路径
然后在浏览器中的vscode中选择vsix文件来安装插件
安装完之后，我们的插件在vscode打开后就会启动，然后每隔一秒查询一个端口情况。
测试
接下来，测试一下插件：
在vscode中写了一个http服务器，然后启动这个服务器，看插件是否能发现这个端口被监听了
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
type KK struct {
Name string `json:"name"`
Prictice_time string `json:"prictice time"`
Hobby string `json:"hobby"`
}
func main() {
engine := gin.Default()
engine.GET("/", func(ctx *gin.Context) {
ctx.JSON(http.StatusOK, &KK{
Name: "kunkun",
Prictice_time: "two and a half years",
Hobby: "sing jump and rap",
})
})
engine.Run(":8080")
}运行http服务器：
go run main.go
可以看到，它弹出了提示，提示我们是否在浏览器中打开
但是现在在浏览器中打开是访问不了容器中的http服务器的，因为端口没有被映射到主机端口上。
2.3 代理服务器实现
在此，为了验证我的想法是否能成功，只是实现了一个简单的代理服务器，它将请求转发的容器中，然后再转发容器中服务器的响应。（因为代理服务器是直接运行在主机上的，因此可以通过容器IP+端口来访问）
代码如下：
package main
import (
"fmt"
"io"
"net/http"
"strings"
"github.com/gin-gonic/gin"
)
func main() {
engine := gin.Default()
engine.GET("/proxy/*all", func(ctx *gin.Context) {
all := ctx.Param("all") // 获取/proxy后面的参数
if len(all) <= 0 {
ctx.Status(http.StatusBadRequest)
return
}
all = all[1:] // 丢弃第一个'/'
idx := strings.Index(all, "/")
var url string
if idx < 0 { // 只有端口
url = fmt.Sprintf("http://172.17.0.3:%s", all)
} else { // 有端口和其它访问路径
port := all[:idx]
url = fmt.Sprintf("http://172.17.0.3:%s%s", port, all[idx:])
}
resp, err := http.Get(url) // 访问容器中的服务器
if err != nil {
ctx.Status(http.StatusBadRequest)
return
}
io.Copy(ctx.Writer, resp.Body) // 转发响应
})
engine.Run(":80")
}
在主机服务器上运行代理服务器，不要使用容器来启动：
go build
nohup ./porxy_server & # 后台运行
然后我们再启动浏览器vscode中的服务器看是否可以访问到：
选择"是"，然后在新弹出的窗口中就可以访问到容器中的服务了：
这里实现的只是一个非常简易的版本，只是提供了一个这样的思路。如何要实现一个类似Cloud Studio的云IDE要考虑的还要更多。
最终效果如下：
到此这篇关于云vscode搭建使用容器化部署的文章就介绍到这了,更多相关云vscode搭建内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
相关文章