add overview en

docs/5.0/docs/user-guide/devbox/devbox.md

@@ -1,8 +1,207 @@
 # Devbox
 
-## Overview
+## Supportive Environment
 
-To be continued..
+System: Windows, MacOS (there is no difference in operation between the two), Editor: VSCode, Cursor, VSCode Insider.
+
+## Some concepts
+
+Devbox: It is a cloud sandbox, which refers to a remote editor environment + a remote running environment as a whole.
+
+## 1. Create your first Devbox
+
+Log in to [Usw Sealos](usw.sailos.io) or [Hzh Sealos](hzh.sealos.run) and click Devbox.
+
+![1](./images/1.png)
+
+Create a new project.
+
+![2](./images/2.png)
+
+Fill in your Devbox configuration.
+
+- Enter the project name;
+
+- Select the operating environment and version you want;
+
+- Select the CPU and memory;
+
+- Configure the network configuration (optional).
+
+   - **When to use: When you want to access the service running in your Devbox through the domain name**, for example:
+
+   - You run `npm run dev` in the nextjs runtime environment, and your service is likely to run on port 3000 (you should
+     know which ports your service runs on).
+
+   - Case 1: You know what is in a in advance, so you fill in the container exposure port 3000 when **creating**, **and
+     open public network access** (you don’t need to do the custom domain name later, at this time
+     sealos assigns you a fixed random address for this port).
+
+   - Case 2: After running the service, you think of opening this port. At this time, open the port in **change** (I
+     will talk about how to enter the change below).
+
+   - At this time, after you open the public network access of the port, you have a corresponding relationship between a
+     domain name and your port. At this time, you visit `qnedemdulyat.usw.sailos.io`
+     (assuming it is this), and you can see your page on the web page.
+
+The following is the picture I chose:
+
+![3](./images/3.png)
+
+Click Create in the upper right corner.
+
+## 2. Enter your remote environment
+
+Enter your editor environment on the list page: You can choose any of vscode, cursor, vscode Insider. Here I choose
+Cursor (the very useful AI version of VSCode).
+
+![4](./images/4.png)
+
+Clicking the button will jump to the Cursor.
+
+![5](./images/5.png)
+
+If you don't have the Devbox plugin installed, it will automatically install the plugin for you and open the remote
+environment.
+
+![6](./images/6.png)
+
+![7](./images/7.png)
+
+Successfully enter the remote environment.
+
+![8](./images/8.png)
+
+![9](./images/9.png)
+
+## 3. Encode and view the results
+
+Coding: I won’t change the code here.
+
+Run the development environment: Open the terminal and run `npm run dev`.
+
+![10](./images/10.png)
+
+At this time, there are two ways to view your development environment results.
+
+Local port forwarding: The pop-up window in the lower left corner is the local port forwarding that comes with vscode (
+Cursor also has it). You can directly click to open it in the browser or set up port forwarding yourself (there is a
+port in the lower right corner of the above picture, just to the right of the terminal). Local forwarding means
+forwarding the port of the remote environment to the same port of your localhost.
+
+![11](./images/11.png)
+
+Sealos public network port forwarding: Remember the port settings I asked you to add when you created it? (Don’t worry
+if you didn’t create it, I will talk about changing the configuration right away). Now we re-enter the Devbox in the
+Sealos desktop and click to enter the details page.
+
+![12](./images/12.png)
+
+Click the external network address (this address corresponds to the port 3000 we just created. You can see the port of
+the internal network address on the left, and you can see that this line is the port 3000 we created).
+
+![13](./images/13.png)
+
+Mission accomplished!
+
+![14](./images/14.png)
+
+## About Update
+
+There are two ways to enter Update:
+
+The item list has an Update button.。
+
+![15](./images/15.png)
+
+The details page also has an Update button.
+
+![16](./images/16.png)
+
+Update is the same as create, but only limited items can be changed: CPU, memory, and network configuration (most
+important).
+
+We can add new ports here to adapt to our development environment.
+
+![17](./images/17.png)
+
+## 4. Release the version and go online
+
+### Things you need to know before going live
+
+Each remote project has a special file `entrypoint.sh`. Its function is to help you automatically execute some
+instructions when going online, generally running commands for building packages.
+
+**Interpret the current document:**
+
+- `cd /home/sealos/project` (required): Enter your project directory (**We stipulate that your project is in a directory
+  in the container, do not change**).
+- `pnpm run start` (required): Run your production version (**This involves a problem, you need to package your
+  application in advance when you want to release it online**).
+
+![18](./images/18.png)
+
+### Release Process
+
+Package the project in the development environment in advance (see **Things you need to know before going online**) and
+make sure the `entrypoint.sh` file meets the requirements for running the production version service.
+
+![19](./images/19.png)
+
+Go to the details page and click Release.
+
+![20](./images/20.png)
+
+After filling in the form, click Publish (note that the machine will be temporarily shut down after publishing, which
+will cause the vscode connection to be disconnected and reconnected. At this time, you only need to wait until the
+publishing is completed and then reopen the vscode window).
+
+![21](./images/21.png)
+
+Wait for a short while. (Publishing time is slightly longer)
+
+![22](./images/22.png)
+
+Click Go Online.
+
+![23](./images/23.png)
+
+When you go online, you will be redirected to the application deployment page of application management, and most
+parameters will be automatically passed from the Devbox to here.
+
+I just changed the application name and clicked on it. You can adjust other things. Here are two small points: From the
+advanced configuration, you can see the function of your `entrypoint.sh` file, which is actually the command used to
+start the image container. Note that the name should not be the same as the devbox name, otherwise there will be a
+conflict.
+
+![24](./images/24.png)
+
+After successfully going online, jump to the application management details page and click the public network address to
+see the page.
+
+![25](./images/25.png)
+
+![26](./images/26.png)
+
+## 5. Other tips and points to note
+
+- Connect to the remote environment directly via ssh: The cloud sandbox details page provides downloads for the SSH
+  connection string and private key. After downloading the private key, replace the address of the private key file with
+  yourPrivateKeyPath after the connection string -i.
+
+- Deleting Devbox after publishing will not delete the version you have already published. So when you create a new
+  Devbox with the same name later, you can still see the original version history.
+
+- It is not currently supported to create and open a Devbox from scratch on the plugin side (we will complete this part
+  in the second issue). You must enter the editor IDE on the web side to enter the remote environment.
+
+- ![27](./images/27.png)
+
+- The more button in the Devbox list has some convenient ways to do things, such as: release, terminal (just like the
+  terminal of other sealos applications, enter a web page terminal) and common control items (restart, shut down, start
+  up, delete).
+
+![28](./images/28.png)
 
 ## FAQ
 
@@ -63,3 +262,14 @@ Solution:
    3. Remove `rm -rf .cursor-server`.
    4. Just retry the connection.
 2. If there is no content in the newly created Devbox, you can directly delete it and rebuild it.
+
+### 4. Report the following error
+
+```bash
+upstream connect error or disconnect/reset before headers. retried and the latest reset reason: remote connection failure, transport failure reason: delayed connect error: 111
+```
+
+First of all, you should understand that your current environment is a development environment. The URL you are
+connecting to is a test URL, which is only used in the development environment. This URL corresponds to the port of the
+development environment. In other words, you must run the development environment, such as `npm run dev` to run your
+program first, before you can see the content through the URL, otherwise this error will be reported.

docs/5.0/i18n/zh-Hans/user-guide/devbox/devbox.md

@@ -10,15 +10,15 @@ Devbox：就是云沙箱，指一个远程编辑器环境 + 远程运行环境
 
 ## 一、创建你的第一个 Devbox
 
-1、登录 [Usw Sealos](usw.sailos.io) 或者 [Hzh Sealos](hzh.sealos.run)，点击云沙箱。
+登录 [Usw Sealos](usw.sailos.io) 或者 [Hzh Sealos](hzh.sealos.run)，点击云沙箱。
 
 ![1](./images/1.png)
 
-2、新建项目。
+新建项目。
 
 ![2](./images/2.png)
 
-3、填写你的 Devbox 配置。
+填写你的 Devbox 配置。
 
 - 填写项目名称；
 
@@ -44,40 +44,40 @@ Devbox：就是云沙箱，指一个远程编辑器环境 + 远程运行环境
 
 ![3](./images/3.png)
 
-4、点击右上角创建即可。
+点击右上角创建即可。
 
 ## 二、进入你的远程环境
 
-1、在列表页进入你的编辑器环境：你可以选择 vscode、cursor、vscode Insider 的任何一种。这里我选择 Cursor（非常好用的 AI 版
+在列表页进入你的编辑器环境：你可以选择 vscode、cursor、vscode Insider 的任何一种。这里我选择 Cursor（非常好用的 AI 版
 VSCode）。
 
 ![4](./images/4.png)
 
-2、点击按钮就会跳转到 Cursor。
+点击按钮就会跳转到 Cursor。
 
 ![5](./images/5.png)
 
-3、当你没有安装 Devbox 插件时，会自动为你安装插件并且打开远程环境。
+当你没有安装 Devbox 插件时，会自动为你安装插件并且打开远程环境。
 
 ![6](./images/6.png)
 
 ![7](./images/7.png)
 
-4、成功进入远程环境。
+成功进入远程环境。
 
 ![8](./images/8.png)
 
 ![9](./images/9.png)
 
 ## 三、编码并查看结果
 
-1、编码：我这里就不改代码了哈。
+编码：我这里就不改代码了哈。
 
-2、运行开发环境：打开终端运行 `npm run dev`。
+运行开发环境：打开终端运行 `npm run dev`。
 
 ![10](./images/10.png)
 
-3、此时有两种方式看你的开发环境结果。
+此时有两种方式看你的开发环境结果。
 
 本地端口转发：左下角的弹窗是 vscode 自带的本地端口转发（Cursor
 也有），你可以直接点击在浏览器打开或者自己设置端口转发（上图右下角就在终端的右边有个端口）。本地转发的意思就是把远程环境的端口转发到你的
@@ -132,48 +132,48 @@ Sealos 桌面里的云沙箱，点击进入详情页。
 
 ### 发布过程
 
-1、提前在开发环境里打包好项目（原因看**上线前需要知道的事情**）并确定 `entrypoint.sh` 文件符合运行生产版本服务的要求。
+提前在开发环境里打包好项目（原因看**上线前需要知道的事情**）并确定 `entrypoint.sh` 文件符合运行生产版本服务的要求。
 
 ![19](./images/19.png)
 
-2、进入详情页，点击发布版本。
+进入详情页，点击发布版本。
 
 ![20](./images/20.png)
 
-3、填写完成点击发布（注意发布后会暂时关闭机器，会导致 vscode 的连接断开重连，此时你只要等待发版完成后再重新打开 vscode
+填写完成点击发布（注意发布后会暂时关闭机器，会导致 vscode 的连接断开重连，此时你只要等待发版完成后再重新打开 vscode
 窗口即可）。
 
 ![21](./images/21.png)
 
-4、等待一小段时间。（发版时间略长）
+等待一小段时间。（发版时间略长）
 
 ![22](./images/22.png)
 
-5、点击上线。
+点击上线。
 
 ![23](./images/23.png)
 
-6、上线会跳转到应用管理的应用部署页面，并自动把大部分参数从云沙箱传递到这里。
+上线会跳转到应用管理的应用部署页面，并自动把大部分参数从云沙箱传递到这里。
 
 我这里仅仅修改一下应用名称，就点击上线了，你可以调整别的，这里有两个小点：从高级配置里可看出你 `entrypoint.sh`
 文件的作用，其实就是用来启动镜像容器的命令。注意名称别和 devbox 名称一样，不然会冲突的。
 
 ![24](./images/24.png)
 
-7、上线成功后跳转应用管理详情页,点击公网地址即可看到页面。
+上线成功后跳转应用管理详情页,点击公网地址即可看到页面。
 
 ![25](./images/25.png)
 
 ![26](./images/26.png)
 
 ## 五、其他的一些小技巧和注意点
 
-- 直接通过 ssh 连接到远程环境：云沙箱详情页提供了 SSH 连接串和私钥的下载。下载完私钥之后将私钥文件的地址替换掉连接串-i
-  后面的[yourPrivateKeyPath]即可。
+- 直接通过 ssh 连接到远程环境：云沙箱详情页提供了 SSH 连接串和私钥的下载。下载完私钥之后将私钥文件的地址替换掉连接串-i 后面的
+  yourPrivateKeyPath 即可。
 
-- 发版之后删除 Devbox，并不会删除你已经发布的版本。所以你之后创建新的同名Devbox 时仍然能够看到原来的版本历史。
+- 发版之后删除 Devbox，并不会删除你已经发布的版本。所以你之后创建新的同名 Devbox 时仍然能够看到原来的版本历史。
 
-- 暂时不支持在插件端从零创建和打开一个Devbox（我们第二期就会补全这部分），你必须在网页端进入编辑器 IDE 才能进入远程环境。
+- 暂时不支持在插件端从零创建和打开一个 Devbox（我们第二期就会补全这部分），你必须在网页端进入编辑器 IDE 才能进入远程环境。
 
 ![27](./images/27.png)
 
@@ -244,5 +244,5 @@ Host usw.sailos.io_ns-rqtny6y6_devbox1234
 upstream connect error or disconnect/reset before headers. retried and the latest reset reason: remote connection failure, transport failure reason: delayed connect error: 111
 ```
 
-首先明白一下你此时的环境是开发环境，你现在连接的网址是测试网址，只用于开发环境，这个网址对应的是开发环境的端口。
-也就是说你必须运行开发环境，例如 `npm run dev` 让你的程序先运行起来，才能通过网址看到内容，否则就会报这个错误。
+首先明白一下你此时的环境是开发环境，你现在连接的网址是测试网址，只用于开发环境，这个网址对应的是开发环境的端口。也就是说你必须运行开发环境，例如
+`npm run dev` 让你的程序先运行起来，才能通过网址看到内容，否则就会报这个错误。