diff --git a/docs/5.0/docs/user-guide/devbox/devbox.md b/docs/5.0/docs/user-guide/devbox/devbox.md new file mode 100644 index 00000000000..9410b058d26 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/5.0/docs/user-guide/devbox/faq.md b/docs/5.0/docs/user-guide/devbox/faq.md new file mode 100644 index 00000000000..54ed7d4840a --- /dev/null +++ b/docs/5.0/docs/user-guide/devbox/faq.md @@ -0,0 +1,70 @@ +# 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. + +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. \ No newline at end of file diff --git a/docs/5.0/docs/user-guide/devbox/images/faq-1.png b/docs/5.0/docs/user-guide/devbox/images/faq-1.png new file mode 100644 index 00000000000..a04895dd2df Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/faq-1.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/faq-2.png b/docs/5.0/docs/user-guide/devbox/images/faq-2.png new file mode 100644 index 00000000000..699e988dfd9 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/faq-2.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-1.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-1.png new file mode 100644 index 00000000000..af6f4698767 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-1.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-10.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-10.png new file mode 100644 index 00000000000..e390f1fdca9 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-10.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-2.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-2.png new file mode 100644 index 00000000000..7da4e09c31d Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-2.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-3.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-3.png new file mode 100644 index 00000000000..c0fdb9554e9 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-3.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-4.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-4.png new file mode 100644 index 00000000000..ab7e99b8095 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-4.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-5.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-5.png new file mode 100644 index 00000000000..da15be428b6 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-5.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-6.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-6.png new file mode 100644 index 00000000000..15847a6d53b Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-6.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-7.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-7.png new file mode 100644 index 00000000000..c7860131e6d Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-7.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-8.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-8.png new file mode 100644 index 00000000000..a58ebd3fc76 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-8.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/quick-start-9.png b/docs/5.0/docs/user-guide/devbox/images/quick-start-9.png new file mode 100644 index 00000000000..d26bcb08445 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/quick-start-9.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-1.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-1.png new file mode 100644 index 00000000000..a2b8ad66059 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-1.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-10.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-10.png new file mode 100644 index 00000000000..d6724dd2908 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-10.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-11.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-11.png new file mode 100644 index 00000000000..1b6d1c13e69 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-11.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-2.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-2.png new file mode 100644 index 00000000000..ced2f197b1e Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-2.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-3.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-3.png new file mode 100644 index 00000000000..9c6df1e7da2 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-3.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-4.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-4.png new file mode 100644 index 00000000000..9cbc4361c4d Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-4.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-5.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-5.png new file mode 100644 index 00000000000..06aa6e9d866 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-5.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-6.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-6.png new file mode 100644 index 00000000000..adee170669f Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-6.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-7.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-7.png new file mode 100644 index 00000000000..2e7cd1052c2 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-7.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-8.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-8.png new file mode 100644 index 00000000000..6a4e0077e6b Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-8.png differ diff --git a/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-9.png b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-9.png new file mode 100644 index 00000000000..9ef04d95261 Binary files /dev/null and b/docs/5.0/docs/user-guide/devbox/images/use-jb-ide-9.png differ diff --git a/docs/5.0/docs/user-guide/devbox/quick-start.md b/docs/5.0/docs/user-guide/devbox/quick-start.md new file mode 100644 index 00000000000..106d1c53033 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/5.0/docs/user-guide/devbox/use-jetbrains-ide.md b/docs/5.0/docs/user-guide/devbox/use-jetbrains-ide.md new file mode 100644 index 00000000000..340b9f35cdd --- /dev/null +++ b/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) + diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/devbox.md b/docs/5.0/i18n/zh-Hans/user-guide/devbox/devbox.md new file mode 100644 index 00000000000..d4746167a67 --- /dev/null +++ b/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，确保安全和灵活的开发能力，让团队可以在全球任何地方工作。 diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md b/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md new file mode 100644 index 00000000000..e07ca29eb11 --- /dev/null +++ b/docs/5.0/i18n/zh-Hans/user-guide/devbox/faq.md @@ -0,0 +1,70 @@ +# 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` 让你的程序先运行起来，才能通过网址看到内容，否则就会报这个错误。 + +另一种可能的情况是等待一段时间就可以了，可能网络比较卡顿。 + +## 5、点击链接 Cursor，进入 cursor 界面报错 “Failed to fetch” + +尝试打开 Cursor 的扩展市场，如果扩展市场无法正常加载，报错 `Error while fetching extensions.Failed to fetch`，则是网络问题无法加载 Cursor 的插件市场。请参考上面的手动安装教程手动安装 Devbox 插件或者尝试更换您的网络环境。 + +## 6、本地 localhost 能打开项目但是公网地址打不开 + +代码里暴露地址由于网络原因必须从 `localhost` 改为 `0.0.0.0`。 \ No newline at end of file diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-1.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-1.png new file mode 100644 index 00000000000..a04895dd2df Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-1.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-2.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-2.png new file mode 100644 index 00000000000..699e988dfd9 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/faq-2.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-1.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-1.png new file mode 100644 index 00000000000..b270802c709 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-1.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-10.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-10.png new file mode 100644 index 00000000000..48d338f8538 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-10.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-2.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-2.png new file mode 100644 index 00000000000..a9a50a7fb45 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-2.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-3.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-3.png new file mode 100644 index 00000000000..9b1a2b930b5 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-3.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-4.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-4.png new file mode 100644 index 00000000000..ab7e99b8095 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-4.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-5.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-5.png new file mode 100644 index 00000000000..83fb9f9d353 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-5.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-6.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-6.png new file mode 100644 index 00000000000..15847a6d53b Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-6.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-7.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-7.png new file mode 100644 index 00000000000..a06126fbabd Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-7.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-8.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-8.png new file mode 100644 index 00000000000..4b669720936 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-8.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-9.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-9.png new file mode 100644 index 00000000000..91dddc32141 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/quick-start-9.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-1.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-1.png new file mode 100644 index 00000000000..a2b8ad66059 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-1.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-10.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-10.png new file mode 100644 index 00000000000..ec718d9dadc Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-10.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-11.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-11.png new file mode 100644 index 00000000000..1b6d1c13e69 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-11.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-2.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-2.png new file mode 100644 index 00000000000..d4a43cde1a9 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-2.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-3.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-3.png new file mode 100644 index 00000000000..71c14cc5ff9 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-3.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-4.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-4.png new file mode 100644 index 00000000000..9cbc4361c4d Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-4.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-5.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-5.png new file mode 100644 index 00000000000..06aa6e9d866 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-5.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-6.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-6.png new file mode 100644 index 00000000000..adee170669f Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-6.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-7.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-7.png new file mode 100644 index 00000000000..2e7cd1052c2 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-7.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-8.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-8.png new file mode 100644 index 00000000000..6a4e0077e6b Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-8.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-9.png b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-9.png new file mode 100644 index 00000000000..9ef04d95261 Binary files /dev/null and b/docs/5.0/i18n/zh-Hans/user-guide/devbox/images/use-jb-ide-9.png differ diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/quick-start.md b/docs/5.0/i18n/zh-Hans/user-guide/devbox/quick-start.md new file mode 100644 index 00000000000..61dd38cdb32 --- /dev/null +++ b/docs/5.0/i18n/zh-Hans/user-guide/devbox/quick-start.md @@ -0,0 +1,140 @@ +# 快速开始 + +> 本指南介绍如何使用 Sealos Devbox 创建、开发和部署 Next.js 应用。内容涵盖项目设置、使用 Cursor IDE 进行远程开发以及云端部署。 + +## 创建 Devbox 项目 + +1. 点击 Sealos 桌面的 Devbox，然后点击新建项目按钮，创建一个新项目。 + +2. 在运行环境部分，选择 Next.js 作为开发框架。然后设置项目的CPU和内存。 + +![quick-start-1](./images/quick-start-1.png) + +3. 设置网络配置： + +- 容器暴露端口设置为 3000，这是 Next.js 开发环境的默认端口。（如果需要额外的端口，请点击添加端口） +- 开启公网访问，这会自动生成一个随机的公网域名。（如果想使用自定义域名，请点击自定义域名） + +> 请确保容器暴露端口与 Next.js 应用配置的端口一致。如果你修改了 Next.js 配置中的端口，记得在此处同步更新。 + +![quick-start-2](./images/quick-start-2.png) + +4. 点击右上角的创建来创建项目。 + +## 连接 Cursor IDE + +创建项目后，你可以在 Devbox 项目列表中找到它。每个项目都有一个操作列，可以在操作列的下拉框中切换不同的 IDE。 + +![quick-start-3](./images/quick-start-3.png) + +1. 启动本地 Cursor IDE： + +- 选择操作列的下拉框中的 Cursor 来启动本地 Cursor IDE。 + +2. 本地 Cursor IDE 连接 Devbox： + +- Cursor IDE 会弹出窗口提示你安装 Devbox 插件，安装后即可通过 SSH 与 Devbox 连接。 + +> 你可以随时切换不同的 IDE（VSCode、VSCode Insiders、Cursor 或 Windsurf）。 + +## 开发 + +1. 本地 Cursor IDE 成功连接 Devbox 后，你就可以在 Cursor IDE 中直接编辑项目文件。 + +![quick-start-4](./images/quick-start-4.png) + +> 通过远程连接，你可以在 Devbox 运行时运行代码，确保开发与生产环境一致，并在任何地方、任何安装了 Cursor 的设备上访问项目，方便团队协作。 + +2. 调试 Next.js 应用： + +- 打开 Cursor IDE 终端。 +- 导航到项目目录。 +- 运行以下命令以开发模式启动 Next.js 服务： + +```bash +npm run dev +``` + +3. 访问正在运行的应用： + +- 打开 Sealos 桌面的 Devbox。 +- 找到你的项目并点击详情按钮。 +- 点击外网地址。 + +![quick-start-5](./images/quick-start-5.png) + +4. 成功打开你的 Next.js 应用。 + +![quick-start-6](./images/quick-start-6.png) + +## 发布 + +开发并测试 Next.js 应用后，你可以将其打包为 OCI 镜像（即容器镜像），这样可以方便地进行版本控制并准备部署。 + +1. 在 Cursor IDE 终端中，导航到项目目录并运行构建命令： + +```bash +npm run build +``` + +此命令在 `.next` 目录中生成可用于生产的 Next.js 应用版本。 + +2. 转到项目详情页面： + +- 打开 Sealos 桌面的 Devbox。 +- 找到你的项目并点击详情按钮。 + +3. 在详情页面，找到“版本历史”部分。 + +4. 点击“版本历史”右上角的“发布版本”按钮。 + +5. 在弹出的“发布版本”对话框中，提供以下信息： + +- 镜像名：预填为项目名。 +- 版本号：输入版本号（如：v1.0）。 +- 版本描述：简要描述版本内容（如：“初始版本”或“修复登录问题”）。 + +![quick-start-7](./images/quick-start-7.png) + +6. 填写完毕后，点击“发版”按钮。 + +7. 系统会处理发布，完成后，你会在“版本历史”中看到新版本的记录，包括版本号、状态、创建时间和描述。 + +![quick-start-8](./images/quick-start-8.png) + +通过这些步骤，你已成功创建 Next.js 应用的 OCI 镜像。此镜像可以用于部署或与团队共享，每次发布都会创建一个代码快照，方便版本管理和回滚。 + +> 每当有重大更改或里程碑时，记得发布新版本。这能帮助保持开发历史清晰，并使部署和协作更加顺畅。 + +## 部署 + +将 Next.js 应用发布为 OCI 镜像后，你可以将其部署到 Sealos Cloud 以供生产使用。操作步骤如下： + +1. 在项目详情页面中，找到“版本历史”部分。 + +2. 找到需要部署的版本，点击“操作”栏中的“上线”按钮。 + +3. 系统会将你重定向到 Sealos 的应用管理界面。 + +4. 在应用管理中，按照部署向导配置应用设置。通常包括： + +- 设置应用名称 +- 设置资源限制（CPU和内存） +- 设置环境变量 +- 设置卷或持久存储 + +![quick-start-9](./images/quick-start-9.png) + +5. 配置完毕后，点击右上角的“部署应用”按钮开始部署。 + +6. 部署完成后，进入应用详情页面。 + +7. 当状态变为“running”时，点击“公网地址”，即可在新标签页中打开你的 Next.js 应用。 + +![quick-start-10](./images/quick-start-10.png) + +通过这些步骤，你已成功将 Next.js 应用部署到 Sealos Cloud。现在，用户可以通过公网地址访问应用。 + +> 你可以随时通过 Devbox 创建新版本，并重复此过程更新应用。 + +此工作流程使你能够在云环境中开发和调试 Next.js 应用，同时使用本地 IDE。外部地址使你可以轻松地与团队或客户共享应用，任何地方都能访问。 \ No newline at end of file diff --git a/docs/5.0/i18n/zh-Hans/user-guide/devbox/use-jetbrains-ide.md b/docs/5.0/i18n/zh-Hans/user-guide/devbox/use-jetbrains-ide.md new file mode 100644 index 00000000000..1a9f8fd2765 --- /dev/null +++ b/docs/5.0/i18n/zh-Hans/user-guide/devbox/use-jetbrains-ide.md @@ -0,0 +1,50 @@ +# 使用 JetBrains IDE 开发 + +> 本指南介绍如何使用 JetBrains IDE 中的 IntelliJ IDEA 来开发基础环境为 Java 的 Devbox。 + +## 前置准备 + +1. 需要提前下载好 [JetBrains Gateway](https://www.jetbrains.com/remote-development/gateway/) 应用。 + +2. 启动一个 Devbox 项目。 + +3. 下载 Devbox 项目的私钥到本地。查看 Devbox 项目详情中的 SSH 配置（Username：devbox，Host：hzh.sealos.run，Port：30566）。 + +![use-jb-ide-2](./images/use-jb-ide-2.png) + +## 开始使用 + +1. 打开 Devbox，选择 JetBrains IDE 并点击。 + +![use-jb-ide-3](./images/use-jb-ide-3.png) + +2. 自动唤起本地的 JetBrains Gateway，点击 `New Connection`。 + +![use-jb-ide-4](./images/use-jb-ide-4.png) + +3. 打开 JetBrains Gateway，填写 Username、Host 和 Port，勾选 Specify private key，选择私钥的所在路径。点击 `Check Connection and Continue`，即可测试 SSH 连接。 + +![use-jb-ide-5](./images/use-jb-ide-5.png) + +4. IDE 版本选择 `IntelliJ IDEA 2024.3.1 Preview`（因为 Devbox 的运行环境是 Java，所以选择 IDEA，根据具体的语言选择不同 IDE），项目路径选择 `/home/devbox/project`。点击 Download IDE and Connect，即可下载 IDE 和连接。 + +![use-jb-ide-6](./images/use-jb-ide-6.png) + +需要等待 IDE 下载完毕。 + +![use-jb-ide-7](./images/use-jb-ide-7.png) + +5. 自动唤起本地的 IntelliJ IDEA，语言选择 Chinese 简体中文，打开项目文件，点击绿箭头来运行 Java 服务。 + +![use-jb-ide-8](./images/use-jb-ide-8.png) + +![use-jb-ide-9](./images/use-jb-ide-9.png) + +6. 打开 Devbox 项目的详情，点击公网地址，即可跳转访问 Java 服务。 + +![use-jb-ide-10](./images/use-jb-ide-10.png) + +7. 成功访问 Java 服务。 + +![use-jb-ide-11](./images/use-jb-ide-11.png) + diff --git a/docs/5.0/sidebar.json b/docs/5.0/sidebar.json index 12768635160..aaf1c65a38b 100644 --- a/docs/5.0/sidebar.json +++ b/docs/5.0/sidebar.json @@ -78,7 +78,20 @@ "user-guide/objectstorage/objectstorage", "user-guide/cronjob/cronjob", "user-guide/terminal/terminal", - "user-guide/kubepanel/kubepanel" + "user-guide/kubepanel/kubepanel", + { + "type": "category", + "label": "Devbox", + "link": { + "type": "doc", + "id": "user-guide/devbox/devbox" + }, + "items": [ + "user-guide/devbox/quick-start", + "user-guide/devbox/use-jetbrains-ide", + "user-guide/devbox/faq" + ] + } ] }, {