|
1 | 1 | # DGU AI Lab Frontend |
2 | 2 |
|
3 | | -A modern React application built with Vite, React 19, and Tailwind CSS. |
4 | | - |
5 | | -## Prerequisites |
6 | | - |
7 | | -- Node.js (version 16 or higher) |
8 | | -- npm or yarn |
9 | | - |
10 | | -## Environment Configuration |
11 | | - |
12 | | -This project uses environment files to configure API endpoints: |
13 | | - |
14 | | -- `.env.production` - Production settings (committed to git, used in Docker builds) |
15 | | -- `.env` - Local development settings (optional, not committed) |
16 | | - |
17 | | -The `.env.production` file contains: |
18 | | -```bash |
19 | | -VITE_API_BASE_URL=http://210.94.179.19:9796 |
20 | | -VITE_NODE_ENV=production |
21 | | -``` |
22 | | - |
23 | | -When building for production, Vite automatically loads `.env.production`. This file is included in Docker builds (not in `.dockerignore`) and environment variables are embedded into the built JavaScript files. |
24 | | - |
25 | | -For local development with different settings, create a `.env` file (ignored by git and Docker): |
26 | | -```bash |
27 | | -VITE_API_BASE_URL=http://localhost:8080 |
28 | | -VITE_NODE_ENV=development |
29 | | -``` |
30 | | - |
31 | | -## Development |
32 | | - |
33 | | -Install dependencies: |
34 | | -```bash |
35 | | -npm install |
36 | | -``` |
37 | | - |
38 | | -Start the development server: |
39 | | -```bash |
40 | | -npm run dev |
41 | | -``` |
42 | | - |
43 | | -The application will be available at `http://localhost:5173` |
44 | | - |
45 | | -## Build |
46 | | - |
47 | | -Create a production build: |
48 | | -```bash |
49 | | -npm run build |
50 | | -``` |
51 | | - |
52 | | -Preview the production build locally: |
53 | | -```bash |
54 | | -npm run preview |
55 | | -``` |
56 | | - |
57 | | -## Deployment |
58 | | - |
59 | | -### Automated Deployment (Recommended) |
60 | | - |
61 | | -Set up GitHub Actions for continuous deployment. Every push to `main` automatically builds and deploys your application. |
62 | | - |
63 | | -**Usage:** |
64 | | -```bash |
65 | | -git add . |
66 | | -git commit -m "Your changes" |
67 | | -git push origin main |
68 | | -``` |
69 | | - |
70 | | -GitHub Actions will automatically handle the build and deployment process. |
71 | | - |
72 | | -### Manual Kubernetes Deployment |
73 | | - |
74 | | -Quick manual deployment steps: |
75 | | -```bash |
76 | | -# 1. Build and push Docker image |
77 | | -docker build -t ailab-frontend:latest . |
78 | | -docker tag ailab-frontend:latest dguailab/ailab-frontend:latest |
79 | | -docker push dguailab/ailab-frontend:latest |
80 | | - |
81 | | -# 2. Deploy to Kubernetes |
82 | | -kubectl apply -f k8s/namespace.yaml |
83 | | -kubectl apply -f k8s/deployment.yaml |
84 | | -kubectl apply -f k8s/service.yaml |
85 | | -kubectl apply -f k8s/ingress.yaml |
86 | | - |
87 | | -# 3. Verify deployment |
88 | | -kubectl rollout status deployment/ailab-frontend -n ailab-frontend |
89 | | -``` |
90 | | - |
91 | | -Access the application at: `http://210.94.179.19:30081` |
92 | | - |
93 | | -### Plain Deployment |
94 | | - |
95 | | -For non-Kubernetes deployment, use Docker or serve the static build: |
96 | | - |
97 | | -**Using Docker:** |
98 | | -```bash |
99 | | -# Build Docker image |
100 | | -docker build -t ailab-frontend:latest . |
101 | | - |
102 | | -# Run container |
103 | | -docker run -d -p 80:80 ailab-frontend:latest |
104 | | -``` |
105 | | - |
106 | | -Access at: `http://localhost` |
107 | | - |
108 | | -**Using Static Server:** |
109 | | -```bash |
110 | | -# Build the application |
111 | | -npm run build |
112 | | - |
113 | | -# Serve with any static file server |
114 | | -npx serve -s dist -p 80 |
115 | | -``` |
116 | | - |
117 | | -Access at: `http://localhost` |
118 | | - |
119 | | -## Project Structure |
120 | | - |
121 | | -``` |
122 | | -├── k8s/ # Kubernetes manifests |
123 | | -├── public/ # Static assets |
124 | | -├── src/ |
125 | | -│ ├── components/ # React components |
126 | | -│ ├── pages/ # Page components |
127 | | -│ ├── App.jsx # Main app with routing |
128 | | -│ └── main.jsx # Entry point |
129 | | -└── vite.config.js # Vite configuration |
130 | | -``` |
| 3 | +React 19 + Vite + Tailwind frontend for DGU AI Lab. |
| 4 | + |
| 5 | +## Requirements |
| 6 | +- Node 16+ |
| 7 | +- npm |
| 8 | + |
| 9 | +## Environment |
| 10 | +- `.env.production` (committed, used in Docker/K8s): |
| 11 | + ```bash |
| 12 | + VITE_API_BASE_URL=http://210.94.179.19:9796 |
| 13 | + VITE_NODE_ENV=production |
| 14 | + ``` |
| 15 | +- `.env` (local override, git-ignored) example: |
| 16 | + ```bash |
| 17 | + VITE_API_BASE_URL=http://localhost:8080 |
| 18 | + VITE_NODE_ENV=development |
| 19 | + ``` |
| 20 | + |
| 21 | +## Commands |
| 22 | +- Install: `npm install` |
| 23 | +- Dev server: `npm run dev` → http://localhost:5173 |
| 24 | +- Build: `npm run build` |
| 25 | +- Preview build: `npm run preview` |
| 26 | + |
| 27 | +## Deploy |
| 28 | +- Docker: `docker build -t ailab-frontend:latest .` then `docker run -d -p 80:80 ailab-frontend:latest` |
| 29 | +- Kubernetes (manual): |
| 30 | + ```bash |
| 31 | + docker build -t ailab-frontend:latest . |
| 32 | + docker tag ailab-frontend:latest dguailab/ailab-frontend:latest |
| 33 | + docker push dguailab/ailab-frontend:latest |
| 34 | + kubectl apply -f k8s/namespace.yaml |
| 35 | + kubectl apply -f k8s/deployment.yaml |
| 36 | + kubectl apply -f k8s/service.yaml |
| 37 | + kubectl apply -f k8s/ingress.yaml |
| 38 | + kubectl rollout status deployment/ailab-frontend -n ailab-frontend |
| 39 | + ``` |
| 40 | + |
| 41 | +## Migrate to Another Kubernetes Cluster |
| 42 | +1) Switch context: `kubectl config use-context <new-cluster>`; ensure the NGINX ingress class or host matches the new setup (edit `k8s/ingress.yaml` as needed). |
| 43 | +2) Push the image to a registry the new cluster can pull from; update `k8s/deployment.yaml` `image:` (and add an `imagePullSecret` if the registry is private). |
| 44 | +3) Update env values (e.g., `VITE_API_BASE_URL`) to point at the backend reachable from the new cluster, rebuild, and push the image. |
| 45 | +4) Apply manifests: `kubectl apply -f k8s/namespace.yaml && kubectl apply -f k8s`. |
| 46 | +5) Verify: `kubectl rollout status deployment/ailab-frontend -n ailab-frontend` and check ingress/service reachability. |
0 commit comments