Merge branch 'feature/frontend-env' into 'dev'

feat(frontend): add environment variables to container images

See merge request !16

.gitignore

@@ -3,3 +3,4 @@
 nginx/cert/
 backend/envs/*
 !backend/envs/example.env
+frontend/public/env.js

.gitlab-ci.yml

@@ -8,9 +8,9 @@ stages:
 variables:
   PACKAGENAME: frontend-s3
   BE_BASE_IMAGE: "${CI_REGISTRY_IMAGE}/backend"
-  BE_TEST_IMAGE: "${BE_BASE_IMAGE}:${CI_COMMIT_REF_NAME}"
+  BE_TEST_IMAGE: "${BE_BASE_IMAGE}:${CI_COMMIT_REF_SLUG}"
   FE_BASE_IMAGE: "${CI_REGISTRY_IMAGE}/frontend"
-  FE_TEST_IMAGE: "${FE_BASE_IMAGE}:${CI_COMMIT_REF_NAME}"
+  FE_TEST_IMAGE: "${FE_BASE_IMAGE}:${CI_COMMIT_REF_SLUG}"
   DEV_LATEST_IMAGE_TAG: "latest-dev"
   PROD_LATEST_IMAGE_TAG: "latest"
   IS_PROD_VERSION: '^(v(([0-9]+)\.)?([0-9]+)\.?([0-9]+)|main)$'

README.md

@@ -33,15 +33,69 @@ The frontend service consists in a NGINX web server provided with the static
 website files produces by React build. The site must be configure as a
 "Single Page App" (SPA). In this context, all routes routed through the web
 browser must be **always** redirect to the `/` route.
-[Here](frontend/nginx.conf) you can find a configuration example which you can
-use as
+[Here](frontend/nginx.conf) you can find the default configuration.
+
+The web application needs a configured envinroment file `env.js` located at
+`frontend/public/env.js`. This file is automatically created at runtime, inside
+the container, by the [`frontend/init_env.sh`](frontend/init_env.sh) script.
+
+In order to run, the following variables **are required** to be set in the
+container.
+
+```shell
+IAM_AUTHORITY
+IAM_CLIENT_ID
+IAM_REDIRECT_URI
+IAM_SCOPE
+IAM_AUDIENCE
+S3_ENDPOINT
+S3_REGION   # Cannot be empty, use whatever you want if not need, e.g. 'nova'
+```
+
+In addition, you **must** bind the port 80 to your container.
+
+```shell
+docker run \
+  -p 8080:80 \
+  -e IAM_AUTHORITY=... \
+  -e ... \
+  frontend
+```
+
+If you need, you can also provide a custom configuration for the nginx webserver
+using the command
 
 ```shell
-docker run -p 8080:80 -v $(pwd)/frontend/nginx.conf:/etc/nginx/conf.d/default.conf frontend
+docker run \
+  -p 8080:80 \ 
+  -e IAM_AUTHORITY=... \
+  -e ... \
+  -v <path/to/your/conf>:/etc/nginx/conf.d/default.conf \
+  frontend
 ```
 
 ### Backend Configuration
 
-The only configuration needed to the backend service is an env file, or otherwise
-you can directly expose the environmental variables needed, as shown at
-[example.dev](backend/envs/example.env)
+To run the backend service, the following environtmental variables
+**are required** to be set in the container
+
+```shell
+IAM_AUTHORITY
+IAM_CLIENT_ID
+IAM_CLIENT_SECRET
+S3_ENDPOINT
+S3_ROLE_ARN
+S3_REGION_NAME     # can be empty, but defined
+```
+
+You find an example at [example.dev](backend/envs/example.env).
+
+In addition, you **must** bind the **port 8000** to your container.
+
+```shell
+docker run \
+  -p 8080:8000 \ 
+  -e IAM_AUTHORITY=... \
+  -e ... \
+  backend
+```

frontend/.env

-# https://stackoverflow.com/questions/70585472/websocketclient-js16-websocket-connection-to-ws-localhost3000-ws-failed-r
-WDS_SOCKET_PORT=0

frontend/Dockerfile.prod

@@ -2,3 +2,4 @@ FROM nginx:latest
 
 COPY build/ /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY init_env.sh /docker-entrypoint.d/init_env.sh

frontend/init_env.sh

+#!/bin/sh
+
+TEMPLATE_FILE="/usr/share/nginx/html/env.template.js"
+ENV_FILE="/usr/share/nginx/html/env.js"
+
+echo "Initialize environment variables"
+
+cp $TEMPLATE_FILE $ENV_FILE
+
+sed -i -e "s/IAM_AUTHORITY_VALUE/${IAM_AUTHORITY}/g" $ENV_FILE
+sed -i -e "s/IAM_CLIENT_ID_VALUE/${IAM_CLIENT_ID}/g" $ENV_FILE
+sed -i -e "s/IAM_REDIRECT_URI_VALUE/${IAM_REDIRECT_URI}/g" $ENV_FILE
+sed -i -e "s/IAM_SCOPE_VALUE/${IAM_SCOPE}/g" $ENV_FILE
+sed -i -e "s/IAM_AUDIENCE_VALUE/${IAM_AUDIENCE}/g" $ENV_FILE
+sed -i -e "s/S3_ENDPOINT_VALUE/${S3_ENDPOINT}/g" $ENV_FILE
+sed -i -e "s/S3_REGION_VALUE/${S3_REGION}/g" $ENV_FILE

frontend/public/env.template.js

+// Do not change this file. This is used to parse a real env.js file by
+// frontend/init_env.sh
+
+window.env = {
+  "IAM_AUTHORITY": "IAM_AUTHORITY_VALUE",
+  "IAM_CLIENT_ID": "IAM_CLIENT_ID_VALUE",
+  "IAM_REDIRECT_URI": "IAM_REDIRECT_URI_VALUE",
+  "IAM_SCOPE": "IAM_SCOPE_VALUE",
+  "IAM_AUDIENCE": "IAM_AUDIENCE_VALUE",
+  "S3_ENDPOINT": "S3_ENDPOINT_VALUE",
+  "S3_REGION": "S3_REGION_VALUE"
+}

frontend/public/index.html

@@ -14,6 +14,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <script src="%PUBLIC_URL%/env.js"></script>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

frontend/src/index.tsx

@@ -5,26 +5,41 @@ import { S3ServiceProvider } from './services/S3Service';
 import App from './App';
 import './index.css';
 
+// Add `env` namespace to window
+interface EnvInterface {
+  IAM_AUTHORITY: string;
+  IAM_CLIENT_ID: string;
+  IAM_REDIRECT_URI: string;
+  IAM_SCOPE: string;
+  IAM_AUDIENCE: string;
+  S3_ENDPOINT: string;
+  S3_REGION: string;
+}
+declare global {
+  interface Window { env: EnvInterface }
+};
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 const OidcConfig = {
-  authority: "https://keycloak-demo.cloud.cnaf.infn.it:8222",
-  client_id: "66a8f7e8-a5ef-4ef1-8e2e-3389f1170ae7",
-  redirect_uri: `${window.location.href}callback`,
-  audience: "b573bc60-c58f-4924-90e5-ac0f5bcb576e",
-  scope: "openid email profile offline_access",
+  authority: window.env.IAM_AUTHORITY,
+  client_id: window.env.IAM_CLIENT_ID,
+  redirect_uri: window.env.IAM_REDIRECT_URI,
+  audience: window.env.IAM_AUDIENCE,
+  scope: window.env.IAM_SCOPE,
   grant_type: "authorization_code",
   response_type: "code"
 };
 
 const s3Config = {
   awsConfig: {
-    endpoint: "https://vm-131-154-97-121.cloud.cnaf.infn.it",
-    region: "nova"
+    endpoint: window.env.S3_ENDPOINT,
+    region: window.env.S3_REGION
   }
 }
+
 root.render(
   <React.StrictMode>
     <OAuthProvider {...OidcConfig}>