feat: docker for frontend finished (#28)

docker-compose.yml

@@ -33,6 +33,25 @@ services:
     networks:
       - internal
 
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        EXPO_PUBLIC_API_URL: http://192.168.0.69:80/api
+    restart: always
+    ports:
+      - "8081:8081"
+    volumes:
+      - .:/frontend
+      - /frontend/node_modules
+    stdin_open: true
+    tty: true
+    depends_on:
+      - backend
+    networks:
+      - internal
+
 volumes:
   postgres_data:
 

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 8081
+
+ARG EXPO_PUBLIC_API_URL
+
+ENV EXPO_PUBLIC_API_URL $EXPO_PUBLIC_API_URL
+
+RUN npm install -g expo-cli
+
+CMD ["npx", "expo", "start", "-c"]

frontend/app/_layout.jsx

@@ -2,7 +2,7 @@ import { Stack, Slot } from 'expo-router'
 import '../global.css'
 import GlobalProvider from '../context/GlobalProvider'
 
-export const API_URL = 'http://192.168.0.69:5000/api'
+export const API_URL = process.env.EXPO_PUBLIC_API_URL || 'http://localhost:80/api'
 
 const RootLayout = () => {
 

frontend/package.json

@@ -9,7 +9,9 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "dotenv": "^16.4.7",
     "expo": "~52.0.23",
+    "expo-config": "^1.0.0",
     "expo-constants": "~17.0.3",
     "expo-linking": "~7.0.3",
     "expo-router": "~4.0.15",
@@ -20,8 +22,8 @@
     "react-native-reanimated": "^3.16.6",
     "react-native-safe-area-context": "^4.12.0",
     "react-native-screens": "~4.4.0",
-    "tailwindcss": "^3.4.17",
-    "react-native-web": "~0.19.13"
+    "react-native-web": "~0.19.13",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

nginx.conf

@@ -2,11 +2,15 @@ server {
     listen 80;
     server_name _;
 
-    location / {
+    location /api {
         proxy_pass http://backend:5000;
         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;
     }
+
+    location / {
+        proxy_pass http://frontend:8081;
+    }
 }