From e43afe21fe34120a7a50787df9e1adff966027bc Mon Sep 17 00:00:00 2001 From: nabarun <nabarun@deepstacksoft.com> Date: Tue, 11 Apr 2023 15:38:29 +0530 Subject: [PATCH] Build MobyMask web-app at container build step --- .../compose/docker-compose-mobymask-app.yml | 5 +++-- .../watcher-mobymask-v2/config-template.yml | 9 ++++++++ .../watcher-mobymask-v2/mobymask-app-start.sh | 19 +++++++++-------- .../apply-webapp-config.sh | 5 +++-- .../cerc-laconic-console-host/Dockerfile | 2 +- .../start-serving-app.sh | 2 +- .../cerc-mobymask-ui/Dockerfile | 21 ++++++++++++++++--- .../container-build/cerc-mobymask-ui/build.sh | 3 ++- .../cerc-mobymask-ui/mobymask-config.json | 9 ++++++++ .../cerc-mobymask-ui/start-serving-app.sh | 8 +++++++ .../fixturenet-laconic-loaded/README.md | 2 +- app/data/stacks/mobymask-v2/web-apps.md | 2 +- 12 files changed, 66 insertions(+), 21 deletions(-) create mode 100644 app/data/config/watcher-mobymask-v2/config-template.yml rename app/data/container-build/{cerc-laconic-console-host => }/apply-webapp-config.sh (94%) create mode 100644 app/data/container-build/cerc-mobymask-ui/mobymask-config.json create mode 100755 app/data/container-build/cerc-mobymask-ui/start-serving-app.sh diff --git a/app/data/compose/docker-compose-mobymask-app.yml b/app/data/compose/docker-compose-mobymask-app.yml index df14d7db..3fc4edb4 100644 --- a/app/data/compose/docker-compose-mobymask-app.yml +++ b/app/data/compose/docker-compose-mobymask-app.yml @@ -3,6 +3,7 @@ version: '3.2' services: # Builds and serves the MobyMask react-app mobymask-app: + restart: unless-stopped image: cerc/mobymask-ui:local env_file: - ../config/watcher-mobymask-v2/mobymask-params.env @@ -20,12 +21,12 @@ services: - ./wait-for-it.sh -h ${CERC_WATCHER_HOST:-$${DEFAULT_CERC_WATCHER_HOST}} -p ${CERC_WATCHER_PORT:-$${DEFAULT_CERC_WATCHER_PORT}} -s -t 0 -- ./mobymask-app-start.sh volumes: - ../config/wait-for-it.sh:/app/wait-for-it.sh - - ../config/watcher-mobymask-v2/mobymask-app-config.json:/app/src/mobymask-app-config.json + - ../config/watcher-mobymask-v2/config.yml:/config/config.yml - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/app/mobymask-app-start.sh - peers_ids:/peers - mobymask_deployment:/server ports: - - "0.0.0.0:3002:3000" + - "0.0.0.0:3002:80" healthcheck: test: ["CMD", "nc", "-v", "localhost", "3000"] interval: 20s diff --git a/app/data/config/watcher-mobymask-v2/config-template.yml b/app/data/config/watcher-mobymask-v2/config-template.yml new file mode 100644 index 00000000..5a806be5 --- /dev/null +++ b/app/data/config/watcher-mobymask-v2/config-template.yml @@ -0,0 +1,9 @@ +# Config for mobymask-app running with mobymask-v2-watcher + +address: + +chainId: + +relayNodes: + +watcherUrl: diff --git a/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh b/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh index c494ed5c..6ca2f36a 100755 --- a/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh +++ b/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh @@ -28,13 +28,14 @@ else echo "Taking deployed contract details from env" fi -# Export config values in a json file -jq --arg address "$CERC_DEPLOYED_CONTRACT" \ - --argjson chainId "$CERC_CHAIN_ID" \ - --argjson relayNodes "$CERC_RELAY_NODES" \ - '.address = $address | .chainId = $chainId | .relayNodes = $relayNodes' \ - /app/src/mobymask-app-config.json > /app/src/config.json +# Use yq to replace the values in the YAML file with environment variables +yq e \ + --arg deployed_contract "$CERC_DEPLOYED_CONTRACT" \ + --arg watcher_url "$CERC_APP_WATCHER_URL" \ + --arg chain_id "$CERC_CHAIN_ID" \ + --argjson relay_nodes "$CERC_RELAY_NODES" \ + '.address = $deployed_contract | .chainId = $chain_id | .relayNodes = $relay_nodes | .watcherUrl = $watcher_url' \ + /config/config-template.yml \ + | envsubst > /config/config.yml -REACT_APP_WATCHER_URI="$CERC_APP_WATCHER_URL/graphql" npm run build - -serve -s build +sh /scripts/mobymask-app-start.sh diff --git a/app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh b/app/data/container-build/apply-webapp-config.sh similarity index 94% rename from app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh rename to app/data/container-build/apply-webapp-config.sh index bf041708..1bd25c48 100755 --- a/app/data/container-build/cerc-laconic-console-host/apply-webapp-config.sh +++ b/app/data/container-build/apply-webapp-config.sh @@ -8,6 +8,7 @@ if [[ $# -ne 2 ]]; then fi config_file_name=$1 webapp_files_dir=$2 +config_prefix=$3 if ! [[ -f ${config_file_name} ]]; then echo "Config file ${config_file_name} does not exist" >&2 exit 1 @@ -17,8 +18,8 @@ if ! [[ -d ${webapp_files_dir} ]]; then exit 1 fi # First some magic using yq to translate our yaml config file into an array of key value pairs like: -# LACONIC_HOSTED_CONFIG_<path-through-objects>=<value> -readarray -t config_kv_pair_array < <( yq '.. | select(length > 2) | ([path | join("_"), .] | join("=") )' ${config_file_name} | sed 's/^/LACONIC_HOSTED_CONFIG_/' ) +# ${config_prefix}<path-through-objects>=<value> +readarray -t config_kv_pair_array < <( yq '.. | select(length > 2) | ([path | join("_"), .] | join("=") )' ${config_file_name} | sed "s/^/${config_prefix}_/" ) declare -p config_kv_pair_array # Then iterate over that kv array making the template substitution in our web app files for kv_pair_string in "${config_kv_pair_array[@]}" diff --git a/app/data/container-build/cerc-laconic-console-host/Dockerfile b/app/data/container-build/cerc-laconic-console-host/Dockerfile index a31aa265..cddde3b4 100644 --- a/app/data/container-build/cerc-laconic-console-host/Dockerfile +++ b/app/data/container-build/cerc-laconic-console-host/Dockerfile @@ -42,7 +42,7 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ COPY --from=docker.io/mikefarah/yq:latest /usr/bin/yq /usr/local/bin/yq RUN mkdir -p /scripts -COPY ./apply-webapp-config.sh /scripts +COPY ../apply-webapp-config.sh /scripts COPY ./start-serving-app.sh /scripts # [Optional] Uncomment if you want to install more global node modules diff --git a/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh b/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh index a322e5fb..6897c88a 100755 --- a/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh +++ b/app/data/container-build/cerc-laconic-console-host/start-serving-app.sh @@ -4,5 +4,5 @@ if [ -n "$CERC_SCRIPT_DEBUG" ]; then fi # TODO: Don't hard wire this: webapp_files_dir=/usr/local/share/.config/yarn/global/node_modules/@cerc-io/console-app/dist/production -/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} +/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} LACONIC_HOSTED_CONFIG http-server -p 80 ${webapp_files_dir} diff --git a/app/data/container-build/cerc-mobymask-ui/Dockerfile b/app/data/container-build/cerc-mobymask-ui/Dockerfile index c04b001d..8271c343 100644 --- a/app/data/container-build/cerc-mobymask-ui/Dockerfile +++ b/app/data/container-build/cerc-mobymask-ui/Dockerfile @@ -1,14 +1,29 @@ FROM node:18.15.0-alpine3.16 +ARG REPO_DIR + RUN apk --update --no-cache add make git jq bash +RUN mkdir -p /scripts +COPY ../apply-webapp-config.sh /scripts +COPY ./start-serving-app.sh /scripts + +# Install simple web server for now (use nginx perhaps later) +RUN yarn global add http-server + WORKDIR /app -COPY . . +COPY ${REPO_DIR} . -RUN npm install -g serve +COPY ./mobymask-config.json /src/config.json RUN echo "Building mobymask-ui" && \ - npm install + npm install && \ + REACT_APP_WATCHER_URI="MOBYMASK_HOSTED_CONFIG_watcherUrl/graphql" npm run build WORKDIR /app + +# Expose port for http +EXPOSE 80 + +CMD ["/scripts/start-serving-app.sh"] diff --git a/app/data/container-build/cerc-mobymask-ui/build.sh b/app/data/container-build/cerc-mobymask-ui/build.sh index 52687093..9939fed2 100755 --- a/app/data/container-build/cerc-mobymask-ui/build.sh +++ b/app/data/container-build/cerc-mobymask-ui/build.sh @@ -6,4 +6,5 @@ source ${CERC_CONTAINER_BASE_DIR}/build-base.sh # See: https://stackoverflow.com/a/246128/1701505 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd ) -docker build -t cerc/mobymask-ui:local -f ${SCRIPT_DIR}/Dockerfile ${build_command_args} ${CERC_REPO_BASE_DIR}/mobymask-ui +docker build -t cerc/mobymask-ui:local -f ${SCRIPT_DIR}/Dockerfile \ + --build-arg REPO_DIR=${CERC_REPO_BASE_DIR}/mobymask-ui ${SCRIPT_DIR} diff --git a/app/data/container-build/cerc-mobymask-ui/mobymask-config.json b/app/data/container-build/cerc-mobymask-ui/mobymask-config.json new file mode 100644 index 00000000..f1d53acc --- /dev/null +++ b/app/data/container-build/cerc-mobymask-ui/mobymask-config.json @@ -0,0 +1,9 @@ +{ + "name": "MobyMask", + "address": "MOBYMASK_HOSTED_CONFIG_address", + "chainId": "MOBYMASK_HOSTED_CONFIG_chainId", + "relayNodes": "MOBYMASK_HOSTED_CONFIG_relayNodes", + "peer": { + "enableDebugInfo": true + } +} diff --git a/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh b/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh new file mode 100755 index 00000000..e1b460e9 --- /dev/null +++ b/app/data/container-build/cerc-mobymask-ui/start-serving-app.sh @@ -0,0 +1,8 @@ +#!/usr/bin/env bash +if [ -n "$CERC_SCRIPT_DEBUG" ]; then + set -x +fi +# TODO: Don't hard wire this: +webapp_files_dir=/app/build +/scripts/apply-webapp-config.sh /config/config.yml ${webapp_files_dir} MOBYMASK_HOSTED_CONFIG +http-server -p 80 ${webapp_files_dir} diff --git a/app/data/stacks/fixturenet-laconic-loaded/README.md b/app/data/stacks/fixturenet-laconic-loaded/README.md index 2fc21594..b94189c2 100644 --- a/app/data/stacks/fixturenet-laconic-loaded/README.md +++ b/app/data/stacks/fixturenet-laconic-loaded/README.md @@ -14,7 +14,7 @@ $ chmod +x ./laconic-so $ export PATH=$PATH:$(pwd) # Or move laconic-so to ~/bin or your favorite on-path directory ``` ## 2. Prepare the local build environment -Note that this step needs only to be done once on a new machine. +Note that this step needs only to be done once on a new machine. Detailed instructions can be found [here](../build-support/README.md). For the impatient run these commands: ``` $ laconic-so --stack build-support build-containers --exclude cerc/builder-gerbil diff --git a/app/data/stacks/mobymask-v2/web-apps.md b/app/data/stacks/mobymask-v2/web-apps.md index 09d6834d..382b8af5 100644 --- a/app/data/stacks/mobymask-v2/web-apps.md +++ b/app/data/stacks/mobymask-v2/web-apps.md @@ -29,7 +29,7 @@ git checkout laconic Build the container images: ```bash -laconic-so --stack mobymask-v2 build-containers --include cerc/react-peer-v2,cerc/mobymask-ui +laconic-so --stack mobymask-v2 build-containers --include cerc/react-peer,cerc/mobymask-ui ``` This should create the required docker images in the local image registry