Implement docker image build for frontend

Makefile

@@ -0,0 +1,3 @@
+.PHONY: build
+build:
+	docker-compose build

backend/Makefile

@@ -1,18 +1,17 @@
 .PHONY: init-dev
-
-build:
-	docker build -t model_garden:latest .
-
 init-dev:
 	which virtualenv 1>/dev/null || pip install virtualenv
 	[ -d .venv ] || virtualenv --python=python3 .venv
 	. .venv/bin/activate && pip install -U -r requirements.txt -r test-requirements.txt
 
+.PHONY: lint
 lint:
 	flake8 .
 
+.PHONY: test
 test:
 	pytest -v --cov=model_garden --cov-report=term-missing --no-cov-on-fail tests
 
+.PHONY: cov
 cov:
 	pytest -v --cov=model_garden --cov-report=html --no-cov-on-fail tests && open htmlcov/index.html

backend/model_garden/settings.py

@@ -35,6 +35,8 @@
 
 CORS_ORIGIN_WHITELIST = [
   # frontend
+  "http://localhost",
+  "http://127.0.0.1",
   "http://localhost:4200",
   "http://127.0.0.1:4200",
 ]

backend/docker-compose.yml → docker-compose.yml

@@ -16,10 +16,10 @@ services:
       - postgres:/var/lib/postgresql/data
     ports:
       - 5444:5432
-  webserver:
+  backend:
     image: model_garden:latest
     build:
-      context: .
+      context: backend
     restart: always
     command: bash -c "./manage.py migrate && ./manage.py runserver 0.0.0.0:9000"
     environment:
@@ -31,4 +31,13 @@ services:
     ports:
       - 9000:9000
     volumes:
-      - .:/src:rw,cached
+      - ./backend:/src:rw,cached
+  frontend:
+    image: model_garden_frontend:latest
+    build:
+      context: frontend
+    restart: always
+    ports:
+      - 80:80
+    depends_on:
+      - backend

frontend/.dockerignore

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

frontend/.env

@@ -1,3 +1,3 @@
 PORT=4200
-BACKEND_HOST=localhost
-BACKEND_PORT=9000
+REACT_APP_BACKEND_HOST=localhost
+REACT_APP_BACKEND_PORT=9000

frontend/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:14.2.0 as builder
+
+RUN mkdir /src
+WORKDIR /src
+
+COPY ./package.json /src/
+COPY ./package-lock.json /src/
+COPY ./tsconfig.json /src/
+COPY ./.env /src/
+RUN npm install
+
+COPY ./public/ /src/public/
+COPY ./src/ /src/src/
+RUN npm run build
+
+FROM nginx:stable-alpine
+
+COPY --from=builder /src/build/ /usr/share/nginx/html
+COPY ./nginx-default.conf /etc/nginx/conf.d/default.conf
+CMD ["/bin/sh", "-c", "nginx -g 'daemon off;'"]

frontend/nginx-default.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        sub_filter_types *;
+        sub_filter_once off;
+        rewrite ^(${BASE_URL})(.*)$ /$2 break;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # redirect server error pages to the static page /50x.html
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

frontend/src/api/const.ts

@@ -0,0 +1 @@
+export const backendUrl = `${process.env.REACT_APP_BACKEND_HOST}:${process.env.REACT_APP_BACKEND_PORT}`;

frontend/src/api/index.ts

@@ -1,3 +1,4 @@
+export * from "./const"
 export * from "./labelingTask.api";
-export * from "./media.api";
 export * from "./main.api";
+export * from "./media.api";

frontend/src/api/labelingTask.api.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { LabelingTaskRequestData, LabelingTaskStatus } from "../models";
+import { backendUrl } from "./const";
 
 axios.defaults.headers = {
   "Content-Type": "application/json",
@@ -8,7 +9,7 @@ axios.defaults.headers = {
 export const getDatasetsRequest = async (bucketId: string) => {
   try {
     return await axios.get(
-      "http://localhost:9000/api/datasets/",
+      `http://${backendUrl}/api/datasets/`,
       {
         params: {
           bucket_id: bucketId,
@@ -27,7 +28,7 @@ export const getDatasetsRequest = async (bucketId: string) => {
 export const getLabelingToolUsersRequest = async () => {
   try {
     return await axios.get(
-      "http://localhost:9000/api/cvat-users/"
+      `http://${backendUrl}/api/cvat-users/`
     );
   } catch (error) {
     if (error && error.response) {
@@ -43,7 +44,7 @@ export const getUnsignedImagesCountRequest = async (
 ) => {
   try {
     return await axios.get(
-      `http://localhost:9000/api/media-assets/`,
+      `http://${backendUrl}/api/media-assets/`,
         {
           params: {
             dataset_id: datasetId,
@@ -65,7 +66,7 @@ export const createLabelingTaskRequest = async (
 ) => {
   try {
     return await axios.post(
-      "http://localhost:9000/api/cvat-tasks/",
+      `http://${backendUrl}/api/cvat-tasks/`,
       taskData
     );
   } catch (error) {
@@ -83,7 +84,7 @@ export const getLabelingTasksRequest = async (
 ): Promise<LabelingTaskStatus[]> => {
   try {
     let resp = await axios.get(
-      `http://localhost:9000/api/cvat-tasks/`,
+      `http://${backendUrl}/api/cvat-tasks/`,
       {
         params: {
           page: 1,

frontend/src/api/main.api.ts

@@ -1,9 +1,11 @@
 import axios from "axios";
+import { backendUrl } from "./const"
+
 
 export const getBucketsRequest = async () => {
   try {
     return await axios.get(
-      "http://localhost:9000/api/buckets/",
+      `http://${backendUrl}/api/buckets/`,
     );
   } catch (error) {
     if (error && error.response) {