From 9f296691f703a9ebf165b00179d8c87236833f79 Mon Sep 17 00:00:00 2001 From: skudriashev Date: Thu, 7 May 2020 14:50:29 -0700 Subject: [PATCH] Implement docker image build for frontend --- Makefile | 3 +++ backend/Makefile | 7 +++---- backend/model_garden/settings.py | 2 ++ .../docker-compose.yml => docker-compose.yml | 15 +++++++++++--- frontend/.dockerignore | 1 + frontend/.env | 4 ++-- frontend/Dockerfile | 20 +++++++++++++++++++ frontend/nginx-default.conf | 19 ++++++++++++++++++ frontend/src/api/const.ts | 1 + frontend/src/api/index.ts | 3 ++- frontend/src/api/labelingTask.api.ts | 11 +++++----- frontend/src/api/main.api.ts | 4 +++- 12 files changed, 74 insertions(+), 16 deletions(-) create mode 100644 Makefile rename backend/docker-compose.yml => docker-compose.yml (74%) create mode 100644 frontend/.dockerignore create mode 100644 frontend/Dockerfile create mode 100644 frontend/nginx-default.conf create mode 100644 frontend/src/api/const.ts diff --git a/Makefile b/Makefile new file mode 100644 index 00000000..ae43885d --- /dev/null +++ b/Makefile @@ -0,0 +1,3 @@ +.PHONY: build +build: + docker-compose build diff --git a/backend/Makefile b/backend/Makefile index 24d32e1a..029a421a 100644 --- a/backend/Makefile +++ b/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 diff --git a/backend/model_garden/settings.py b/backend/model_garden/settings.py index 07b94979..f36c6f18 100644 --- a/backend/model_garden/settings.py +++ b/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", ] diff --git a/backend/docker-compose.yml b/docker-compose.yml similarity index 74% rename from backend/docker-compose.yml rename to docker-compose.yml index 6648445e..3de42ef5 100644 --- a/backend/docker-compose.yml +++ b/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 diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1 @@ +node_modules diff --git a/frontend/.env b/frontend/.env index c009faaf..45329a7c 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1,3 +1,3 @@ PORT=4200 -BACKEND_HOST=localhost -BACKEND_PORT=9000 \ No newline at end of file +REACT_APP_BACKEND_HOST=localhost +REACT_APP_BACKEND_PORT=9000 diff --git a/frontend/Dockerfile b/frontend/Dockerfile new file mode 100644 index 00000000..91e3f123 --- /dev/null +++ b/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;'"] diff --git a/frontend/nginx-default.conf b/frontend/nginx-default.conf new file mode 100644 index 00000000..4047bf73 --- /dev/null +++ b/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; + } +} diff --git a/frontend/src/api/const.ts b/frontend/src/api/const.ts new file mode 100644 index 00000000..fc55e43f --- /dev/null +++ b/frontend/src/api/const.ts @@ -0,0 +1 @@ +export const backendUrl = `${process.env.REACT_APP_BACKEND_HOST}:${process.env.REACT_APP_BACKEND_PORT}`; diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts index 56de7a0b..ebab5bb4 100644 --- a/frontend/src/api/index.ts +++ b/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"; diff --git a/frontend/src/api/labelingTask.api.ts b/frontend/src/api/labelingTask.api.ts index 0f1ad963..007afd56 100644 --- a/frontend/src/api/labelingTask.api.ts +++ b/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 => { try { let resp = await axios.get( - `http://localhost:9000/api/cvat-tasks/`, + `http://${backendUrl}/api/cvat-tasks/`, { params: { page: 1, diff --git a/frontend/src/api/main.api.ts b/frontend/src/api/main.api.ts index f7de4a7f..e7175b4a 100644 --- a/frontend/src/api/main.api.ts +++ b/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) {