doc: add devbox doc

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

@@ -0,0 +1,35 @@
+# Devbox
+
+## Overview
+
+> A platform for instant collaborative development, seamless deployment, and strict environment isolation. Streamline your workflow with our all-in-one solution.
+
+Sealos Devbox is an all-in-one platform designed for integrated online development, testing, and production. It offers a seamless solution for creating environments and database dependencies with just a single click. This innovative platform allows developers to work locally using their preferred IDEs while streamlining setup processes and enabling automatic application deployment.
+
+![overview-1](./images/quick-start-1.png)
+
+### Key Features and Advantages
+
+#### Instant collaborative environments
+
+Sealos Devbox provides quick and easy setup of development environments for a wide range of programming languages and frameworks, including less common ones. This feature enables teams to start collaborating instantly, regardless of the technology stack they're using.
+
+#### Cloud development environment
+
+One of the primary advantages of Sealos Devbox is its ability to eliminate environment inconsistencies. By offering a unified cloud platform, it allows teams to share code, configurations, and test data effortlessly. This streamlined approach accelerates development processes, enhances efficiency, and promotes seamless collaboration within a single, harmonious environment.
+
+#### Headless development experience
+
+Sealos Devbox simplifies the development process by unifying development, testing, and production environments. It automates environment creation and integrates smoothly with local IDEs, providing a hassle-free setup experience for developers.
+
+#### Effortless continuous delivery
+
+With Sealos Devbox, teams can deliver applications smoothly without requiring expertise in Docker or Kubernetes. Developers simply need to specify the version, and Devbox handles all the complex tasks, including building containers.
+
+#### Strict environment isolation
+
+Sealos Devbox offers isolated development environments, helping teams avoid dependency conflicts. Each project can have its own consistent and reproducible workspace, allowing developers to focus on relevant tasks without worrying about environmental inconsistencies.
+
+#### Access from any network
+
+Sealos Devbox provides access to applications from both internal networks and the Internet, with automatic TLS configuration. This feature ensures secure and flexible development capabilities, allowing teams to work from any network, anywhere in the world.

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

@@ -0,0 +1,60 @@
+# FAQ
+
+## 1. Cursor connection problem but VSCode can connect
+
+Cursor Since the plugin version synchronization with VSCode is slow, outdated versions may cause connection problems.
+
+Solution: Manually install the Devbox plugin.
+
+1. Download the vsix file of the [Devbox](https://marketplace.visualstudio.com/items?itemName=labring.devbox-aio) plugin from the VSCode plugin market.
+
+![devbox-1](./images/faq-1.png)
+
+2. Open the Cursor's extension window.
+
+3. Drag the downloaded file into the extension window.
+
+![devbox-2](./images/faq-2.png)
+
+## 2. Cursor and VSCode cannot connect
+
+First, understand the principle of the Devbox plugin: add remote environment information by modifying the ssh config file, and connect to the remote environment through the Remote-SSH plugin. The plugin first writes the following line of code in `~/.ssh/config` (some older versions may write other similar content):
+
+```bash
+Include ~/.ssh/sealos/devbox_config
+```
+
+This line of code imports the contents of the file `~/.ssh/sealos/devbox_config` into the current file. And `devbox_config` contains normal SSH configuration content, for example:
+
+```config
+Host usw.sailos.io_ns-rqtny6y6_devbox1234
+  HostName usw.sailos.io
+  User devbox
+  Port 40911
+  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
+  IdentitiesOnly yes
+  StrictHostKeyChecking no
+```
+
+So if there is a problem, it is most likely a plugin bug that causes errors in reading and writing files. You can feedback this to us or try to adjust the SSH file yourself.
+
+## 3. Always stuck in downloading vscode-server or keep retrying
+
+Cause: Due to some operation (such as restarting Devbox during this process), the download cursor is suspended, and re-downloading causes conflicts.
+
+Solution:
+
+1. Enter the web terminal and delete the `.cursor-server` folder.
+    1. Click "Terminal" in the operation button on the right side of the Devbox webpage list item.
+    2. Enter the terminal and go to the user directory first, `cd ..`, then use `ls -a ` to view all files and you can see `.cursor-server`.
+    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/docs/user-guide/devbox/quick-start.md

@@ -0,0 +1,169 @@
+# Quick Start
+
+> Learn how to create, develop, and deploy a Next.js app using Sealos DevBox. This guide covers project setup, remote development with Cursor IDE, and cloud deployment.
+
+Sealos Devbox is an all-in-one platform designed for integrated online development, testing, and production. It offers a seamless solution for creating environments and database dependencies with just a single click, allows developers to work locally using their preferred IDEs while streamlining setup processes and enabling automatic application deployment.
+
+In this guide We'll demonstrate how to create a minimal Next.js demo project with Sealos Devbox.
+
+## Create a Devbox Project
+
+1. Click on the "Devbox" icon on Sealos Desktop, then click on the "Create New Project" button to create a new project.
+
+2. In the "Runtime" section, choose "Next.js" as the development framework. Use the sliders to set the CPU cores and memory for the project.
+
+![quick-start-1](./images/quick-start-1.png)
+
+3. After setting up the basic environment, you'll need to configure the network settings for your project:
+
+- Scroll down to the "Network" section of the configuration page.
+- Container Port:
+    - Enter "3000" in the Container Port field. This is the default port that Next.js uses for development.
+    - If you need additional ports, click the "Add Port" button and specify them.
+- Enable Internet Access:
+    - Toggle the switch to enable internet access for your Devbox. This allows external users to access your Next.js
+      application through the public internet using the provided domain.
+- Domain:
+    - By default, Sealos provides a subdomain for your application.
+    - If you want to use a custom domain, click on "Custom Domain" and follow the instructions to set it up.
+
+Remember that the container port (3000) should match the port your Next.js application is configured to run on. If you change the port in your Next.js configuration, make sure to update it here as well.
+
+![quick-start-2](./images/quick-start-2.png)
+
+4. Click on the "Create" button to create your project.
+
+![quick-start-3](./images/quick-start-3.png)
+
+## Connect with Cursor IDE
+
+After creating your project, you'll see it listed in the Devbox List. Each project has an "Operation" column with various options.
+
+![quick-start-4](./images/quick-start-4.png)
+
+1. To connect to your project's Devbox runtime using Cursor IDE:
+
+- Locate your project in the Devbox List.
+- In the "Operation" column, click on the dropdown arrow next to the VSCode icon.
+- From the dropdown menu, select "Cursor".
+- Click on the "Cursor" option that appears.
+
+2. When you click on "Cursor", it will launch the Cursor IDE application on your local machine. Within Cursor, a popup window will appear, prompting you to install the Devbox plugin for Cursor. This plugin enables SSH remote connection to the Devbox runtime.
+
+- Follow the instructions in the Cursor popup to install the Devbox plugin.
+- Once installed, Cursor will establish a remote connection to your Devbox runtime.
+
+> You can switch between different IDE options (VSCode, Cursor, or VSCode Insiders) at any time by using the dropdown menu in the "Operation" column.
+
+## Develop
+
+1. After the connection is established, you'll be able to access and edit your project files directly within the Cursor IDE environment.
+
+![quick-start-5](./images/quick-start-5.png)
+
+This remote connection allows you to develop your Next.js application using Cursor IDE, with all the benefits of a cloud-based development environment:
+
+- Your code runs in the Devbox runtime, ensuring consistency across development and production environments.
+- You can access your project from anywhere, on any device with Cursor installed.
+- Collaboration becomes easier as team members can connect to the same Devbox runtime.
+
+2. You can start debugging your Next.js application:
+
+- Open the terminal within Cursor IDE.
+- Navigate to your project directory if you're not already there.
+- Run the following command to start the Next.js development serve:
+
+```bash
+npm run dev
+```
+
+- This command will start your Next.js application in development mode.
+
+3. To access your running application:
+
+- Return to the Sealos Devbox List in your browser.
+- Find the project you just created.
+- Click on the "Detail" button on the right side of your project's row.
+
+4. In the project details page:
+
+- Look for the "Network" section.
+- You'll see an "External Address" field.
+- Click on this external address.
+
+![quick-start-6](./images/quick-start-6.png)
+
+5. This will open your Next.js application in a new browser tab, allowing you to view and interact with your running service.
+
+![quick-start-7](./images/quick-start-7.png)
+
+## Release
+
+After you've developed and tested your Next.js application, you can release it as an OCI (Open Container Initiative) image. This allows you to version your application and prepare it for deployment.
+
+1. In the Cursor IDE terminal, navigate to your project directory and run the build command:
+
+```bash
+npm run build
+```
+
+This command creates a production-ready build of your Next.js application in the '.next' directory.
+
+2. Navigate to your project's details page:
+
+- Go to the Sealos Devbox List in your browser.
+- Find your project and click on the "Detail" button on the right side of your project's row.
+
+3. On the project details page, look for the "Version" section.
+
+4. Click on the "Release" button located in the top right corner of the "Version" section.
+
+5. A "Release" dialog box will appear. Here, you need to provide the following information:
+
+- Image Name: This field is pre-filled with your project's image name.
+- Tag: Enter a version tag for your release (e.g., v1.0).
+- Description: Provide a brief description of this release (e.g., "Initial release" or "Bug fixes for login feature").
+
+![quick-start-8](./images/quick-start-8.png)
+
+6. After filling in the required information, click the "Release" button at the bottom of the dialog box.
+
+7. The system will process your release. Once completed, you'll see a new entry in the "Version" section of your project
+   details page, showing the tag, status, creation time, and description of your release.
+
+![quick-start-9](./images/quick-start-9.png)
+
+By following these steps, you've successfully created an OCI image of your Next.js application. This image can now be used for deployment or shared with other team members. Each release creates a snapshot of your current code, allowing you to maintain different versions of your application and easily roll back if needed.
+
+> Remember to create new releases whenever you make significant changes or reach important milestones in your project. This practice helps in maintaining a clear history of your application's development and facilitates easier deployment and collaboration.
+
+## Deploy
+
+After releasing your Next.js application as an OCI image, you can deploy it to Sealos Cloud for production use. Here's how to do it:
+
+1. In your project's details page, locate the "Version" section.
+
+2. Find the release you want to deploy and click the "Deploy" button in the "Operation" column.
+
+3. This will redirect you to the App Launchpad application within Sealos.
+
+4. In the App Launchpad application, follow the deployment wizard to configure your application settings. This may include:
+
+- Selecting the appropriate environment
+- Setting resource limits (CPU, memory)
+- Configuring environment variables if needed
+- Setting up any required volumes or persistent storage
+
+![quick-start-10](./images/quick-start-10.png)
+
+5. Once you've configured all necessary settings, click the "Deploy Application" button in the top right corner to start the deployment process.
+
+6. You'll be taken to the application details view within App Launchpad.
+
+7. Once the status is "Running", Click on the address provided under "Public Address". This will open your deployed Next.js application in a new browser tab.
+
+By following these steps, you've successfully deployed your Next.js application to Sealos Cloud using the App Launchpad application. Your application is now accessible via the public address, allowing users to interact with it from anywhere on the internet.
+
+> You can always update your application by creating a new release in Devbox and repeating this deployment process with the new version using App Launchpad.
+
+This workflow allows you to develop and debug your Next.js application in a cloud environment while still using your preferred local IDE. The external address makes it easy to share your work with team members or clients, as they can access your running application from anywhere with an internet connection.

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

@@ -0,0 +1,36 @@
+# Devbox
+
+## 简介
+
+> 一个用于即时协作开发、无缝部署和严格环境隔离的平台。使用我们的一体化解决方案简化您的工作流程。
+
+Sealos Devbox 是一个一体化平台，专为集成在线开发、测试和生产而设计。它提供了一个无缝解决方案，只需单击一下即可创建环境和数据库依赖项。这个创新平台允许开发人员使用他们喜欢的 IDE 在本地工作，同时简化设置流程并实现自动应用程序部署。
+
+![overview-1](./images/quick-start-1.png)
+
+### 主要特点和优势
+
+#### 即时协作环境
+
+Sealos Devbox 为各种编程语言和框架（包括不太常见的语言和框架）提供快速简便的开发环境设置。此功能使团队能够立即开始协作，无论他们使用哪种技术堆栈。
+
+#### 云开发环境
+
+Sealos Devbox 的主要优势之一是它能够消除环境不一致。通过提供统一的云平台，它允许团队轻松共享代码、配置和测试数据。这种简化的方法可以加速开发流程、提高效率，并在单一、和谐的环境中促进无缝协作。
+
+#### 无头开发经验
+
+Sealos Devbox 通过统一开发、测试和生产环境简化了开发流程。它可以自动创建环境并与本地 IDE 无缝集成，为开发人员提供轻松的设置体验。
+
+#### 轻松持续交付
+
+借助 Sealos Devbox，团队无需具备 Docker 或 Kubernetes 方面的专业知识即可顺利交付应用程序。开发人员只需指定版本，Devbox 就会处理所有复杂任务，包括构建容器。
+
+#### 严格环境隔离
+
+Sealos Devbox 提供隔离的开发环境，帮助团队避免依赖冲突。每个项目都可以拥有自己一致且可重现的工作空间，让开发人员可以专注于相关任务，而不必担心环境不一致。
+
+#### 从任何网络访问
+
+Sealos Devbox 提供从内部网络和互联网访问应用程序的功能，并具有自动 TLS 配置。此功能可确保安全灵活的开发能力，让团队可以在世界任何地方的任何网络上工作。
+

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

@@ -0,0 +1,64 @@
+# FAQ
+
+## 1、Cursor 连接出现问题但是 VSCode 可以连接
+
+Cursor 由于插件版本同步 VSCode 比较缓慢，比较落后的版本可能会导致连接出现问题。
+
+解决措施：手动安装 Devbox 插件。
+
+1. 从 VSCode 插件市场下载 [Devbox](https://marketplace.visualstudio.com/items?itemName=labring.devbox-aio) 插件的 vsix
+   文件。
+
+![devbox-1](./images/faq-1.png)
+
+2. 打开 Cursor 的扩展窗口。
+
+3. 将下载的文件拖拽到扩展窗口中。
+
+![devbox-2](./images/faq-2.png)
+
+## 2、Cursor 和 VSCode 都无法连接
+
+首先明白 Devbox 插件的原理：即通过改动 ssh config 文件来添加远程环境信息，并通过 Remote-SSH 插件进行远程环境的连接。插件首先在
+`~/.ssh/config` 写入下面这行代码（一些老版本可能写入的其他类似的内容）：
+
+```bash
+Include ~/.ssh/sealos/devbox_config
+```
+
+这行代码的作用是将 `~/.ssh/sealos/devbox_config` 这个文件的内容导入到当前文件。而 `devbox_config` 里则是正常的 SSH
+配置内容，例如：
+
+```config
+Host usw.sailos.io_ns-rqtny6y6_devbox1234
+  HostName usw.sailos.io
+  User devbox
+  Port 40911
+  IdentityFile ~/.ssh/sealos/usw.sailos.io_ns-rqtny6y6_devbox1234
+  IdentitiesOnly yes
+  StrictHostKeyChecking no
+```
+
+所以如果出现问题，大概率是插件 BUG 读写文件出错，可以反馈给我们，或者自己尝试调整 SSH 文件。
+
+## 3、一直卡在下载 vscode-server 过程，或者是不断重试
+
+原因：因为某种操作（在这个过程中重启 Devbox 等）导致下载 cursor 假死，重新下载产生冲突。
+
+解决措施：
+
+1. 进入Web 终端删除 `.cursor-server` 文件夹。
+   1. 点击 Devbox 网页列表项右边操作按钮里的“终端”。
+   2. 进入终端先进入用户目录，`cd ..`，然后通过 `ls -a ` 查看所有文件可以看到 `.cursor-server`。
+   3. 删除 `rm -rf .cursor-server`。
+   4. 重试连接即可。
+2. 如果是刚创建里面没有内容的话，可以直接删除该 Devbox 重建。
+
+## 4、报如下错误
+
+```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
+```
+
+首先明白一下你此时的环境是开发环境，你现在连接的网址是测试网址，只用于开发环境，这个网址对应的是开发环境的端口。也就是说你必须运行开发环境，例如
+`npm run dev` 让你的程序先运行起来，才能通过网址看到内容，否则就会报这个错误。