docker: Implement dockerfiles and dockerize all the modules.

.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose
+{
+	"name": "Existing Docker Compose (Extend)",
+
+	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
+	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
+	"dockerComposeFile": [
+		"../docker-compose.yml",
+		"docker-compose.yml"
+	],
+
+	// The 'service' property is the name of the service for the container that VS Code should
+	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
+	"service": "redis",
+
+	// The optional 'workspaceFolder' property is the path VS Code should open by default when
+	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
+	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+	"features": {
+		"ghcr.io/devcontainers/features/python:1": {}
+	}
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Uncomment the next line if you want start specific services in your Docker Compose config.
+	// "runServices": [],
+
+	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
+	// "shutdownAction": "none",
+
+	// Uncomment the next line to run commands after the container is created.
+	// "postCreateCommand": "cat /etc/os-release",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "devcontainer"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3.7'
+services:
+  # Update this to the name of the service you want to work with in your docker-compose.yml file
+  redis:
+    # Uncomment if you want to override the service's Dockerfile to one in the .devcontainer 
+    # folder. Note that the path of the Dockerfile and context is relative to the *primary* 
+    # docker-compose.yml file (the first in the devcontainer.json "dockerComposeFile"
+    # array). The sample below assumes your primary file is in the root of your project.
+    #
+    # build:
+    #   context: .
+    #   dockerfile: .devcontainer/Dockerfile
+
+    volumes:
+      # Update this to wherever you want VS Code to mount the folder of your project
+      - ..:/workspaces:cached
+
+    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
+    # cap_add:
+    #   - SYS_PTRACE
+    # security_opt:
+    #   - seccomp:unconfined
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

client/.dockerignore

@@ -0,0 +1 @@
+node_modules

client/.env

@@ -0,0 +1 @@
+VITE_API_SERVER="http://localhost:8000"

client/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine AS build
+
+WORKDIR /app
+
+ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json package-lock.json ./
+RUN npm install
+COPY . ./
+RUN npm run build
+
+
+FROM nginx:1.21.5-alpine AS release
+COPY --from=build /app/dist /usr/share/nginx/html/
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

client/src/App.tsx

@@ -4,7 +4,8 @@ import './index.css'
 import FrontPage from './pages/FrontPage'
 import ResultPage from './pages/ResultPage'
 import LoadingPage from './pages/LoadingPage'
-import { useRequest } from './hooks/useRequest'
+import { API_SERVER } from './config/config'
+
 function App() {
   const [file, setFile] = useState<File | null>(null)
   const [loading, setLoading] = useState(false)
@@ -16,7 +17,7 @@ function App() {
     const newBody = new FormData()
       newBody.append("file", file as File)
       setLoading(true);
-      fetch('http://localhost:8000/tasks', {method: 'POST', body: newBody}).then((res) => {
+      fetch(`${API_SERVER}/tasks`, {method: 'POST', body: newBody}).then((res) => {
         if (res.ok) {
           setLoading(false)
           res.json().then((data) => {
@@ -38,7 +39,7 @@ function App() {
   }
 
   return (
-    <FileContext.Provider value={{file, setFile}}>
+    <FileContext.Provider value={{file, setFile, taskId: null}}>
       <FrontPage />
     </FileContext.Provider>
 

client/src/config/config.ts

@@ -0,0 +1 @@
+export const API_SERVER = process.env.API_SERVER ?? "http://localhost:8000";

client/src/modals/UploadDocumentModal.tsx

@@ -25,7 +25,7 @@ export default function UploadDocumentModal({
       ) {
         const reader = new FileReader();
         reader.onload = (e) => {
-          const data = new Uint8Array(e.target.result);
+          const data = new Uint8Array(e.target?.result as ArrayBuffer);
           const workbook = xlsx.parse(data);
           const workbookData = workbook[0].data.slice(0, 5);
           setTableData(workbookData);

client/src/pages/FrontPage.tsx

@@ -24,7 +24,7 @@ export default function FrontPage() {
       />
 
       <UploadDocumentModal
-        onFileSelected={(file) => {setFile(file)}}
+        onFileSelected={(file) => {setFile(file as File)}}
         visible={documentModalIsVisible}
         setVisible={setDocumentModalIsVisible}
       />

client/src/pages/ResultPage.tsx

@@ -4,6 +4,7 @@ import ArrowDownTray from "../icons/ArrowDownTray";
 import useFileContext from "../contexts/FileContext";
 import xlsx from 'node-xlsx'
 import LoadingPage from "./LoadingPage";
+import { API_SERVER } from "../config/config";
 
 export default function ResultPage() {
 
@@ -17,7 +18,7 @@ export default function ResultPage() {
     if (!taskId) {
       return;
     }
-    const fetchStatus = () => fetch(`http://localhost:8000/tasks/${taskId}/status`)
+    const fetchStatus = () => fetch(`${API_SERVER}/tasks/${taskId}/status`)
       .then((res) => {
         if (res.ok) {
           res.json().then((data) => {
@@ -49,7 +50,7 @@ export default function ResultPage() {
     if (!dataLoaded) {
       return;
     }
-    fetch(`http://localhost:8000/tasks/${taskId}/result`)
+    fetch(`${API_SERVER}/tasks/${taskId}/result`)
       .then((res) => {
         if (res.ok) {
           res.blob().then((data) => {
@@ -68,7 +69,7 @@ export default function ResultPage() {
 
             const reader = new FileReader();
             reader.onload = (e) => {
-              const data = new Uint8Array(e.target.result);
+              const data = new Uint8Array(e.target?.result as ArrayBuffer);
               const workbook = xlsx.parse(data);
               const workbookData = workbook[0].data.slice(1, 50);
               setData(workbookData);

client/vite.config.ts

@@ -1,7 +1,14 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    define: {
+      'process.env.API_SERVER': JSON.stringify(env.VITE_API_SERVER),
+      'process.env.NODE_ENV': JSON.stringify(mode)
+    },
   plugins: [react()],
-})
+}})

docker-compose.yml

@@ -0,0 +1,32 @@
+services:
+  redis:
+    image: redis
+    ports:
+      - "6379:6379"
+
+  app:
+    container_name: app
+    build: ./server
+    restart: always
+    ports:
+      - "8000:8000"
+    depends_on:
+      - redis
+
+  client:
+    container_name: client
+    build: ./client
+    restart: always
+    ports:
+      - "80:80"
+    depends_on:
+      - app
+    environment:
+      - API_SERVER=app:8000
+
+  celery_worker:
+    container_name: celery_worker
+    build: ./tasks
+    depends_on:
+      - redis
+

server/Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.12-slim-bullseye AS builder
+
+RUN pip install poetry==1.8.3
+
+ENV POETRY_NO_INTERACTION=1 \
+    POETRY_VIRTUALENVS_IN_PROJECT=1 \
+    POETRY_VIRTUALENVS_CREATE=1 \
+    POETRY_CACHE_DIR=/tmp/poetry_cache
+
+WORKDIR /app
+
+COPY pyproject.toml poetry.lock ./
+RUN touch README.md
+
+RUN --mount=type=cache,target=$POETRY_CACHE_DIR poetry install --no-root
+
+FROM python:3.12-slim-bullseye as runtime
+
+ENV VIRTUAL_ENV=/app/.venv \
+    PATH="/app/.venv/bin:$PATH"
+
+COPY --from=builder ${VIRTUAL_ENV} ${VIRTUAL_ENV}
+
+RUN pip install fastapi[standard] uvicorn
+
+COPY . ./app
+
+WORKDIR /app
+CMD ["fastapi", "run", "app.py"]

server/README.md

@@ -0,0 +1,2 @@
+# Server package for Publication Manager Software
+

server/app.py

@@ -1,11 +1,18 @@
+import time
 
-
-from fastapi import FastAPI, UploadFile
+from fastapi import FastAPI, Response, UploadFile
 from fastapi.responses import FileResponse
 from fastapi.middleware.cors import CORSMiddleware
 from celery import Celery
 
-celery = Celery(__name__, broker="redis://localhost:6379/0", backend="redis://localhost:6379/0")
+from supabase import create_client
+
+
+celery = Celery(__name__, broker="redis://redis:6379/0", backend="redis://redis:6379/0")
+celery.conf.broker_connection_retry_on_startup = True
+
+sp_client = create_client("https://xchmpfivomtlnslvbbbk.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaG1wZml2b210bG5zbHZiYmJrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQ2MDI4MDYsImV4cCI6MjA0MDE3ODgwNn0.HBs-xlJW21awsjyS5mje25g3Wu5M_TGFc2T7Q6urXLw")
+sp_client.auth.sign_in_with_password({"email": "[email protected]", "password": "123456"})
 
 app = FastAPI()
 
@@ -25,11 +32,13 @@
 
 @app.post("/tasks")
 def run_task(file: UploadFile):
+    cur_time = int(time.time())
     # download file
-    filename = "temp/files/" + file.filename
-    with open(filename, "wb") as buffer:
-        buffer.write(file.file.read())
-    task = celery.send_task("background_task.main.process_excel", args=[filename])
+    in_filename = f"input-{cur_time}.xlsx"
+    sp_client.storage.from_("excel-storage") \
+        .upload(in_filename, file.file.read())
+
+    task = celery.send_task("main.process_excel", args=[in_filename])
     return {"task_id": task.id}
 
 @app.get("/tasks/{task_id}/status")
@@ -40,8 +49,12 @@ def task_status(task_id: str):
 @app.get("/tasks/{task_id}/result")
 def task_result(task_id: str):
     task = celery.AsyncResult(task_id)
+    out_file = task.result
+    file = sp_client.storage.from_("excel-storage") \
+        .download(out_file)
+
     # upload file
-    return FileResponse(task.result, media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", filename="output.xlsx")
+    return Response(file, media_type="application/octet-stream", headers={"Content-Disposition": f"attachment; filename={out_file}"})
 
 
 if __name__ == "__main__":