Set up Nginx Proxy and Run Next.js Application in Docker Environment

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

README.md

@@ -20,6 +20,30 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
+## Using Docker Compose for Development
+
+To simplify the setup and ensure consistency across different development environments, you can use Docker Compose to run the project. This method requires Docker and Docker Compose to be installed on your machine.
+
+1. Build the Docker images:
+
+```bash
+docker-compose build
+```
+
+2. Start the services:
+
+```bash
+docker-compose up -d
+```
+
+This will start the Next.js development server and any other services defined in your `docker-compose.yml`, such as Nginx or a database, making them accessible via `http://localhost:3002` or another port specified in your Docker Compose configuration.
+
+To stop the services, use:
+
+```bash
+docker-compose down
+```
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3'
+services:
+  hyperliquid-stats-web:
+    build: .
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: npm run dev
+    environment:
+      NEXT_PUBLIC_API_URL: /api
+      PORT: 80
+
+  web:
+    image: nginx:alpine
+    ports:
+      - "3002:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen 80;
+
+    location /api/ {
+        proxy_pass https://stats-api.hyperliquid.xyz/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_ssl_session_reuse off;
+        proxy_ssl_verify off;
+    }
+    location / {
+        proxy_pass http://hyperliquid-stats-web;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_ssl_session_reuse off;
+        proxy_ssl_verify off;
+    }
+}