From 018950858b1607e08185d65588047718039db959 Mon Sep 17 00:00:00 2001 From: prathamesh0 <42446521+prathamesh0@users.noreply.github.com> Date: Tue, 25 Apr 2023 18:32:38 +0530 Subject: [PATCH] Add instructions to run MobyMask app with a watcher on network (#368) * Remove unnecessary check on watcher endpoint * Add instructions to run MobyMask app with a watcher on network * Move watcher on network docs to a separate folder * Add nginx config for watcher endpoint * Add expected output logs * Add sample nginx config for hosting the app * Update instructions --- .../compose/docker-compose-mobymask-app.yml | 14 +- .../compose/docker-compose-peer-test-app.yml | 5 +- .../watcher-mobymask-v2/mobymask-app-start.sh | 8 +- .../watcher-mobymask-v2/mobymask-params.env | 2 - .../watcher.md} | 49 ++++-- .../watcher-p2p-network/web-app.md | 162 ++++++++++++++++++ app/data/stacks/mobymask-v2/web-apps.md | 6 +- 7 files changed, 204 insertions(+), 42 deletions(-) rename app/data/stacks/mobymask-v2/{watcher-p2p-network.md => watcher-p2p-network/watcher.md} (87%) create mode 100644 app/data/stacks/mobymask-v2/watcher-p2p-network/web-app.md diff --git a/app/data/compose/docker-compose-mobymask-app.yml b/app/data/compose/docker-compose-mobymask-app.yml index f2b30a4b..d43e6b44 100644 --- a/app/data/compose/docker-compose-mobymask-app.yml +++ b/app/data/compose/docker-compose-mobymask-app.yml @@ -15,12 +15,7 @@ services: CERC_RELAY_NODES: ${CERC_RELAY_NODES} CERC_BUILD_DIR: "@cerc-io/mobymask-ui/build" working_dir: /scripts - # Waits for watcher server to be up before app build - # Required when running with watcher stack to get deployed contract address - command: - - sh - - -c - - ./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 + command: ["sh", "mobymask-app-start.sh"] volumes: - ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh @@ -51,12 +46,7 @@ services: CERC_RELAY_NODES: ${CERC_RELAY_NODES} CERC_BUILD_DIR: "@cerc-io/mobymask-ui-lxdao/build" working_dir: /scripts - # Waits for watcher server to be up before app build - # Required when running with watcher stack to get deployed contract address - command: - - sh - - -c - - ./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 + command: ["sh", "mobymask-app-start.sh"] volumes: - ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh diff --git a/app/data/compose/docker-compose-peer-test-app.yml b/app/data/compose/docker-compose-peer-test-app.yml index 927f92f7..f2a22675 100644 --- a/app/data/compose/docker-compose-peer-test-app.yml +++ b/app/data/compose/docker-compose-peer-test-app.yml @@ -10,10 +10,7 @@ services: environment: CERC_SCRIPT_DEBUG: ${CERC_SCRIPT_DEBUG} CERC_RELAY_NODES: ${CERC_RELAY_NODES} - command: - - sh - - -c - - ./wait-for-it.sh -h ${CERC_WATCHER_HOST:-$${DEFAULT_CERC_WATCHER_HOST}} -p ${CERC_WATCHER_PORT:-$${DEFAULT_CERC_WATCHER_PORT}} -s -t 0 -- ./test-app-start.sh + command: ["sh", "test-app-start.sh"] volumes: - ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/watcher-mobymask-v2/test-app-start.sh:/scripts/test-app-start.sh 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 0437d22d..9f343340 100755 --- a/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh +++ b/app/data/config/watcher-mobymask-v2/mobymask-app-start.sh @@ -17,9 +17,13 @@ fi echo "Using CERC_RELAY_NODES $CERC_RELAY_NODES" -# Use config from mounted volume if available (when running web-app along with watcher stack) -if [ -f /server/config.json ]; then +if [ -z "$CERC_DEPLOYED_CONTRACT" ]; then + # Use config from mounted volume (when running web-app along with watcher stack) echo "Taking config for deployed contract from mounted volume" + while [ ! -f /server/config.json ]; do + echo "Config not found, retrying after 5 seconds" + sleep 5 + done # Get deployed contract address and chain id CERC_DEPLOYED_CONTRACT=$(jq -r '.address' /server/config.json | tr -d '"') diff --git a/app/data/config/watcher-mobymask-v2/mobymask-params.env b/app/data/config/watcher-mobymask-v2/mobymask-params.env index 22681036..6d1bf063 100644 --- a/app/data/config/watcher-mobymask-v2/mobymask-params.env +++ b/app/data/config/watcher-mobymask-v2/mobymask-params.env @@ -1,8 +1,6 @@ # Defaults # Watcher endpoint -DEFAULT_CERC_WATCHER_HOST="mobymask-watcher-server" -DEFAULT_CERC_WATCHER_PORT=3001 DEFAULT_CERC_APP_WATCHER_URL="http://localhost:3001" # Set of relay peers to connect to from the relay node diff --git a/app/data/stacks/mobymask-v2/watcher-p2p-network.md b/app/data/stacks/mobymask-v2/watcher-p2p-network/watcher.md similarity index 87% rename from app/data/stacks/mobymask-v2/watcher-p2p-network.md rename to app/data/stacks/mobymask-v2/watcher-p2p-network/watcher.md index 5fbaf79e..74d95b92 100644 --- a/app/data/stacks/mobymask-v2/watcher-p2p-network.md +++ b/app/data/stacks/mobymask-v2/watcher-p2p-network/watcher.md @@ -81,10 +81,11 @@ Add the following contents to `mobymask-watcher.env`: ```bash # Domain to be used in the relay node's announce address - CERC_RELAY_ANNOUNCE_DOMAIN="example.com" + CERC_RELAY_ANNOUNCE_DOMAIN="mobymask.example.com" # DO NOT CHANGE THESE VALUES + CERC_L2_GETH_RPC="https://mobymask-l2.dev.vdb.to" CERC_DEPLOYED_CONTRACT="0x2B6AFbd4F479cE4101Df722cF4E05F941523EaD9" CERC_ENABLE_PEER_L2_TXS=false CERC_RELAY_PEERS=["/dns4/relay1.dev.vdb.to/tcp/443/wss/p2p/12D3KooWAx83SM9GWVPc9v9fNzLzftRX6EaAFMjhYiFxRYqctcW1", "/dns4/relay2.dev.vdb.to/tcp/443/wss/p2p/12D3KooWBycy6vHVEfUwwYRbPLBdb5gx9gtFSEMpErYPUjUkDNkm", "/dns4/relay3.dev.vdb.to/tcp/443/wss/p2p/12D3KooWARcUJsiGCgiygiRVVK94U8BNSy8DFBbzAF3B6orrabwn"] @@ -115,7 +116,7 @@ This will run the `mobymask-v2-watcher` including: * A relay node which is in a federated setup with relay nodes set in the env file * A peer node which connects to the watcher relay node as an entrypoint to the MobyMask watcher p2p network. This peer listens for messages from other peers on the network and logs them out to the console -The watcher endpoint is exposed on host port `3001` and the relay node endpoint is exposed on host port `9090` +The watcher GraphQL endpoint is exposed on host port `3001` and the relay node endpoint is exposed on host port `9090` To list down and monitor the running containers: @@ -155,18 +156,30 @@ Check watcher container logs to get multiaddr advertised by the watcher's relay # mobymask_v2-mobymask-watcher-server-1 | 2023-04-20T04:22:57.069Z laconic:relay Relay node started with id 12D3KooWKef84LAcBNb9wZNs6jC5kQFXjddo47hK6AGHD2dSvGai (characteristic-black-pamella) # mobymask_v2-mobymask-watcher-server-1 | 2023-04-20T04:22:57.069Z laconic:relay Listening on: - # mobymask_v2-mobymask-watcher-server-1 | 2023-04-20T04:22:57.070Z laconic:relay /dns4/example.com/tcp/443/wss/p2p/12D3KooWKef84LAcBNb9wZNs6jC5kQFXjddo47hK6AGHD2dSvGai + # mobymask_v2-mobymask-watcher-server-1 | 2023-04-20T04:22:57.070Z laconic:relay /dns4/mobymask.example.com/tcp/443/wss/p2p/12D3KooWKef84LAcBNb9wZNs6jC5kQFXjddo47hK6AGHD2dSvGai ``` ## Web App -To be able to connect to the relay node from remote peers, it needs to be publicly reachable. Configure your website with SSL and the `https` traffic forwarded to port `9090`. +To be able to connect to the relay node from remote peers, it needs to be publicly reachable. +Configure your website with SSL and the `https` traffic reverse proxied as: +* `/graphql` to port `3001` (watcher GQL endpoint) +* `/` to port `9090` (relay node) -For example, a Nginx configuration for domain `example.com` would look something like: +For example, a Nginx configuration for domain `mobymask.example.com` would look something like: ```bash server { - server_name example.com; + server_name mobymask.example.com; + + location /graphql { + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_pass http://127.0.0.1:3001; + proxy_read_timeout 90; + } # https://nginx.org/en/docs/http/websocket.html location / { @@ -181,35 +194,37 @@ For example, a Nginx configuration for domain `example.com` would look something listen [::]:443 ssl ipv6only=on; # managed by Certbot listen 443 ssl; # managed by Certbot - ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot - ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot + ssl_certificate /etc/letsencrypt/live/mobymask.example.com/fullchain.pem; # managed by Certbot + ssl_certificate_key /etc/letsencrypt/live/mobymask.example.com/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot } server { - if ($host = example.com) { + if ($host = mobymask.example.com) { return 301 https://$host$request_uri; } # managed by Certbot listen 80; listen [::]:80; - server_name example.com; + server_name mobymask.example.com; return 404; # managed by Certbot } ``` -To connect a browser peer to the watcher's relay node: -* Visit https://mobymask-lxdao-app.dev.vdb.to/ +To test the web-app, either visit https://mobymask-lxdao-app.dev.vdb.to/ or follow [web-app.md](./web-app.md) to deploy the app locally that hits your watcher's GQL endpoint + +Connect a browser peer to the watcher's relay node: * Click on debug panel on bottom right of the homepage * Select `` in `Primary Relay` dropdown on the right and enter the watcher relay node's multiaddr * Click on `UPDATE` to refresh the page and connect to the watcher's relay node; you should see the relay node's multiaddr in `Self Node Info` on the debug panel * Switch to the `GRAPH (PEERS)` tab to see peers connected to this browser node and the `GRAPH (NETWORK)` tab to see the whole MobyMask p2p network -Perform transactions (invite required): -* Open the invite link in a browser and open the debug panel -* Confirm that the browser peer is connected to at least one other peer, then close the debug panel +Perform transactions: +* An invitation is required to be able to perform transactions; ask an existing user of the app for an invite +* In a browser, close the app if it's already open and then open the invite link +* From the debug panel, confirm that the browser peer is connected to at least one other peer * Check the status for a phisher to be reported in the `Check Phisher Status` section on homepage * Select `Report Phisher` option in the `Pending reports` section, enter multiple phisher records and click on the `Submit batch to p2p network` button; this broadcasts signed invocations to peers on the network, including the watcher peer * Check the watcher container logs to see the message received: @@ -286,7 +301,7 @@ Clear volumes created by this stack: ```bash # List all relevant volumes - docker volume ls -q --filter "name=mobymask_v2*" + docker volume ls -q --filter "name=mobymask_v2" # Expected output: @@ -296,7 +311,7 @@ Clear volumes created by this stack: # Remove all the listed volumes - docker volume rm $(docker volume ls -q --filter "name=mobymask_v2*") + docker volume rm $(docker volume ls -q --filter "name=mobymask_v2") ``` ## Troubleshooting diff --git a/app/data/stacks/mobymask-v2/watcher-p2p-network/web-app.md b/app/data/stacks/mobymask-v2/watcher-p2p-network/web-app.md new file mode 100644 index 00000000..d20dc405 --- /dev/null +++ b/app/data/stacks/mobymask-v2/watcher-p2p-network/web-app.md @@ -0,0 +1,162 @@ +# MobyMask Watcher P2P Network - Web App + +Instructions to setup and deploy the MobyMask app locally, pointed to a watcher on the p2p network + +## Prerequisites + +* Laconic Stack Orchestrator ([installation](/README.md#install)) +* Watcher GQL endpoint + +## Setup + +Build the container images: + + ```bash + laconic-so --stack mobymask-v2 build-containers --include cerc/react-peer,cerc/mobymask-ui + ``` + +Check that the required images are created in the local image registry: + + ```bash + docker image ls + + # Expected output: + + # REPOSITORY TAG IMAGE ID CREATED SIZE + # cerc/react-peer local d66b144dbb53 4 days ago 868MB + # cerc/mobymask-ui local e456bf9937ec 4 days ago 1.67GB + # . + # . + ``` + +## Deploy + +### Configuration + +Create an env file `mobymask-app.env`: + + ```bash + touch mobymask-app.env + ``` + +Add the following contents to `mobymask-app.env`: + + ```bash + # Watcher endpoint used by the app for GQL queries + CERC_APP_WATCHER_URL="http://127.0.0.1:3001" + + + # DO NOT CHANGE THESE VALUES + CERC_DEPLOYED_CONTRACT="0x2B6AFbd4F479cE4101Df722cF4E05F941523EaD9" + CERC_RELAY_NODES=["/dns4/relay1.dev.vdb.to/tcp/443/wss/p2p/12D3KooWAx83SM9GWVPc9v9fNzLzftRX6EaAFMjhYiFxRYqctcW1", "/dns4/relay2.dev.vdb.to/tcp/443/wss/p2p/12D3KooWBycy6vHVEfUwwYRbPLBdb5gx9gtFSEMpErYPUjUkDNkm", "/dns4/relay3.dev.vdb.to/tcp/443/wss/p2p/12D3KooWARcUJsiGCgiygiRVVK94U8BNSy8DFBbzAF3B6orrabwn"] + ``` + +Replace `CERC_APP_WATCHER_URL` with the watcher's endpoint (eg. `https://mobymask.example.com`) + +### Deploy the stack + +```bash +laconic-so --stack mobymask-v2 deploy --cluster mm_v2 --include mobymask-app --env-file mobymask-app.env up lxdao-mobymask-app + +# Expected output (ignore the "The X variable is not set. Defaulting to a blank string." warnings): + +# [+] Running 4/4 +# ✔ Network mm_v2_default Created 0.1s +# ✔ Volume "mm_v2_peers_ids" Created 0.0s +# ✔ Volume "mm_v2_mobymask_deployment" Created 0.0s +# ✔ Container mm_v2-lxdao-mobymask-app-1 Started 1.1s +``` + +This will run the `lxdao-mobymask-app` (at `http://localhost:3004`) pointed to `CERC_APP_WATCHER_URL` for GQL queries + +To monitor the running container: + + ```bash + # With status + docker ps + + # Expected output: + + # CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES + # f1369dbae1c9 cerc/mobymask-ui:local "docker-entrypoint.s…" 2 minutes ago Up 2 minutes (healthy) 0.0.0.0:3004->80/tcp mm_v2-lxdao-mobymask-app-1 + + # Check logs for a container + docker logs -f mm_v2-lxdao-mobymask-app-1 + + # Expected output: + + # . + # . + # . + # Available on: + # http://127.0.0.1:80 + # http://192.168.0.2:80 + # Hit CTRL-C to stop the server + ``` + +Note: For opening an invite link on this deployed app, replace the URL part before `/#` with `http://localhost:3004` +For example: `http://localhost:3004/#/members?invitation=XYZ` + +In order to host the app using a public domain, configure your website with SSL and `https` traffic reverse proxied to port `3004`. + +For example, a Nginx configuration for domain `my-mobymask-app.example.com` would look something like: + + ```bash + server { + server_name my-mobymask-app.example.com; + + location / { + proxy_pass http://localhost:3004; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } + + listen [::]:443 ssl; + listen 443 ssl; + ssl_certificate /etc/letsencrypt/live/my-mobymask-app.example.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/my-mobymask-app.example.com/privkey.pem; + include /etc/letsencrypt/options-ssl-nginx.conf; + ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; + } + + server { + if ($host = my-mobymask-app.example.com) { + return 301 https://$host$request_uri; + } # managed by Certbot + + server_name my-mobymask-app.example.com; + listen 80; + return 404; # managed by Certbot + } + ``` + +## Clean up + +Stop all services running in the background: + + ```bash + laconic-so --stack mobymask-v2 deploy --cluster mm_v2 --include mobymask-app down + + # Expected output: + + # [+] Running 2/2 + # ✔ Container mm_v2-lxdao-mobymask-app-1 Removed 10.6s + # ✔ Network mm_v2_default Removed 0.5s + ``` + +Clear volumes created by this stack: + + ```bash + # List all relevant volumes + docker volume ls -q --filter "name=mm_v2" + + # Expected output: + + # mm_v2_mobymask_deployment + # mm_v2_peers_ids + + # Remove all the listed volumes + docker volume rm $(docker volume ls -q --filter "name=mm_v2") + ``` diff --git a/app/data/stacks/mobymask-v2/web-apps.md b/app/data/stacks/mobymask-v2/web-apps.md index 76293f1f..42f05095 100644 --- a/app/data/stacks/mobymask-v2/web-apps.md +++ b/app/data/stacks/mobymask-v2/web-apps.md @@ -28,10 +28,6 @@ Create and update an env file to be used in the next step ([defaults](../../conf # Also add if running MobyMask app: - # External watcher endpoint (to check if watcher is up) - CERC_WATCHER_HOST= - CERC_WATCHER_PORT= - # Watcher endpoint used by the app for GQL queries CERC_APP_WATCHER_URL="http://127.0.0.1:3001" @@ -50,7 +46,7 @@ For running mobymask-app ```bash laconic-so --stack mobymask-v2 deploy --include mobymask-app --env-file up -# Runs on host port 3002 +# Runs mobymask-app on host port 3002 and lxdao-mobymask-app on host port 3004 ``` For running peer-test-app