Merge pull request #111 from LuCEresearchlab/deployment-fixes

malags · web-flow · commit b47afa0b52cf · 2021-05-07T20:44:54.000+02:00
Deployment fixes
diff --git a/README.md b/README.md
@@ -14,16 +14,21 @@ this will allow for a more scalable tagging experience.
 - mongodb: Dockerfile for MongoDB server
 - tagging service: Python Flask server
 
-
 ## Usage
+
 The application is entirely dockerized and as such can be run as long as Docker is installed, to run it:
+
 ```
 cd python-react-tagging-standalone
 docker-compose up -d                               # development
 docker-compose -f docker-compose-deploy.yml up -d  # deployment
 ```
+
 then connect to http://localhost:8080/
 
+In the case of deploying the application it is required to set
+`TAGGING_SERVICE_URL=<host-url>:5000` inside the file `frontend/.env.prod`.
+
 To stop the containers
 
 ```
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
@@ -1 +1,3 @@
 **/node_modules
+build
+logs
diff --git a/frontend/.env b/frontend/.env
@@ -1,2 +1 @@
 NODE_PATH=./
-TAGGING_SERVICE_URL=http://localhost:5000
diff --git a/frontend/.env.prod b/frontend/.env.prod
@@ -0,0 +1 @@
+TAGGING_SERVICE_URL=http://192.168.1.169:5000
diff --git a/frontend/Dockerfile-deploy b/frontend/Dockerfile-deploy
@@ -1,4 +1,4 @@
-FROM node:15.14.0-alpine3.10
+FROM node:15.14.0-alpine3.10 as build
 
 EXPOSE 8080
 
@@ -10,4 +10,19 @@ RUN npm ci
 
 RUN npm run build
 
-CMD ["node", "server.js"]
+FROM nginx:alpine
+
+# copy the build folder from react to the root of nginx (www)
+COPY --from=build /app/build /usr/share/nginx/html
+
+# --------- only for those using react router ----------
+# if you are using react router
+# you need to overwrite the default nginx configurations
+# remove default nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+# replace with custom one
+COPY nginx/nginx.conf /etc/nginx/conf.d
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/config.json b/frontend/config.json
diff --git a/frontend/nginx/nginx.conf b/frontend/nginx/nginx.conf
@@ -0,0 +1,17 @@
+server {
+
+listen 8080;
+
+location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+
+error_page   500 502 503 504  /50x.html;
+
+location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
+    "dotenv": "^9.0.0",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-jest": "^24.1.3",
diff --git a/frontend/server.js b/frontend/server.js
diff --git a/frontend/src/components/diff_component/AnswersMerger.tsx b/frontend/src/components/diff_component/AnswersMerger.tsx
@@ -7,7 +7,7 @@ import stringEquals from "../../util/StringEquals";
 import {useFetch} from "../../hooks/useFetch";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     dataset_id: string,
diff --git a/frontend/src/components/tagger_component/MisconceptionTagElement.tsx b/frontend/src/components/tagger_component/MisconceptionTagElement.tsx
@@ -22,7 +22,7 @@ import NoMisconception from "../../util/NoMisconception";
 import {FormatColorReset} from "@material-ui/icons";
 import {highlightRangeToColor, highlightStyle} from "../../helpers/Util";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
diff --git a/frontend/src/components/v2/TaggingUI.tsx b/frontend/src/components/v2/TaggingUI.tsx
@@ -24,7 +24,7 @@ import ClusterHandler from "./cluster_handler_component/ClusterHandler";
 import withKeyboard from "../../hooks/withKeyboard";
 import {useFetch} from "../../hooks/useFetch";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingSession: TaggingSession,
diff --git a/frontend/src/components/v2/cluster_handler_component/ClusterHandler.tsx b/frontend/src/components/v2/cluster_handler_component/ClusterHandler.tsx
@@ -21,7 +21,7 @@ import {setClusters} from "../../../model/TaggingClusterSessionDispatch";
 import {Clear, Search} from "@material-ui/icons";
 import DroppableCluster from "./DroppableCluster";
 
-const {TAGGING_SERVICE_URL} = require('../../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingSession: TaggingSession,
diff --git a/frontend/src/components/v2/tagger_component/ClusterView.tsx b/frontend/src/components/v2/tagger_component/ClusterView.tsx
@@ -30,7 +30,7 @@ import withKeyboard from "../../../hooks/withKeyboard";
 import stringEquals from "../../../util/StringEquals";
 import {postClusters} from "../../../helpers/PostHelper";
 
-const {TAGGING_SERVICE_URL} = require('../../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     taggingClusterSession: TaggingClusterSession,
diff --git a/frontend/src/helpers/DownloadHelper.tsx b/frontend/src/helpers/DownloadHelper.tsx
@@ -1,4 +1,4 @@
-const {TAGGING_SERVICE_URL} = require('../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 const download_url = TAGGING_SERVICE_URL + '/datasets/download/dataset/'
 
 // https://www.codevoila.com/post/30/export-json-data-to-downloadable-file-using-javascript
diff --git a/frontend/src/helpers/PostHelper.ts b/frontend/src/helpers/PostHelper.ts
@@ -2,7 +2,7 @@ import {HighlightRange} from "../interfaces/HighlightRange";
 import {Cluster} from "../interfaces/Dataset";
 
 
-const {TAGGING_SERVICE_URL} = require('../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const post_answer_url = TAGGING_SERVICE_URL + '/datasets/tagged-answer'
 
diff --git a/frontend/src/pages/auth/Login.tsx b/frontend/src/pages/auth/Login.tsx
@@ -5,7 +5,7 @@ import {User, userContext} from "../../util/UserContext";
 import {FiberManualRecord} from "@material-ui/icons";
 import {useHistory} from "react-router-dom";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Input {
     setSession(session: User): void
diff --git a/frontend/src/pages/tagging/DatasetSelection.tsx b/frontend/src/pages/tagging/DatasetSelection.tsx
@@ -9,7 +9,7 @@ import {DatasetDesc} from "../../interfaces/Dataset";
 import {userContext} from "../../util/UserContext";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 
 const redirect = (id: string, url: string, user_id: string, router: any) => {
diff --git a/frontend/src/pages/tagging/DiffView.tsx b/frontend/src/pages/tagging/DiffView.tsx
@@ -9,7 +9,7 @@ import {MisconceptionElement} from "../../interfaces/MisconceptionElement";
 import {useFetch} from "../../hooks/useFetch";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 
 const useStyles = makeStyles(() =>
diff --git a/frontend/src/pages/tagging/TaggingDetailPage.tsx b/frontend/src/pages/tagging/TaggingDetailPage.tsx
@@ -8,7 +8,7 @@ import {StyledTableCell, StyledTableRow, useStyles} from "../../components/style
 // @ts-ignore
 import Highlightable from "highlightable";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 function TaggingDetailPage() {
 
diff --git a/frontend/src/pages/tagging/TaggingPage.tsx b/frontend/src/pages/tagging/TaggingPage.tsx
@@ -8,7 +8,7 @@ import useTaggingClusterSession from "../../model/TaggingClusterSession";
 import {userContext} from "../../util/UserContext";
 import {useFetch} from "../../hooks/useFetch";
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 function TaggingPage() {
 
diff --git a/frontend/src/pages/tagging/TaggingSummaryPage.tsx b/frontend/src/pages/tagging/TaggingSummaryPage.tsx
@@ -6,7 +6,7 @@ import {Paper, Table, TableBody, TableContainer, TableHead, TableRow} from "@mat
 import {StyledTableCell, StyledTableRow, useStyles} from "../../components/styled/StyledTable";
 
 
-const {TAGGING_SERVICE_URL} = require('../../../config.json')
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 interface Stats {
     count: number,
diff --git a/frontend/src/pages/upload/FileUploader.tsx b/frontend/src/pages/upload/FileUploader.tsx
@@ -3,7 +3,7 @@ import {makeStyles, createStyles, Theme} from '@material-ui/core/styles';
 import React, {useState} from 'react';
 
 
-const TAGGING_SERVICE_URL = require('../../../config.json').TAGGING_SERVICE_URL
+const TAGGING_SERVICE_URL = process.env.TAGGING_SERVICE_URL
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
diff --git a/frontend/webpack.dev.config.ts b/frontend/webpack.dev.config.ts
@@ -4,6 +4,8 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ESLintPlugin from "eslint-webpack-plugin";
 
+require('dotenv').config();
+
 const config: webpack.Configuration = {
   mode: "development",
   output: {
@@ -43,6 +45,9 @@ const config: webpack.Configuration = {
     new ESLintPlugin({
       extensions: ["js", "jsx", "ts", "tsx"],
     }),
+    new webpack.DefinePlugin({
+      'process.env.TAGGING_SERVICE_URL': 'http://localhost:5000'
+    }),
   ],
   devtool: "inline-source-map",
   devServer: {
diff --git a/frontend/webpack.prod.config.ts b/frontend/webpack.prod.config.ts
@@ -3,7 +3,11 @@ import webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import {CleanWebpackPlugin} from "clean-webpack-plugin";
+
+require('dotenv').config({
+  path: path.join(__dirname, '.env.prod')
+});
 
 const config: webpack.Configuration = {
   mode: "production",
@@ -45,6 +49,9 @@ const config: webpack.Configuration = {
       extensions: ["js", "jsx", "ts", "tsx"],
     }),
     new CleanWebpackPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.TAGGING_SERVICE_URL': JSON.stringify(process.env.TAGGING_SERVICE_URL)
+    }),
   ],
 };
 
diff --git a/tagging-service/flaskr/__init__.py b/tagging-service/flaskr/__init__.py
@@ -14,7 +14,7 @@ def create_app(test_config=None):
     api.init_app(app)
     cache.init_app(app)
     app.config.from_pyfile('./config/env_config.py')
-    CORS(app, resources={r'/*': {"origins": "http://localhost:8080"}})
+    CORS(app, resources={r'/*': {"origins": "*"}})
 
     @app.errorhandler(Error)
     def handle_invalid_usage(error):

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`	`1`	`NODE_PATH=./`
`2`		`-TAGGING_SERVICE_URL=http://localhost:5000`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+TAGGING_SERVICE_URL=http://192.168.1.169:5000`