doc: add devbox doc (labring#5210)

* add devbox doc

* add devbox zh doc

* add devbox en doc

* update FAQ

* run action

* update images

* add overview zh

* format

* add overview en

* fix sailos

* tmp

* test format

* format

* tmp

* update

* rm devbox

* fix overview

* fix faq

* refactor

* fix

* polish

* add use-jb-ide.md

* add item

* fix faq

* fix

* update en png

* update faq

* block jb-ide 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,74 @@
+# 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. Install Remote-SSH in the Cursor extension market. Note that the current version should be v0.113.x. (Note that this version must be installed in Cursor. If you download Remote-SSH from the webpage and then import it into Cursor, there is a high probability that the versions do not correspond and lead to incompatibility.)
+
+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)
+
+4. Install Remote-SSH v0.113.x in Cursor.
+
+![devbox-3](./images/faq-3.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.
+
+Another possible situation is that you just need to wait for a while, maybe the network is slow.
+
+## 5. Click the link Cursor and enter the cursor interface, and an error message "Failed to fetch" is reported
+
+Try to open Cursor's extension market. If the extension market cannot be loaded normally and the error `Error while fetching extensions.Failed to fetch` is reported, it is a network problem that cannot load Cursor's plug-in market. Please refer to the manual installation tutorial above to manually install the Devbox plug-in or try to change your network environment.
+
+## 6. The local localhost can open the project but the public network address cannot be opened
+
+The exposed address in the code must be changed from `localhost` to `0.0.0.0` due to network reasons.

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/docs/user-guide/devbox/use-jetbrains-ide.md

@@ -0,0 +1,50 @@
+# Develop with JetBrains IDE
+
+> This guide describes how to use IntelliJ IDEA in the JetBrains IDE to develop a Java-based Devbox.
+
+## Prerequisites
+
+1. Download the [JetBrains Gateway](https://www.jetbrains.com/remote-development/gateway/) application.
+
+2. Start a Devbox project.
+
+3. Download the private key of the Devbox project to your local computer. View the SSH configuration in the Devbox project detail (Username: devbox, Host: hzh.sealos.run, Port: 30566).
+
+![use-jb-ide-2](./images/use-jb-ide-2.png)
+
+## Get Started
+
+1. Open Devbox, select JetBrains IDE and click on it.
+
+![use-jb-ide-3](./images/use-jb-ide-3.png)
+
+2. Automatically invoke the local JetBrains Gateway and click `New Connection`.
+
+![use-jb-ide-4](./images/use-jb-ide-4.png)
+
+3. Open JetBrains Gateway, fill in Username, Host and Port, check Specify private key, and select the path to the private key. Click `Check Connection and Continue` to test the SSH connection.
+
+![use-jb-ide-5](./images/use-jb-ide-5.png)
+
+4. Select `IntelliJ IDEA 2024.3.1 Preview` for the IDE version and `/home/devbox/project` for the project path. Click Download IDE and Connect to download the IDE and connect.
+
+![use-jb-ide-6](./images/use-jb-ide-6.png)
+
+You need to wait for the IDE to download.
+
+![use-jb-ide-7](./images/use-jb-ide-7.png)
+
+5. Automatically invoke the local IntelliJ IDEA, select English as the language, open the project file, and click the green arrow to run the Java service.
+
+![use-jb-ide-8](./images/use-jb-ide-8.png)
+
+![use-jb-ide-9](./images/use-jb-ide-9.png)
+
+6. Open the detail of the Devbox project and click the public address to access the Java service.
+
+![use-jb-ide-10](./images/use-jb-ide-10.png)
+
+7. Successfully accessed the Java service.
+
+![use-jb-ide-11](./images/use-jb-ide-11.png)
+

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

@@ -0,0 +1,35 @@
+# Devbox
+
+## 简介
+
+> Sealos Devbox 是一个用于即时协作开发、无缝部署和严格环境隔离的平台，帮助你简化工作流程。
+
+Sealos DevBox是一个一站式平台，集成了在线开发、测试和生产环境。它允许你一键创建环境和设置数据库依赖，让开发者在本地使用自己喜欢的IDE工作，同时简化了设置流程，还能自动部署应用，简直是开发者的得力助手。
+
+![overview-1](./images/quick-start-1.png)
+
+### 主要特点和优势
+
+#### 即时协作环境
+
+Sealos Devbox 提供多种编程语言和框架的快速开发环境设置，支持团队立即开始协作，无论使用哪种技术栈。
+
+#### 云开发环境
+
+Sealos Devbox 提供统一云平台，消除了环境不一致的问题，让团队可以轻松共享代码、配置和测试数据，从而加速开发过程并提升效率。
+
+#### 无头开发经验
+
+Sealos Devbox 简化了开发流程，自动创建环境并与本地 IDE 无缝集成，为开发人员提供轻松的设置体验。
+
+#### 简化持续交付
+
+无需 Docker 或 Kubernetes 专业知识，Sealos Devbox 使团队能够轻松交付应用程序。开发人员只需指定版本，Sealos Devbox 负责处理构建和容器化等复杂任务。
+
+#### 严格环境隔离
+
+Sealos Devbox 提供隔离的开发环境，帮助团队避免依赖冲突。每个项目都可以拥有自己一致且可重现的工作空间，让开发人员可以专注于相关任务，而不必担心环境不一致。
+
+#### 灵活的网络访问
+
+Sealos Devbox 提供从内部网络和互联网访问应用程序的功能，并自动配置 TLS，确保安全和灵活的开发能力，让团队可以在全球任何地方工作。