vscode server搭建及dockerfile版本

本文详细介绍了如何在VSCode中部署Client-Server架构的server端,涉及下载特定版本的Codeserver,使用Dockerfile创建标准化镜像,配置SSH连接以及在Windows和Linux客户端上的设置步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

vscode支持Client-Server组合,文章主要讲解server端部署以及标准化的dockerfile。

vscode插件市场地址:https://marketplace.visualstudio.com/
vscode客户端地址:https://code.visualstudio.com/updates

版本确认

首先下载一个vscode客户端版本,安装完成后,进入在菜单栏找到"帮助"->"关于",找到关键的"提交"字段,此处信息如下:

版本: 1.83.1
提交: f1b07bd25dfad64b0167beb15359ae573aecd2cc
日期: 2023-10-10T23:45:31.402Z
Electron: 25.8.4
ElectronBuildId: 24154031
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 5.15.0-87-generic snap

下载code server

使用我们上面查到的提交id来下载对应的服务版本,可在任意客户端下载,下载后我将部署在我的x64-linux服务器上

commit_id=f1b07bd25dfad64b0167beb15359ae573aecd2cc
wget https://update.code.visualstudio.com/commit:${commit_id}/server-linux-x64/stable

实际的下载地址转换如下:

https://vscode.cdn.azure.cn/stable/f1b07bd25dfad64b0167beb15359ae573aecd2cc/vscode-server-linux-x64.tar.gz?1

下载完成后,得到vscode-server-linux-x64.tar.gz

安装到服务器上

一般来说,最好先删除服务器上残留的~/.vscode-server,如果是升级版本,vscode客户端可不用改配置。

1. 在服务器上执行脚本replace_server.sh或复制内容直接执行,子脚本readjson.py用于识别安装包内提交id,免去手动麻烦。
2. 打开vscode客户端,客户端菜单栏的"帮助->关于"里的"提交"校验值,和服务器的~/.vscode-server/bin目录下的目录名一致,表明这套服务端-客户端组合的一致性
3. 安装插件:打开"扩展->从VISX安装",提前将插件从市场上下载并拷贝到服务器上,这种方式下插件安装非常快,避免从客户端直接安装一直等待转圈的问题。

replace_server.sh

mkdir -p ~/.vscode-server/bin/version
tar zxf vscode-server-linux-x64.tar.gz -C ~/.vscode-server/bin/version --strip 1
commit_id=$(python3 readjson.py ~/.vscode-server/bin/version/product.json)
mv ~/.vscode-server/bin/version ~/.vscode-server/bin/${commit_id}
touch ~/.vscode-server/bin/${commit_id}/0

 readjson.py

import json
import sys
file = sys.argv[1]
with open(file, 'r') as fd:
    data = json.load(fd)
    print(data['commit'])

关于SSH链接

参考文档:SSH简介及两种远程登录的方法

其实ssh登录是一种通用技术,这里不展开介绍,可以阅读参考文档。这里讲下vscode server依赖的环节。

vscode ssh远程连接配置

首先,需要安装remote-ssh插件。

安装完成后按下快捷键F1弹出命令框,输入搜索connect,点击remote-ssh连接主机选项,然后添加或者配置已有主机,你可以在上面看到配置文件的路径。

config配置文件中,每一个目标Host的格式如下:

Host {Host IP}

    HostName {随便取个名字}

    User xxxxxx

    Port xxxxx

    IdentityFile {填写你的私钥文件路径}

其中Port参数默认应该为22,如果启用了docker等服务,会产生端口映射,需要在服务器上通过docker命令查看内部容器的22端口被映射到了服务器的哪个端口。

IdentityFile参数指定了你的私钥路径,以后ssh连接时就自动能连接了。但在这之前,请参考SSH登录方法里如何生成私钥与公钥,以及如何将公钥备案到服务器上。

多客户端复用私钥

如果需要在多个客户端使用,可以进一步将A客户端的私钥拷贝到另一台机器上,并同样配置config文件的Host配置,这是被允许的。

Dockerfile版本

dockerfile的可控性强,因此为了避免重复部署相同环境,可以考虑使用dockerfile来生成标准化镜像。

Dockerfile如下,如需要增加自己使用的库,可以在生成本镜像后再堆叠层:

FROM ubuntu:focal

RUN chmod 777 /tmp && apt update

RUN apt install -y python3 openssh-server

COPY codeserver/ /root/codeserver

RUN cd /root/codeserver && /root/codeserver/replace_server.sh && rm -rf /root/codeserver

COPY setup.sh /root

RUN /root/setup.sh && rm /root/setup.sh

WORKDIR /root

ENTRYPOINT /etc/init.d/ssh start && /bin/bash

 dockerfile目录组织:

.
├── build.sh
├── codeserver
│   ├── readjson.py
│   ├── replace_server.sh
│   └── vscode-server-linux-x64.tar.gz
├── Dockerfile
├── run.sh
└── setup.sh

 其中codeserver文件夹的内容见上述内容,包括部署相关的脚本和server程序。

其中setup.sh如下,是部署ssh密钥的脚本,在路径~/sshkey下会替客户端生成公钥密钥,公钥导入到authorized_keys中备案,私钥导出到客户端使用:

mkdir ~/sshkey
ssh-keygen -f ~/sshkey/id_rsa -P ""
mkdir ~/.ssh
cat ~/sshkey/id_rsa.pub > ~/.ssh/authorized_keys
chown 1000:1000 ~/sshkey/id_rsa

为了方便构建和运行,其中有两个便利脚本build.sh和run.sh

build.sh,会构建名字为code的本地镜像:

docker rmi -f code
docker build -t code .

run.sh,其中将ssh端口向外映射为10022,路径映射为/home/work:/root/share,可自行更改,创建的容器名字为code:

docker rm -f code
docker run -it -p 10022:22 -v /home/work:/root/share --name code code:latest

 至此,容器已经部署完成,只需客户端配置。

配置ssh

容器启动会自动启动ssh,我们只需将/root/sshkey/id_rsa这个私钥文件拷至客户端。

linux的客户端位置为~/.ssh/id_rsa,另外请检查~/.ssh/known_hosts是否存在过期数据,考虑清除后重新连接ssh

windows客户端的位置为C:\Users\你的用户名\.ssh,请确认你的windows用户名来定位实际路径。

如果使用vscode,默认会使用~/.ssh/id_rsa这种路径的密钥,如果需要指定配对的密钥,请在vscode的config文件使用IdentityFile关键字制定

测试ssh

按下vscode的f1调出控制栏目,输入Remote-SSH: Connect Current Window to Host,然后将vscode的ssh配置文件config修改如下。我们在本地创建好了code容器,开放端口为10022。

Host 0.0.0.0
    HostName 0.0.0.0
    User root
    Port 10022

然后执行连接,正常就可以连接到vscode服务端,执行后续的操作。

如果提示ssh有change,请检查~/.ssh/known_hosts,删除旧数据后重新连接vscode会提示是否保存新的数据,确认后将其更新至known_hosts中

<think>好的,用户想了解如何使用VSCode搭建和部署Web项目。首先,我需要整合之前提供的引用内容,确保信息准确且符合用户需求。引用[1]和[4]提到了使用VSCode和Maven创建Java Web项目,引用[2]涉及WebSocket的配置,引用[3]是关于私有化部署VSCode Web。用户的问题可能主要集中在基础的项目搭建和部署步骤,可能还需要扩展其他相关方面。 首先,我应该分步骤讲解环境准备、项目创建、配置、部署等流程。需要确保每个步骤都清晰,比如安装必要的插件如Java Extension Pack、Maven for Java,以及Spring Boot Tools。然后,创建项目部分需要指导用户如何通过Maven archetype生成项目结构,这对应引用[4]中的内容。配置部分要提到pom.xml的修改和本地仓库的设置,引用[4]中的localRepository部分需要提及。 接下来是代码示例,可能需要展示一个简单的Servlet或Spring Boot应用,并说明如何运行调试。部署部分需要涵盖本地运行、构建WAR/JAR包,以及部署到Tomcat或云服务器。这里引用[3]的私有化部署可以扩展,说明如何将项目部署到自有服务器实现远程访问。 然后,针对WebSocket的部署,引用[2]提到需要安装ws库,这部分可以单独作为一个小节,指导用户如何配置WebSocket环境,并给出Node.js的示例代码。 最后,生成相关问题时要覆盖用户可能感兴趣的优化、调试、云部署、WebSocket集成和安全性等方面,确保覆盖全面,帮助用户深入理解整个流程。需要确保所有LaTeX格式正确,行内公式用$...$,独立公式用$$...$$,但当前问题可能不涉及数学公式,但需注意其他格式如代码块和引用标识。 检查是否有遗漏的步骤,比如插件安装的具体操作,如何配置服务器,或者常见问题的解决办法。确保回答结构清晰,分点明确,用户能一步步跟随操作。同时,引用标识要正确对应,比如创建Maven项目对应引用[1]和[4],私有化部署对应引用[3]。</think>### 使用VSCode搭建与部署Web项目分步指南 #### 一、环境准备 1. **安装VSCode及插件** - 下载安装[VSCode](https://code.visualstudio.com/) - 必装插件: - `Java Extension Pack`(Java支持) - `Maven for Java`(Maven项目管理) - `Spring Boot Tools`(Spring Boot项目支持) - `Tomcat for Java`(本地Tomcat集成) 2. **配置开发环境** - 安装JDK 11+并配置`JAVA_HOME`环境变量 - 安装Maven 3.9+,修改`settings.xml`配置本地仓库路径: ```xml <localRepository>D:\Java\JavaWeb\apache-maven-3.9.6\maven-repo</localRepository> [^4] ``` #### 二、创建Web项目 1. **通过Maven原型生成项目** - 按`Ctrl+Shift+P` → 输入`Maven: Create Project` - 选择`maven-archetype-webapp`模板 - 生成的标准目录结构: ``` src ├── main │ ├── java # Java源代码 │ ├── webapp # Web资源(HTML/JSP) │ └── resources └── test └── java # 测试代码 ``` 2. **配置项目依赖** 在`pom.xml`中添加Servlet API依赖: ```xml <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> ``` #### 三、开发与调试 1. **编写示例Servlet** ```java @WebServlet("/hello") public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) { resp.getWriter().write("Hello from VSCode!"); } } ``` 2. **本地运行调试** - 安装`Tomcat for Java`插件后 - 按`F5`启动调试,插件会自动部署到嵌入式Tomcat服务器 #### 四、部署方案 1. **构建部署包** ```bash mvn clean package # 生成target/*.war ``` 2. **私有化部署到服务器[^3]** - 将WAR文件上传至服务器Tomcat的`webapps`目录 - 通过Nginx配置反向代理: ```nginx server { listen 80; server_name yourdomain.com; location / { proxy_pass http://localhost:8080/your-webapp; } } ``` 3. **云原生部署(以Docker为例)** ```dockerfile FROM tomcat:9-jdk17 COPY target/*.war /usr/local/tomcat/webapps/ROOT.war EXPOSE 8080 ``` #### 五、WebSocket集成[^2] 1. 在Node.js项目中: ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { ws.send('Connected to VSCode WebSocket'); }); ``` 2. 前端调用: ```javascript const ws = new WebSocket('ws://localhost:8080'); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值