wip: production

README.md

@@ -33,7 +33,7 @@ This project consists of two parts :
 ### Using Docker, for development purposes
 
 You will need to have Docker and Docker Compose installed.
-Clone the repository, go to its root and run `docker-compose up -d`.
+Clone the repository, go to its root and run `docker-compose -f docker-compose.dev.yml up -d`.
 To use the backend directly, go to the page [http://localhost:8080/api/feed/](http://localhost:8080/api/feed/) and start adding parameters!
 
 ### For production

api/Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.11-alpine as backend
+FROM python:3.11-alpine as backend-requirements
 
 RUN apk update \
     && apk add --no-cache \
@@ -21,5 +21,11 @@ RUN poetry --version
 RUN /root/.local/bin/poetry install
 
 
-#CMD ["poetry", "run", "gunicorn", "--bind=0.0.0.0:8080", "--reload", "app:app"]
+FROM backend-requirements as backend-dev
 CMD ["poetry", "run", "flask", "--app", "api", "run", "--host=0.0.0.0", "--port=8080", "--debug"]
+
+FROM backend-requirements as final
+WORKDIR /app
+COPY . .
+# CMD ["ls", "-lah"]
+CMD ["poetry", "run", "gunicorn", "--bind=0.0.0.0:8080", "api:create_app()"]

docker-compose.dev.yml

@@ -0,0 +1,22 @@
+services:
+  api:
+    env_file:
+      - .env.dev
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+      target: backend-dev
+    ports:
+      - 8080:8080
+    volumes:
+      - ./api:/app
+
+  frontend:
+    env_file: 
+      - .env.dev
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      target: frontend-dev
+    ports:
+      - 5173:5173

docker-compose.yml

@@ -1,22 +1,22 @@
 services:
   api:
     env_file:
-      - .env.dev
+      - .env
     build:
       context: ./api
       dockerfile: Dockerfile
-    ports:
-      - 8080:8080
-    volumes:
-      - ./api:/app
+      target: final
 
   frontend:
     env_file: 
-      - .env.dev
+      - .env
     build:
       context: ./frontend
       dockerfile: Dockerfile
+      target: final
+      args:
+        - VITE_API_ENDPOINT=${VITE_API_ENDPOINT}
     ports:
       - 5173:5173
     volumes:
-      - ./frontend:/app
+      - ./frontend/nginx/nginx.conf:/etc/nginx/nginx.conf

frontend/Dockerfile

@@ -1,10 +1,27 @@
-FROM node:21-alpine as frontend
+FROM node:21-alpine as frontend-requirements
 
 RUN npm install -g pnpm 
 WORKDIR /app
 COPY package*.json ./
 RUN pnpm install
 
+
+FROM frontend-requirements as frontend-dev
 CMD ["pnpm", "run", "dev", "--host", "0.0.0.0"]
 
 
+FROM frontend-requirements as build
+
+ARG VITE_API_ENDPOINT
+ENV VITE_API_ENDPOINT=${VITE_API_ENDPOINT}}
+WORKDIR /app
+COPY . ./
+RUN pnpm run build
+
+FROM nginx:1.23 as final
+COPY --from=build /app/dist /app/dist
+
+ARG nginx_uid=33
+ARG nginx_gid=33
+
+RUN usermod -u ${nginx_uid} -o nginx && groupmod -g ${nginx_gid} -o nginx

frontend/nginx/nginx.conf

@@ -0,0 +1,42 @@
+error_log /var/log/nginx/error.log;
+
+
+events {
+        worker_connections 1024;
+}
+
+
+http {
+        include /etc/nginx/mime.types;
+        default_type application/octet-stream;
+
+        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                          '$status $body_bytes_sent "$http_referer" '
+                          '"$http_user_agent" "$http_x_forwarded_for"';
+        access_log  /var/log/nginx/access.log  main;
+
+        sendfile on;
+        keepalive_timeout 65;
+
+        upstream api {
+                server api:8080;
+        }
+
+        server {
+                listen 80;
+                server_name ${HOSTNAME};
+                root /app/dist;
+
+                add_header Referrer-Policy "strict-origin-when-cross-origin";
+
+                location / {
+                        try_files $uri $uri/ /index.html;
+                }
+        
+                location ^~ /api/ {
+                        proxy_pass http://api;
+                }
+        }
+
+        include /etc/nginx/conf.d/*.conf;
+}

frontend/src/components/__tests__/HelloWorld.spec.ts

@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

frontend/src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})