add readme

This commit is contained in:
jacobHu 2025-04-30 16:43:03 +08:00
parent 349611baed
commit 1fd13a74ad

51
devbox/cli/readme.md Normal file
View File

@ -0,0 +1,51 @@
# DevBox Frontend Development Environment (with Nginx Reverse Proxy)
This document explains how to use the `devbox` script to set up a local development environment containing two frontend applications (Vue3 and Nuxt) with Nginx reverse proxy.
## Purpose
In standard development workflow, `pnpm run dev` launches two frontend applications simultaneously:
1. **Vue3 Application (freeleaps):** Listens on `http://localhost:5173` inside the container by default.
2. **Nuxt Application (nuxt-front):** Listens on `http://localhost:3001` inside the container with base URL set to `/home/`.
To access both applications through a **single port** from outside the container, we introduced Nginx as a reverse proxy.
## Nginx Configuration
Nginx runs inside the `devbox` container and routes requests to the correct internal frontend application based on the access path.
* **Configuration File Location:**
* During init_compile_env initialization, the script looks for `/home/devbox/freeleaps/frontend/devbox_nginx.conf`.
* If found, this file will be copied to `/etc/nginx/nginx.conf` inside the container.
* **Proxy Rules:**
* Requests to `http://<host machine address>:<Nginx port>/` will be proxied to `http://localhost:5173/` (Vue3 app) inside the container.
* Requests to `http://<host machine address>:<Nginx port>/home/` will be proxied to `http://localhost:3001/home/` (Nuxt app) inside the container.
## Port Configuration
You can configure relevant ports through `devbox` command parameters:
* **`--devbox-nginx-port <port number>`:**
* Specifies the port on the **host machine** for accessing the Nginx reverse proxy.
* **Default: `8888`**.
* This is the port you'll use to access frontend applications from your browser.
## Git Branch Selection
During environment initialization, you can specify which Git branch to check out:
* **Interactive Mode:**
When running `./devbox`, the script will prompt you to enter a branch name (defaults to `main`).
The script will attempt to check out the specified branch. If checkout fails (e.g., remote branch doesn't exist), it will fall back to the `main` branch.
## Accessing Applications
After successful environment startup, access the applications from your **host machine** browser:
* **Vue3 Application:** `http://localhost:<Nginx port>/` (e.g.: `http://localhost:8888/`)
* **Nuxt Application:** `http://localhost:<Nginx port>/home/` (e.g.: `http://localhost:8888/home/`)
Where `<Nginx port>` is the port specified via `--devbox-nginx-port`, defaulting to `8888`.