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

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
+    command: ["sh", "mobymask-app-start.sh"]
-    # 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
     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
+    command: ["sh", "mobymask-app-start.sh"]
-    # 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
     volumes:
       - ../config/wait-for-it.sh:/scripts/wait-for-it.sh
       - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh

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:
+    command: ["sh", "test-app-start.sh"]
-      - 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
     volumes:
       - ../config/wait-for-it.sh:/scripts/wait-for-it.sh
       - ../config/watcher-mobymask-v2/test-app-start.sh:/scripts/test-app-start.sh

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 [ -z "$CERC_DEPLOYED_CONTRACT" ]; then
-if [ -f /server/config.json ]; 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 '"')

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

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 /etc/letsencrypt/live/mobymask.example.com/fullchain.pem; # managed by Certbot
-    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.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:
+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
-* Visit https://mobymask-lxdao-app.dev.vdb.to/
+
+Connect a browser peer to the watcher's relay node:
 * Click on debug panel on bottom right of the homepage
 * Select `<custom>` 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):
+Perform transactions:
-* Open the invite link in a browser and open the debug panel
+* An invitation is required to be able to perform transactions; ask an existing user of the app for an invite
-* Confirm that the browser peer is connected to at least one other peer, then close the debug panel
+* 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

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")
+  ```

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 <PATH_TO_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