Better docker-compose framework (#51)

* Include nginx webserver and proxy client and server through

* Serve SvelteKit's production, optimised build

* Rewrite paths

* Do away with one service: UI is static, proxy passes the API at /api

* Use process.env variables, close #46

* Use environment variables, attempt to improve nginx

* Don't leave requests hanging if verification not possible. Close #53

* Local dev setup uses Vite proxy to replicate Docker/nginx config

* Bump version number

* Silence nginx access log

* Fix typings

.dockerignore

@@ -1,3 +1,3 @@
-gui/
+ui/
 node_modules/
 out/

docker-compose.yml

@@ -2,39 +2,26 @@ version: '3'
 
 services:
   endpoint:
+    restart: always
     build:
       context: .
       dockerfile: ./Dockerfile
-    expose:
-      - '3000'
     ports:
       - '3000:3000'
     networks:
       - app
     volumes:
       - './out:/app/out'
 
-  gui:
+  ui:
     build:
       context: ui/
       dockerfile: Dockerfile
-    expose:
-      - '8000'
+    env_file: .env
+    logging:
+      driver: none
     ports:
-      - '8000:8000'
-    networks:
-      - app
-    depends_on:
-      - endpoint
-
-  extension:
-    build:
-      context: extension/
-      dockerfile: Dockerfile
-    expose:
-      - '9000'
-    ports:
-      - '9000:9000'
+      - '8000:80'
     networks:
       - app
     depends_on:

package.json

@@ -7,7 +7,7 @@
       "email": "niko@niko.io"
     }
   ],
-  "version": "0.9.3",
+  "version": "0.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/digitalevidencetoolkit/deptoolkit"

src/ledger/index.ts

@@ -9,12 +9,14 @@ import { Result } from 'amazon-qldb-driver-nodejs';
 export const insertDoc = (r: Record.Record): Promise<Result | void> =>
   Record.validate(r)
     .then(Record.toLedger)
-    .then(dbItem => QLDB.insertDocuments(QLDB.Constants.doc_table_name, dbItem))
+    .then(dbItem =>
+      QLDB.insertDocuments(process.env.DOC_TABLE_NAME as string, dbItem)
+    )
     .catch(err => console.log(`${err.name}: ${err.errors}`));
 
 export const listDocs = async (): Promise<Record.FrontEndRecord[]> => {
   const list: Result | undefined = await QLDB.listDocuments(
-    QLDB.Constants.doc_table_name
+    process.env.DOC_TABLE_NAME as string
   );
   const result = list?.getResultList() || [];
   return result
@@ -29,12 +31,14 @@ export const getDoc = async (
   const list: Result | undefined = await QLDB.getOneDocument(
     id,
     col,
-    QLDB.Constants.doc_table_name
+    process.env.DOC_TABLE_NAME as string
   );
   const result = list?.getResultList() || [];
   if (result.length > 0) {
     return Record.fromLedger(result[0]);
-  } else return null;
+  } else {
+    return null;
+  }
 };
 
 export const listDocHistory = async (sku: string): Promise<dom.Value[]> => {
@@ -47,7 +51,11 @@ export const updateDoc = async (sku: string, data: Annotation) => {
   Annotations.validate(data)
     .then(annotation => annotation.description)
     .then(description =>
-      QLDB.updateDocument(QLDB.Constants.doc_table_name, description, sku)
+      QLDB.updateDocument(
+        process.env.DOC_TABLE_NAME as string,
+        description,
+        sku
+      )
     )
     .catch(err => console.log(`${err.name}: ${err.errors}`));
 };

src/qldb/index.ts

@@ -4,15 +4,13 @@ import {
   TransactionExecutor,
   RetryConfig,
 } from 'amazon-qldb-driver-nodejs';
+import { config } from 'dotenv';
 import { ClientConfiguration } from 'aws-sdk/clients/qldbsession';
 
-export const Constants = {
-  ledger_name: 'deptoolkit',
-  doc_table_name: 'Document',
-  doc_index_key: 'sku',
-};
-
-const qldbDriver: QldbDriver = createQldbDriver();
+config();
+const qldbDriver: QldbDriver = createQldbDriver(
+  process.env.LEDGER_NAME as string
+);
 
 /**
  * Create a driver for creating sessions.
@@ -21,8 +19,10 @@ const qldbDriver: QldbDriver = createQldbDriver();
  * @returns The driver for creating sessions.
  */
 function createQldbDriver(
-  ledgerName: string = Constants.ledger_name,
-  serviceConfigurationOptions: ClientConfiguration = { region: 'eu-central-1' }
+  ledgerName: string,
+  serviceConfigurationOptions: ClientConfiguration = {
+    region: process.env.AWS_REGION,
+  }
 ): QldbDriver {
   const retryLimit = 4;
   const maxConcurrentTransactions = 10;
@@ -160,7 +160,7 @@ async function getDocumentIdByField(
 export const queryHistoryOfDocument = async function (
   sku: string
 ): Promise<Result | undefined> {
-  const tableName = Constants.doc_table_name;
+  const tableName = process.env.DOC_TABLE_NAME as string;
   try {
     const qldbDriver: QldbDriver = getQldbDriver();
     const statement: string = `SELECT * from history (${tableName}) AS h WHERE h.metadata.id = ?`;

ui/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+out/

ui/Dockerfile

@@ -1,14 +1,14 @@
-FROM node:14.16.1-alpine3.12
-
+FROM node:14.16.1-alpine3.12 as builder
 LABEL version="0.1"
 LABEL description="GUI from the QLDB ledger"
 
-WORKDIR /web
-COPY ["package.json", "package-lock.json", "./"]
-RUN npm install
+WORKDIR /app
 COPY . .
+RUN npm install
+RUN node node_modules/esbuild/install.js
+RUN npm run build
 
-EXPOSE 8000
-ENV HOST=0.0.0.0
+FROM nginx:alpine
+COPY --from=builder /app/out /assets
 
-CMD ["npm", "run", "dev"]
+COPY ./default.conf /etc/nginx/conf.d/default.conf

ui/default.conf

@@ -0,0 +1,21 @@
+upstream endpoint {
+    server endpoint:3000;
+}
+
+server {
+    listen 80;
+    client_max_body_size 64M;
+    client_body_buffer_size 64M;
+
+    location / {
+        root /assets;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        rewrite /api/(.*) /$1 break;
+        proxy_pass  http://endpoint;
+        proxy_buffering off;
+        proxy_request_buffering off;
+    }
+}

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deptoolkit-ui",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "engines": {
     "node": ">=14.0"
   },
@@ -12,6 +12,8 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
+    "@sveltejs/adapter-node": "^1.0.0-next.43",
+    "@sveltejs/adapter-static": "^1.0.0-next.16",
     "@sveltejs/kit": "next",
     "@types/cookie": "^0.4.0",
     "attractions": "^3.3.0",

ui/src/lib/Ledger/LedgerEntry.svelte

@@ -27,8 +27,7 @@
     originalTX = Ledger.getOriginalTX(entry.history);
   }
 
-  const pathToThumbnail = (path: string): string =>
-    `http://localhost:3000/file/${path}.png`;
+  const pathToThumbnail = (path: string): string => `/api/file/${path}.png`;
 
   const isOdd = i % 2 === 0;
 </script>

ui/src/lib/Ledger/index.ts

@@ -27,7 +27,7 @@ type QLDBHistoryItem = {
 
 // @TODO: error handling!
 export async function fetchData(): Promise<LedgerEntry[]> {
-  const res = await fetch('http://localhost:3000/list-docs');
+  const res = await fetch('/api/list-docs');
   const data = await res.json();
   return data;
 }
@@ -39,7 +39,7 @@ export async function fetchData(): Promise<LedgerEntry[]> {
  */
 // @TODO: error handling!
 async function fetchItemHistory(id: string): Promise<QLDBHistory> {
-  const res = await fetch(`http://localhost:3000/history/${id}`);
+  const res = await fetch(`/api/history/${id}`);
   const data = await res.json();
   return data;
 }
@@ -89,7 +89,7 @@ export const getOriginalTX = (h: QLDBHistory): OriginalTx => {
  **/
 // @TODO: make this function return a fulfilling or rejecting promise
 export async function postDocumentRevision(thing: FormData, id: string) {
-  const res = await fetch(`http://localhost:3000/edit-description/${id}`, {
+  const res = await fetch(`/api/edit-description/${id}`, {
     method: 'POST',
     body: thing,
   });
@@ -106,14 +106,14 @@ export async function postDocumentRevision(thing: FormData, id: string) {
  * @returns a promise of a response
  */
 export async function verifyFile(payload: FormData): Promise<Response> {
-  return await fetch(`http://localhost:3000/verify`, {
+  return await fetch(`/api/verify`, {
     method: 'POST',
     body: payload,
   });
 }
 
 export async function requestWorkingCopy(sku: string) {
-  downloadAFile(`http://localhost:3000/export-copy/${sku}.zip`, `${sku}.zip`);
+  downloadAFile(`/api/export-copy/${sku}.zip`, `${sku}.zip`);
 }
 
 const downloadAFile = (fileUrl: string, fileName: string) => {

ui/src/routes/__layout.svelte

@@ -23,10 +23,6 @@
     padding: 40px;
   }
 
-  footer a {
-    font-weight: bold;
-  }
-
   @media (min-width: 480px) {
     footer {
       padding: 40px 0;

ui/svelte.config.js

@@ -1,15 +1,27 @@
 import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
   preprocess: preprocess(),
 
   kit: {
-    // hydrate the <div id="svelte"> element in src/app.html
     target: '#svelte',
-    vite: () => ({ clearScreen: false }),
+    adapter: adapter({
+      pages: 'out/',
+      assets: 'out/',
+    }),
+    vite: () => ({
+      clearScreen: false,
+      server: {
+        proxy: {
+          '/api': {
+            target: 'http://localhost:3000',
+            rewrite: path => path.replace(/^\/api/, ''),
+          },
+        },
+      },
+    }),
   },
 };
 

ui/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "moduleResolution": "node",
     "module": "es2020",
-    "lib": ["es2020", "DOM", "dom.iterable"],
+    "lib": ["es2015", "es2020", "DOM", "dom.iterable"],
     "target": "es2019",
     /**
     svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript