利用Docker启动VS Code通过浏览器访问进行远程开发

已于 2024-03-24 21:30:59 修改
阅读量885 收藏 12
点赞数 16
文章标签： docker 容器 运维
于 2024-03-24 21:20:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiajw0426/article/details/136995235
版权

本文介绍如何在Docker容器中运行Vscode，并介绍如何构建java开发环境。

适用场景

在许多软件开发和工程项目中，需要在不同的环境中进行开发、测试和部署。例如，开发环境可能在Windows中进行，而最终的应用程序可能在Linux环境下运行。然而，Linux环境下缺乏便捷的图形界面工具用于修改代码或进行配置，这可能会降低开发效率。在这种情况下，使用VSCode运行在Docker容器中，并通过浏览器访问，是一个极佳的选择。除此之外，还有以下情况适用：

  • 开发环境隔离： 当您需要在不同的项目之间保持环境隔离时，将VSCode运行在Docker容器中是一个理想的选择。每个项目可以有自己独立的容器，避免了不同项目之间的环境冲突和干扰。

  • 跨平台访问： 通过将VSCode运行在Docker容器中，并通过浏览器访问，您可以在任何支持浏览器的设备上访问您的开发环境，而不必担心本地环境的配置和兼容性问题。这意味着您可以在不同操作系统的计算机、平板电脑甚至手机上进行开发工作

  • 团队协作： 如果您在一个团队中工作，每个人都可以通过浏览器访问共享的开发环境，这样可以确保团队成员都在相同的开发环境中工作。这种方式可以避免因为不同的开发环境配置而导致的问题，提高团队的协作效率。

  • 敏捷开发和测试： 在敏捷开发中，快速迭代和测试是至关重要的。通过在Docker容器中运行VSCode，您可以快速部署、测试和调试代码，从而加速开发周期，提高软件交付的速度和质量。

  • 云环境开发： 在云环境中进行开发和部署已成为一种趋势。将VSCode运行在Docker容器中，可以轻松地在云中搭建开发环境，为云原生应用开发提供更加灵活和便捷的方式。

运行环境

Ubuntu版本信息

本文使用的ubuntu版本信息如下

copier@MS-OUOXYGCBWUIR:~$ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.3 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.3 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal

Docker版本信息

copier@MS-OUOXYGCBWUIR:~$ docker -v
Docker version 25.0.3, build 4debf41

Docker镜像

具体帮助文档参照Github/code-server

lscr.io/linuxserver/code-server:latest

操作步骤

创建配置目录

创建一个本地目录，映射到docker里的目录为/config,在该目录下可以：

  • 用户配置：code-server允许用户对其运行环境进行个性化配置，例如主题、字体、键绑定等。这些个性化配置通常存储在config目录中。

  • 扩展和插件：code-server支持许多 Visual Studio Code 的扩展和插件。用户安装的插件以及相关配置信息通常也会存储在config目录中。

  • 设置文件：code-server的一些全局设置和启动参数可以通过配置文件进行指定，这些配置文件通常也会存储在config目录中。

  • 数据持久性：config目录也可能包含一些持久性数据，例如用户的工作区设置、项目列表等。

copier@MS-OUOXYGCBWUIR:~$ mkdir ~/code
copier@MS-OUOXYGCBWUIR:~$ cd code
copier@MS-OUOXYGCBWUIR:~/code$ pwd
/home/copier/code

查看宿主机用户信息

copier@MS-OUOXYGCBWUIR:~/code$ id copier
uid=1000(copier) gid=1000(copier) groups=1000(copier)
copier@MS-OUOXYGCBWUIR:~/code$

启动Docker容器

使用如下命令启动Docker容器

docker run -d \
  --name=code-server \
  -e PUID=1000 \
  -e PGID=1000 \
  -e TZ=Etc/UTC \
  -e PASSWORD=password \
  -e SUDO_PASSWORD=password \
  -e PROXY_DOMAIN=code-server.my.domain \
  -e DEFAULT_WORKSPACE=/config/workspace \
  -p 8443:8443 \
  -v /home/copier/code:/config \
  --restart unless-stopped \
  lscr.io/linuxserver/code-server:latest

启动命令的参数说明：

  • -d: 以“后台模式”（detached mode）运行容器，使其在后台运行，而不阻塞当前终端。

  • --name=code-server: 为容器指定一个名称。

  • -e PUID=1000: 设置容器中运行的进程的用户ID（PUID），这里设置为1000。

  • -e PGID=1000: 设置容器中运行的进程的组ID（PGID），这里设置为1000。

  • -e TZ=Etc/UTC: 设置容器中运行的进程的时区，这里设置为“Etc/UTC”。

  • -e PASSWORD=password: 设置访问Code Server的密码，这里设置为“password”。

  • -e SUDO_PASSWORD=password: 设置sudo命令的密码，这里设置为“password”。

  • -e DEFAULT_WORKSPACE=/config/workspace: 设置默认的工作空间路径，这里设置为“/config/workspace”。

  • -p 8443:8443: 将容器的8443端口映射到主机的8443端口，以便可以通过该端口访问Code Server。

  • -v /home/copier/code:/config: 将主机的/home/copier/code目录挂载到容器内的/config目录，以便持久化存储Code Server的配置和工作空间数据。

  • --restart unless-stopped: 设置容器在退出时自动重启，除非手动停止容器。

  • lscr.io/linuxserver/code-server:latest: 指定要运行的Code Server镜像及其标签版本

查看Docker容器运行情况

copier@MS-OUOXYGCBWUIR:~/code$ docker ps
CONTAINER ID   IMAGE                                    COMMAND   CREATED          STATUS          PORTS                    NAMES
b7e17c95cee2   lscr.io/linuxserver/code-server:latest   "/init"   31 seconds ago   Up 27 seconds   0.0.0.0:8443->8443/tcp   code-server

打开Vscode

在浏览器中输入 http://127.0.0.1:8443/，提示输入密码“password”后，打开code的主界面
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origi请添加图片描述

构建java开发环境

安装JDK

下载jdk-17_linux-x64_bin.tar.gzv并解压在/home/copier/code/sfot目录下

copier@MS-OUOXYGCBWUIR:~/code$ ls ./soft/
jdk-17.0.10  jdk-17_linux-x64_bin.tar.gz

vs打开命令行看jdk是否映射成功
请添加图片描述

配置java运行环境

使用快捷键“ctr-shift-p”,按图所示打开Remote Settings 的json配置文件将jdk配置信息写入
请添加图片描述

{
    "java.configuration.runtimes": [
        {
          "name": "JavaSE-17",
          "path": "/config/soft/jdk-17.0.10/",
          "default": true
        }
      ]
}

安装插件

如果可以联网，可以在vscode中直接安装插件，也可选择下载插件本地安装。

请添加图片描述

创建java工程

同样使用快捷键“ctr-shift-p”，打开"Create Java Project ",根据提示完成操作，就会打开新的新工程，可以像在本地开发一样开发了。
请添加图片描述

请添加图片描述

本文由“代码转场工程师”原创发布，转载请联系授权

代码转场工程师
关注
  • 16
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
docker-dev-vscode:一个适用于Visual Studio Code远程开发的Docker映像
04-20
VS Code Remote的开发容器 该存储库包含用于构建理想的开发容器以与。 它是供我自己使用的，因此受到了高度评​​价。 配置 该容器可通过环境变量进行配置。 如果您不提供OpenSSH主机密钥，它们将只是随机生成。 但是，强烈建议您设置它们，否则每次重新创建容器时都会遇到关键冲突。 为了方便起见，默认情况下，容器可以以dev用户身份使用空密码登录。 建议您通过设置SSH_KEYS禁用密码登录。 SSH_PORT OpenSSH服务器侦听的端口。 默认为22 。 SSH_KEYS SSH登录的公钥。 多键用逗号分隔, 。 如果并且仅在提供SSH_KEYS情况下禁用密码登录（使用空密码）。 SSH_HOST_DSA_KEY OpenSSH服务器使用的base64编码的DSA主机私钥。 SSH_HOST_ECDSA_KEY OpenSSH服务器使用的base64编码的ECD
浏览器中的VS Code-Node.js开发
05-27
代码服务器·代码服务器是在远程服务器上运行的VS Code，可通过浏览器访问。 试试看：docker run -it -p 127.0.0.1:8080:8080 -v“ $ {HOME} /。local / share / code-server：/home/coder/.local/share/code-s code...
VsCode调试远程服务器上面的Docker容器
04-17 1301
远程(隧道/SSH)
docker常见命令及使用vscode在容器中开发
qwe14325的博客
08-03 1944
docker常见命令及使用vscode在容器中开发
VSCode连接远程服务器，并用Docker环境开发和调试
最新发布
qq_44624290的博客
07-01 853
目的：将本机添加到远程服务器连接白名单，让服务器知道是已认证的电脑在连接。由于我们是使用 SSH 连接远程服务器，因此 Windows 需要支持 SSH。点击 Open Folder 打开服务器对应的文件夹，就可以创建文件写代码了，所做的改写都是直接写的服务器中的文件，不会同步到本地。本次我们需要使用 Remote - SSH 插件，长这个样子，不要搞错了。这样后续在使用 Remote 插件时，不需要密码，就可以直接登录到服务器。如果需要连接多个远程服务器，可参考如上内容，配置多个即可。
哇塞的Docker——vscode远程连接Docker容器进行项目开发(二)
fuhao7i的博客
11-23 489
哇塞的Docker——docker配置Java环境1.拉取镜像2.运行容器3.利用yum配置Java环境4.java -version查看是否配置成功5.配置Vue开发环境 1.拉取镜像 docker pull centos 2.运行容器 docker run --name JavaWeb -itv /Users/fuhao7i/Docker/JavaWeb/:/home/ 0d120b6ccaa8 /bin/bash 3.利用yum配置Java环境 yum -y install java-1.8.0-
VScode远程服务器docker环境
SecretGirl的博客
04-14 1044
经常会遇到需要对docker容器中的代码调试的问题，远程使用IDE是很好的选择。
vscode docker 使用远程环境开发
曹先森的博客
07-15 1668
针对没有挂载本地文件夹。 安装好docker 拉取镜像 centos7 生成容器 centos-py(自定义名字) 容器内安装 python3 启动容器。（保持启动状态） vscode 内安装2个插件： Remote - Containers 、 docker 以上都准备好以后。 打开 vscode 左下角会有一个蓝色的东东（打开远程窗口）， 点一下。 在弹出的选项中选择： Attach to Running Container… (运行中的docker容器) 此时便进入了容器的内部。 你可以新建一个
【Docker】在Docker容器中运行VScode
JIANGSAS的博客
03-11 5638
原文链接：容器中的远程开发 Prerequisites VScode Docker-Desktop Steps 打开Docker：在Windows下出现鲸鱼图标且图标静止则打开成功； 检查Docker：Docker运行时，可以在终端下输入docker --version来检查Docker； 安装扩展插件：在VScode中安装Remote - Containers； 安装成功后，在VScode界面上左下角会出现一个状态条（Status bar）； 上图中绿色图标可以展示VScode正在
code-server:运行Debian和代码服务器的非根Docker映像
04-30
代码服务器 代码服务器是在远程服务器上运行的VS Code，可通过浏览器访问。 DEMYX 代码服务器标签基岩浏览去最新高山openlitespeed openlitespeed-bedrock wp 港口8080 用户脱毒工作目录/ demyx 配置/ etc / demyx ...
如何搭建vs code web版在线编辑器 Go Python NodeJs 开发环境搭建
05-26
3. 该开发镜像开启code-server服务，使用浏览器通过8080端口可以使用web版的vs code进行开发，因此可以远程随时随地进行开发。 4. 使用方法：解压后根据README.md文件的步骤即可，不懂的地方欢迎评论区@小编
docker-code-server
07-24
团队为您带来了另一个容器版本，其特点是： ... Code-server是运行在远程服务器上的 VS Code，可通过浏览器访问。 在具有一致开发环境的 Chromebook、平板电脑和笔记本电脑上编写代码。 如果您有 Windows 或 Mac
code-nginx-php-docker:https的分叉
03-19
-请考虑通过捐款或捐款来帮助我们是在远程服务器上运行的VS Code，可通过浏览器访问。在具有一致开发环境的Chromebook，平板电脑和笔记本电脑上编写代码。如果您有Windows或Mac工作站，则可以更轻松地为Linux开发。...
Docker 部署网页版 vscode (code-server)
m0_73096566的博客
04-22 2551
Docker 部署网页版 vscode (code-server)
vscode+docker搭建迷你开发环境。制作docker镜像，并通过vscode连接后进行开发
qq_29022265的博客
05-21 2661
vscode+docker搭建最小化迷你开发环境。制作docker镜像，并作为开发环境通过vscode连接。
vscode 访问远端docker开发环境
03-29 1972
123
VSCode+Docker(远程服务器)配置自定义开发环境
int_8的博客
03-25 6239
VSCode+Docker(远程服务器)配置自定义开发环境 文章目录VSCode+Docker(远程服务器)配置自定义开发环境前言1.Docker1.1 通过Dockerfile建立镜像1.2 实例化Docker容器1.3 Docker容器系统配置2.VSCode2.1 VSCode配置2.2 VSCode访问Docker容器 前言 在实验室经常遇到共用服务器和复现不同环境代码的问题，通过VSCode+Docker可以自定义配制环境，方便复现程序，管理环境。下面的方法是我常用的，大家可以根据自己的习惯
利用Docker启动VS Code通过浏览器访问进行远程开发，2024年最新含爱奇艺，2024年最新小米，2024年最新腾讯，2024年最新阿里
m0_74918915的博客
04-16 819
【代码】利用Docker启动VS Code通过浏览器访问进行远程开发，2024年最新含爱奇艺，2024年最新小米，2024年最新腾讯，2024年最新阿里。
docker启动的minio无法被远程访问
06-02
如果您在Docker中启动的MinIO无法被远程访问，可能是因为容器端口没有正确映射到主机端口。您可以通过以下步骤来解决这个问题： 1. 确认MinIO容器正在运行。可以使用以下命令来查看所有正在运行的容器： ``` docker ps ``` 如果MinIO容器正在运行，则应该能够看到它的基本信息。 2. 确认MinIO容器的端口已经正确映射到主机端口。在运行MinIO容器时，可以使用 `-p` 参数来指定端口映射。例如，要将容器端口9000映射到主机端口9000，可以使用以下命令： ``` docker run -p 9000:9000 minio/minio server /data ``` 如果端口映射设置正确，您应该能够从主机上的Web浏览器中访问MinIO。在浏览器中输入 `http://localhost:9000`，您应该能够看到MinIO的登录页面。 3. 如果您仍然无法从远程访问MinIO，请检查主机的防火墙设置，确保端口9000未被阻止。如果您使用的是云服务提供商，还需要检查安全组设置，确保端口9000未被阻止。 希望这些步骤能够帮助您解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码转场工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值