Add instructions to run MobyMask app with a watcher on network #368

Merged
prathamesh0 merged 7 commits from pm-web-app-doc into main 2023-04-25 13:02:38 +00:00
7 changed files with 204 additions and 42 deletions

View File

@ -15,12 +15,7 @@ services:
CERC_RELAY_NODES: ${CERC_RELAY_NODES} CERC_RELAY_NODES: ${CERC_RELAY_NODES}
CERC_BUILD_DIR: "@cerc-io/mobymask-ui/build" CERC_BUILD_DIR: "@cerc-io/mobymask-ui/build"
working_dir: /scripts 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: volumes:
- ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/wait-for-it.sh:/scripts/wait-for-it.sh
- ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.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_RELAY_NODES: ${CERC_RELAY_NODES}
CERC_BUILD_DIR: "@cerc-io/mobymask-ui-lxdao/build" CERC_BUILD_DIR: "@cerc-io/mobymask-ui-lxdao/build"
working_dir: /scripts 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: volumes:
- ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/wait-for-it.sh:/scripts/wait-for-it.sh
- ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh - ../config/watcher-mobymask-v2/mobymask-app-start.sh:/scripts/mobymask-app-start.sh

View File

@ -10,10 +10,7 @@ services:
environment: environment:
CERC_SCRIPT_DEBUG: ${CERC_SCRIPT_DEBUG} CERC_SCRIPT_DEBUG: ${CERC_SCRIPT_DEBUG}
CERC_RELAY_NODES: ${CERC_RELAY_NODES} 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: volumes:
- ../config/wait-for-it.sh:/scripts/wait-for-it.sh - ../config/wait-for-it.sh:/scripts/wait-for-it.sh
- ../config/watcher-mobymask-v2/test-app-start.sh:/scripts/test-app-start.sh - ../config/watcher-mobymask-v2/test-app-start.sh:/scripts/test-app-start.sh

View File

@ -17,9 +17,13 @@ fi
echo "Using CERC_RELAY_NODES $CERC_RELAY_NODES" 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" 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 # Get deployed contract address and chain id
CERC_DEPLOYED_CONTRACT=$(jq -r '.address' /server/config.json | tr -d '"') CERC_DEPLOYED_CONTRACT=$(jq -r '.address' /server/config.json | tr -d '"')

View File

@ -1,8 +1,6 @@
# Defaults # Defaults
# Watcher endpoint # Watcher endpoint
DEFAULT_CERC_WATCHER_HOST="mobymask-watcher-server"
DEFAULT_CERC_WATCHER_PORT=3001
DEFAULT_CERC_APP_WATCHER_URL="http://localhost:3001" DEFAULT_CERC_APP_WATCHER_URL="http://localhost:3001"
# Set of relay peers to connect to from the relay node # Set of relay peers to connect to from the relay node

View File

@ -81,10 +81,11 @@ Add the following contents to `mobymask-watcher.env`:
```bash ```bash
# Domain to be used in the relay node's announce address # 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 # DO NOT CHANGE THESE VALUES
CERC_L2_GETH_RPC="https://mobymask-l2.dev.vdb.to"
CERC_DEPLOYED_CONTRACT="0x2B6AFbd4F479cE4101Df722cF4E05F941523EaD9" CERC_DEPLOYED_CONTRACT="0x2B6AFbd4F479cE4101Df722cF4E05F941523EaD9"
CERC_ENABLE_PEER_L2_TXS=false 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"] 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 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 * 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: 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 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.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 ## 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 ```bash
server { 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 # https://nginx.org/en/docs/http/websocket.html
location / { 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 ipv6only=on; # managed by Certbot
listen 443 ssl; # 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 include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
} }
server { server {
if ($host = example.com) { if ($host = mobymask.example.com) {
return 301 https://$host$request_uri; return 301 https://$host$request_uri;
} # managed by Certbot } # managed by Certbot
listen 80; listen 80;
listen [::]:80; listen [::]:80;
server_name example.com; server_name mobymask.example.com;
return 404; # managed by Certbot 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 * 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 * 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 * 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 * 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 * 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 * 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: * Check the watcher container logs to see the message received:
@ -286,7 +301,7 @@ Clear volumes created by this stack:
```bash ```bash
# List all relevant volumes # List all relevant volumes
docker volume ls -q --filter "name=mobymask_v2*" docker volume ls -q --filter "name=mobymask_v2"
# Expected output: # Expected output:
@ -296,7 +311,7 @@ Clear volumes created by this stack:
# Remove all the listed volumes # 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 ## Troubleshooting

View File

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

View File

@ -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: # 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 # Watcher endpoint used by the app for GQL queries
CERC_APP_WATCHER_URL="http://127.0.0.1:3001" CERC_APP_WATCHER_URL="http://127.0.0.1:3001"
@ -50,7 +46,7 @@ For running mobymask-app
```bash ```bash
laconic-so --stack mobymask-v2 deploy --include mobymask-app --env-file <PATH_TO_ENV_FILE> up 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 For running peer-test-app