使用开发容器（DevContainer）远程开发应用

教程分享
1

本文介绍如何通过 Remote Tunnels 插件，将你的本地 VS Code 连接到 Olares Studio 中运行的开发容器（DevContainer）。这种连接方式既保证了开发者的本地编码体验，也可以充分利用开发容器提供的标准化、隔离式环境，打造一致、安全、高效的远程开发工作流。

准备工作

开始之前，确保你满足以下条件：

  • Olares 已更新至 1.11.6 或更新版本。
  • 本地的 VS Code 中已安装好"Remote Tunnels"的插件。

创建开发容器

首先我们需要在 Studio 里创建开发容器：

  1. 打开 Studio，在欢迎页面，点击创建新应用。

  2. 在创建页面里，输入应用名称，并点击确认。为方便演示，我们创建了一个 dev-container-demo 的应用。

  3. 在应用页面下方，点击在 Olares 上写程序，进入开发容器创建页面。

    image
    image1280×877 67.1 KB

  4. 根据自己的需求配置开发容器：

  • 开发环境：可选环境有 Node、Go 和 Python。
  • CPU：开发容器的可用 CPU。
  • 内存：开发容器的可用内存。
  • 卷大小：开发容器的可用存储。
  1. 配置完成后，点击创建。等待创建完成后，应用的容器绑定至新建的开发容器。同时，应用也在 Olares 里完成部署。

image
image1280×426 43.1 KB

创建安全隧道

  1. 在应用页面的右上角，点击在线编辑器。会弹出网页版的 VS Code 应用。

  2. 从 VS Code 左上角导航菜单进入 Terminal > New Terminal 打开终端：

    image
    image1280×591 87.8 KB

  3. 在终端里执行以下命令以安装隧道所需的命令行工具包：

    curl -SsfL https://vscode.download.prss.microsoft.com/dbazure/download/stable/17baf841131aa23349f217ca7c570c76ee87b957/vscode_cli_alpine_x64_cli.tar.gz | tar zxv -C /usr/local/bin

  4. 使用 tunnel 命令为开发容器创建安全隧道：
    code tunnel
    终端会提示选择登录方式：

    * Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
 ? How would you like to log in to Visual Studio Code? ›
 ❯ Microsoft Account
   GitHub Account

    国内用户建议选择 Microsoft Account。

  5. 按终端提示，使用提供的设备验证网址和验证码在浏览器里按完成授权和账户验证。

    ✔ How would you like to log in to Visual Studio Code? · Microsoft Account
   To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code FZDS3CXZ2 to authenticate.

  6. 验证完成后，回到终端。按提示为隧道取名，如 devcontainer-demo。确认后，系统会以此名称创建安全隧道，并生成网页访问地址。

    ✔ What would you like to call this machine? · devcontainer-demo
[2025-04-29 09:53:01] info Creating tunnel with the name: devcontainer-demo
Open this link in your browser https://vscode.dev/tunnel/devcontainer-demo

至此，代码服务器安全隧道创建完成。

通过隧道进行远程开发

  1. 打开本地的 VS Code, 在左下角点击**><**(Open a Remote Window) 按钮，然后在上方弹出命令框里选择 Connect to Tunnel。

    image
    image1280×729 127 KB

  2. 按提示选择微软账户登录。你会被引导至微软登陆页面，选择与之前授权相同的账户登录，然后返回 VS Code。

    image
    image1204×158 7.42 KB

  3. 登录后 VS Code 会列出您账户下所有活动的隧道（开发服务器）。选择我们之前创建的隧道名称，如devcontainer-demo。

    image
    image1188×166 7.92 KB

  4. VS Code 会通过隧道连接远程的开发容器，这可能需要一点时间。连接成功后，你会看到左下角的远程连接图标处显示为devcontainer-demo。

    image
    image1280×579 99.1 KB

此时，本地 VSCode 编辑器以直接连接到 Olares Studio 中的开发容器。你可以像编辑本地项目一样，访问容器内的文件系统、使用终端、进行调试等，享受完整的本地开发体验。

提示：
你可以在 VS Code 左侧活动栏的 远程资源管理器 (Remote Explorer) 图标下查看或切换当前所有的远程连接（包括 Tunnels, SSH Targets 等）。