Elgato_dark/Olares

Fork 0

mirror of https://github.com/beclab/Olares synced 2026-04-21 21:47:56 +00:00

yajing wang d38d0d0e1d docs: fix misplaced braces in studio tutorial

2025-12-31 20:59:24 +08:00

8.7 KiB

Raw Blame History

outline

description

了解如何使用 Studio 设置开发容器，通过 VS Code 访问，并配置端口转发。

使用开发容器开发应用

Olares Studio 允许你启动预配置的开发容器来编写和调试代码（如 Node.js 脚本或 CUDA 程序），无需管理本地基础设施。它提供了一个与生产运行时一致的、完全隔离的环境。

本文档以 Node.js 项目为例介绍开发和配置流程。

前提条件

Olares 1.12.2 及以上版本。

1. 初始化容器

开始编码前，需要配置容器资源并选择运行时环境。

打开 Studio 并选择创建新应用。
输入应用名称（例如 My Web），然后点击确认。
选择在 Olares 上写程序作为创建方式。
配置开发环境：

a. 从下拉列表中选择 beclab/node20-ts-dev:1.0.0。

b. 为容器分配资源，例如：
- CPU：2 core
- 内存：4 Gi
- 卷大小：500 Mi
在暴露端口字段中，输入用于调试的端口，例如 8080。 :::tip 暴露多个端口端口 80 默认为暴露状态。如需暴露多个额外端口，请用逗号分隔。 :::
点击创建。等待左下角的状态变为运行中。

2. 访问工作区

你可以通过浏览器或本地 IDE 访问开发容器。

选项 A：基于浏览器的 VS Code

点击 Studio 中的在线编辑器，在浏览器中启动一个功能齐全的 VS Code 实例。

选项 B：本地 VS Code 远程隧道

如果更习惯使用本地设置和插件，可以通过隧道连接到容器。

点击 Studio 中的在线编辑器以打开基于浏览器的 VS Code。
点击左上角的 menu，选择 Terminal > New Terminal 打开终端。

安装 VS Code Tunnel CLI：

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

创建安全隧道：
```
code tunnel
```
按照终端提示，通过提供的 URL 使用 Microsoft 或 GitHub 帐户进行身份验证。
出现提示时为隧道命名，例如 myapp-demo。终端将输出绑定到此远程工作区的 vscode.dev URL。
在本地机器上打开 VS Code，点击左下角的 >< 图标，选择 Tunnel。 {width=30%}
使用上一步中的同一帐户登录。
选择刚才定义的隧道名称 myapp-demo。VS Code 可能需要几分钟建立连接。连接成功后，左下角的远程指示器将显示隧道名称。 {width=30%}

连接成功后，你将拥有对容器文件系统和终端的完全远程访问权限，体验与本地开发一致。

3. 编写和运行代码

进入工作区后，无论是通过浏览器还是本地隧道，工作流与标准本地开发无异。你可通过以下方式向工作区添加内容：

上传文件
克隆 Git 仓库
手动创建文件

本例演示如何手动创建一个基础网页。

打开 Explorer 侧边栏并导航到 /root/。 :::info Studio 将项目文件持久化在 数据/studio/<app_name>/ 路径下。 :::
在左上角点击 menu，选择 Terminal > New Terminal 打开终端。
运行以下命令初始化项目：
```
npm init -y
```
安装 Express 框架：
```
npm install express --save
```

在 /root/ 中创建文件 index.js，内容如下：

 // 确保端口与定义的一致
const express = require('express');
const app = express();
app.use(express.static('public/'));
app.listen(8080, function() {
    console.log('Server is running on port 8080');
});

在 /root/ 中创建 public 目录并添加 index.html 文件：

<!DOCTYPE html>
 <html>  
     <head>
         <meta charset="UTF-8">
         <title>My Web Page</title>
     </head>
     <body>
         <h1>Hello World</h1>
         <h1>Hello Olares</h1>
     </body>
 </html>

启动服务器：
```
node index.js
```
打开 VS Code 中的 Ports 标签页，点击转发地址查看结果。

4. 配置端口转发

如果在创建容器后需要暴露更多端口，例如添加端口 8081，需要手动编辑容器配置清单。 :::tip 如果需要更改端口号，可参照相同步骤修改 OlaresManifest.yaml 和 deployment.yaml 文件。 :::

修改配置

在 Studio 中，点击右上角的 box_edit编辑打开编辑器。

编辑 OlaresManifest.yaml。

a. 将新端口追加到 entrances 列表：

entrances:
- authLevel: private
  host: myweb
  icon: https://app.cdn.olares.com/appstore/default/defaulticon.webp
  invisible: true
  name: myweb-dev-8080
  openMethod: ""
  port: 8080
  skip: true
  title: myweb-dev-8080
# 添加以下内容
- authLevel: private
  host: myweb # 必须匹配 Service metadata name
  icon: https://app.cdn.olares.com/appstore/default/defaulticon.webp
  invisible: true
  name: myweb-dev-8081 # 唯一标识符
  openMethod: ""
  port: 8081 # 新端口号
  skip: true
  title: myweb-dev-8081

b. 在右上角点击 save 保存更改。

编辑 deployment.yaml。

a. 在 Deployment > metadata 下，将端口映射添加到 default-thirdlevel-domains：

  annotations:
    applications.app.bytetrade.io/default-thirdlevel-domains:
     '[{"appName":"myweb","entranceName":"myweb-dev-8080"},{"appName":"myweb","entranceName":"myweb-dev-8081"}]'
     # # entranceName 必须匹配 OlaresManifest.yaml 中的名称

b. 更新 spec > template > metadata 下的 studio-expose-ports 注解：

 template:
   metadata:
     annotations:
       applications.app.bytetrade.io/studio-expose-ports: "8080,8081"

c. 在 Service > spec > ports 下添加端口定义：

kind: Service
spec:
  ports:
  - name: "80"
    port: 80
    targetPort: 80
  - name: myweb-dev-8080
    port: 8080
    targetPort: 8080
    # 添加以下内容
  - name: myweb-dev-8081 # 必须匹配 entrance name
    port: 8081
    targetPort: 8081
  selector:
    io.kompose.service: myweb

d. 在右上角点击 save 保存更改。

点击应用重新部署容器。

部署成功后，你可以在服务 > 端口中看到列出的新端口。

测试连接

更新 index.js 以监听新端口：

const express = require('express');
const app = express();
app.use(express.static('public/'));
app.listen(8080, function() {
    console.log('Server is running on port 8080');
});
// 添加以下内容
const app_new = express();
app_new.use(express.static('new/'));
app_new.listen(8081, function() {
    console.log('Server is running on port 8081');
});

在 /root/ 中创建 new 目录并添加 index.html 文件：

<!DOCTYPE html>
 <html>  
     <head>
         <meta charset="UTF-8">
         <title>My Web Page</title>
     </head>
     <body>
         <h1>This is a new page</h1>
     </body>
 </html>

重启服务器：
```
node index.js
```
检查 Ports 标签页确认端口 8081 处于活动状态且可访问。
点击转发地址查看结果。

8.7 KiB Raw Blame History Unescape Escape