Merge pull request #128 from PlasmicZ/Plasmicz/Proxy

proxied the frontend through nginx

.github/workflows/build-push.yml

@@ -27,6 +27,6 @@ jobs:
       uses: docker/build-push-action@v2
       with:
         context: .
-        file: docker/Dockerfile
+        file: docker/Dockerfile.backend
         push: true
         tags: ghcr.io/thirdeye-dev/thirdeye:latest

backend/authentication/views.py

@@ -107,7 +107,7 @@ def retrieve(self, request, *args, **kwargs):
 
 def google_login(request):
     # for development
-    REPLACEMENT_DOMAIN = "localhost:3000"
+    REPLACEMENT_DOMAIN = "localhost"
 
     if settings.DEMO_INSTANCE:
         REPLACEMENT_DOMAIN = settings.API_DOMAIN
@@ -133,7 +133,7 @@ def google_login(request):
 
 def google_login(request):
     # for development
-    REPLACEMENT_DOMAIN = "localhost:3000"
+    REPLACEMENT_DOMAIN = "localhost"
 
     if settings.DEMO_INSTANCE:
         REPLACEMENT_DOMAIN = settings.API_DOMAIN
@@ -159,7 +159,7 @@ def google_login(request):
 
 def github_login(request):
     # for development
-    REPLACEMENT_DOMAIN = "localhost:3000"
+    REPLACEMENT_DOMAIN = "localhost"
 
     if settings.DEMO_INSTANCE:
         REPLACEMENT_DOMAIN = settings.FRONTEND_DOMAIN

backend/backend/settings.py

@@ -86,7 +86,7 @@
 ]
 
 APPEND_SLASH = False
-FRONTEND_URL = "http://localhost:3000/"
+FRONTEND_URL = "http://localhost/"
 
 EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
 EMAIL_HOST = "smtp.gmail.com"
@@ -172,7 +172,7 @@
 FRONTEND_URL = (
     FRONTEND_URL_MAIN
     if DEMO_INSTANCE
-    else os.environ.get("FRONTEND_URL", "http://localhost:3000/")
+    else os.environ.get("FRONTEND_URL", "http://localhost/")
 )
 
 # SECURITY WARNING: keep the secret key used in production secret!
@@ -309,7 +309,7 @@
     "VERSION": "0.0.1",
     "SERVE_INCLUDE_SCHEMA": False,
     "SERVERS": [
-        {"url": "http://localhost:3000/", "description": "Localhost API base URL"},
+        {"url": "http://localhost/", "description": "Localhost API base URL"},
     ],
 }
 

docker/Dockerfile.frontend

@@ -0,0 +1,20 @@
+# Stage 1: Build frontend
+FROM node:alpine AS frontend
+
+WORKDIR /usr/app
+
+RUN npm install --global pm2
+
+COPY frontend/package*.json ./
+
+RUN npm install --production --force
+
+COPY frontend/ ./
+
+RUN npm run build
+
+EXPOSE 3000
+
+USER node
+
+CMD [ "pm2-runtime", "npm", "--", "start" ]

docker/dev.demo.yml

@@ -7,7 +7,7 @@ services:
       - "8000"
     build:
       context: ..
-      dockerfile: docker/Dockerfile
+      dockerfile: docker/Dockerfile.backend
     entrypoint: docker/entrypoint/entrypoint.sh
     ports:
       - "8000:8000"

docker/docker-compose.yml

@@ -11,6 +11,35 @@ services:
       - ../postgres_data:/var/lib/postgresql/data
     env_file:
       - ./.env
+
+  frontend:
+    hostname: frontend
+    image: frontend_app_thirdeye
+    container_name: frontend_app_thirdeye
+    build:
+      context: ../
+      dockerfile: docker/Dockerfile.frontend
+    networks:
+      default:
+      internal:
+    volumes:
+      - ../:/app
+    env_file:
+      - ./.env
+    #ports:
+    #  - "3000:3000"
+
+  nginx:
+    hostname: nginx
+    image: nginx:alpine
+    container_name: nginx_app_thirdeye
+    networks:
+      default:
+      internal:
+    volumes:
+      - ./nginx/default.conf:/etc/nginx/nginx.conf
+    ports:
+      - "80:80"
 
   backend:
     container_name: backend_app_thirdeye
@@ -20,8 +49,8 @@ services:
     expose:
       - "8000"
     build:
-      context: ..
-      dockerfile: docker/Dockerfile
+      context: .
+      dockerfile: docker/Dockerfile.backend
     entrypoint: docker/entrypoint/entrypoint.sh
     depends_on:
       - postgres
@@ -34,8 +63,8 @@ services:
 
   celery:
     build:
-      context: ..
-      dockerfile: docker/Dockerfile
+      context: .
+      dockerfile: docker/Dockerfile.backend
     container_name: celery_thirdeye
     volumes:
       - ../:/app
@@ -51,8 +80,8 @@ services:
 
   celery_beat:
     build:
-      context: ..
-      dockerfile: docker/Dockerfile
+      context: .
+      dockerfile: docker/Dockerfile.backend
     volumes:
       - ../:/app
     networks:
@@ -83,8 +112,7 @@ services:
       internal:
     image: redis:alpine
 
-
 networks:
-    default:
-    internal:
-        internal: true
+  default:
+  internal:
+    internal: true

docker/nginx/default.conf

@@ -0,0 +1,37 @@
+worker_processes auto;          # auto-detect number of logical CPU cores
+
+events {
+    worker_connections 512;       # set the max number of simultaneous connections (per worker process)
+}
+http {
+  server {
+    listen 80 default_server;
+    server_name localhost;
+    server_tokens off;
+
+    gzip on;
+    gzip_proxied any;
+    gzip_comp_level 4;
+    gzip_types text/css application/javascript image/svg+xml;
+
+    location / {
+      proxy_pass http://frontend:3000;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection 'upgrade';
+      proxy_set_header Host $host;
+      proxy_cache_bypass $http_upgrade;
+    }
+
+    location /api {
+      rewrite ^/api/(.*)$ /$1 break;
+      proxy_pass http://backend:8000;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection 'upgrade';
+      proxy_set_header Host $host;
+      proxy_cache_bypass $http_upgrade;
+    }
+
+  }
+}

frontend/next.config.js

@@ -23,14 +23,6 @@ const nextConfig = {
       },
     ];
   },
-  async rewrites() {
-    return [
-      {
-        source: "/api/:slug*",
-        destination: `${backendUrl}/:slug*`,
-      },
-    ];
-  },
 };
 
 module.exports = removeImports(nextConfig);