Package siren (docker) (#236)

Co-authored-by: Mavrik <mrricki.m.usmc@gmail.com>

.env.example

@@ -4,3 +4,4 @@ BEACON_URL=http://your-BN-ip:5052
 VALIDATOR_URL=http://your-VC-ip:5062
 API_TOKEN=get-it-from-'.lighthouse/validators/api-token.txt'
 SESSION_PASSWORD="your-password"
+SSL_ENABLED=true

Dockerfile

@@ -0,0 +1,44 @@
+ARG node_version=18.18
+ARG node_image=node:${node_version}
+
+FROM $node_image AS builder
+
+COPY . /app/
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=development
+
+WORKDIR /app
+RUN yarn --network-timeout 300000
+WORKDIR /app/backend
+RUN yarn --network-timeout 300000
+
+ENV NODE_ENV=production 
+
+RUN yarn build 
+WORKDIR /app
+RUN yarn build
+
+FROM node:${node_version}-alpine AS production
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+RUN npm install --global pm2
+RUN apk add -U nginx openssl
+
+COPY ./docker-assets /app/docker-assets/
+RUN rm /etc/nginx/http.d/default.conf; \
+    ln -s /app/docker-assets/siren-http.conf /etc/nginx/http.d/siren-http.conf
+
+COPY --from=builder /app/backend/package.json /app/backend/package.json
+COPY --from=builder /app/backend/node_modules /app/backend/node_modules
+COPY --from=builder /app/backend/dist /app/backend/dist
+
+COPY --from=builder /app/siren.js /app/siren.js
+COPY --from=builder /app/package.json /app/package.json
+COPY --from=builder /app/node_modules /app/node_modules
+COPY --from=builder /app/public /app/public
+COPY --from=builder /app/.next /app/.next
+
+ENTRYPOINT /app/docker-assets/docker-entrypoint.sh

Dockerfile.dev

@@ -3,7 +3,14 @@ ARG node_image=node:${node_version}
 
 FROM $node_image AS dev
 
+RUN apt update;\
+    apt install -y nginx 
+
 COPY . /app/
+RUN rm /etc/nginx/sites-enabled/default; \
+    rm /etc/nginx/conf.d/default.conf; \
+    ln -s /app/docker-assets/siren-http.conf /etc/nginx/conf.d/siren-http.conf
+
 ENV NODE_ENV=development
 
 WORKDIR /app/backend
@@ -12,6 +19,6 @@ RUN yarn --network-timeout 300000
 WORKDIR /app
 RUN yarn --network-timeout 300000
 
-ENTRYPOINT /app/docker-entrypoint-dev.sh
+ENTRYPOINT /app/docker-assets/docker-entrypoint-dev.sh
 
 # run with docker run --rm -ti -p 3000:3000 -v $PWD/.env:/app/.env:ro your-image-name

README.md

@@ -56,37 +56,38 @@ $ yarn dev
 #### Docker (Recommended)
 
 Docker is the recommended way to run a webserver that hosts Siren and can be
-connected to via a web browser. For now, we only have a development docker image.
+connected to via a web browser.
 
 `docker` is required to be installed with the service running.
 
-Recommended config for using the development docker image (assuming the BN/VC API's are exposed on your localhost):
+Recommended config for using the docker image (assuming the BN/VC API's are exposed on your localhost):
 
 ```
 PORT=3000
 BACKEND_URL=http://127.0.0.1:3001
 VALIDATOR_URL=http://host.docker.internal:5062
 BEACON_URL=http://host.docker.internal:5052
+SSL_ENABLED=true
 ```
 
 The docker image can be built and run with the following commands:
 ```
-$ docker build -f Dockerfile.dev -t siren .
+$ docker build -f Dockerfile -t siren .
 ```
 
 Then to run the image:
 
 ```
-$ docker run --rm -ti -p 3000:3000 -v $PWD/.env:/app/.env:ro siren
+$ docker run --rm -ti --name siren -p 3443:443 -v $PWD/.env:/app/.env:ro siren
 ```
 Linux users may want to add this flag: 
 `--add-host=host.docker.internal:host-gateway`
 
+This will open port 3443 and allow your browser to connect. 
 
-This will open port 3000 and allow your browser to connect. 
-
-To view Siren, simply go to `http://localhost:3000` in your web browser.
+To start Siren, visit `https://localhost:3443` in your web browser. (ignore the certificate warning). 
 
+Advanced users can mount their own certificate with `-v $PWD/certs:/certs` (the config expects 3 files: `/certs/cert.pem` `/certs/key.pem` `/certs/key.pass`)
 
 # Running a Local Testnet
 

app/Main.tsx

@@ -105,9 +105,9 @@ const Main = () => {
         Cookies.set('session-token', token)
       }
 
-    } catch (e) {
+    } catch (e: any) {
       setLoading(false)
-      displayToast(t(e.response.data.error), ToastType.ERROR)
+      displayToast(t(e.response.data.error as string), ToastType.ERROR)
     }
   }
 

app/api/authenticate/route.ts

@@ -17,7 +17,7 @@ export async function POST(req: Request) {
     const token = res.data.access_token
 
     return NextResponse.json({token}, {status: 200})
-  } catch (error) {
+  } catch (error: any) {
     let message = error?.response?.data?.message
 
     if(!message) {

app/error/Main.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useTranslation } from 'react-i18next';
+import Button, { ButtonFace } from '../../src/components/Button/Button';
+import Typography from '../../src/components/Typography/Typography';
+
+const Main = () => {
+  const {t} = useTranslation()
+  return (
+    <div className="relative space-y-12 z-50 w-96 -translate-x-96">
+      <div>
+        <Typography darkMode="text-white" isBold color="text-white" type="text-h2">{t('errorPage.title')}</Typography>
+        <Typography color="text-white" darkMode="text-white" type="text-subtitle3">{t('error.title')}</Typography>
+      </div>
+      <div>
+        <Button href="/" type={ButtonFace.SECONDARY}>{t('errorPage.cta')}</Button>
+      </div>
+    </div>
+  )
+}
+
+export default Main

app/error/page.tsx

@@ -1,12 +1,9 @@
 import '../../src/global.css';
-import { useTranslation } from 'react-i18next';
 import Lighthouse from '../../src/assets/images/lightHouse.svg'
-import Button, { ButtonFace } from '../../src/components/Button/Button';
 import TopographyCanvas from '../../src/components/Topography/Topography';
-import Typography from '../../src/components/Typography/Typography';
+import Main from './Main';
 
 export default async function Page() {
-  const {t} = useTranslation()
   return (
     <div className='relative w-screen h-screen flex items-center justify-center bg-gradient-to-r from-primary to-tertiary'>
       <div className="absolute top-1/2 left-1/2 -translate-x-1/4 -translate-y-1/2 w-fit rounded-full overflow-hidden">
@@ -15,15 +12,7 @@ export default async function Page() {
           <Lighthouse className="text-white w-[500px] h-[500px]"  />
         </div>
       </div>
-      <div className="relative space-y-12 z-50 w-96 -translate-x-96">
-        <div>
-          <Typography darkMode="text-white" isBold color="text-white" type="text-h2">{t('errorPage.title')}</Typography>
-          <Typography color="text-white" darkMode="text-white" type="text-subtitle3">{t('error.title')}</Typography>
-        </div>
-        <div>
-          <Button href="/" type={ButtonFace.SECONDARY}>{t('errorPage.cta')}</Button>
-        </div>
-      </div>
+      <Main/>
     </div>
   )
 }

docker-assets/docker-entrypoint-dev.sh

@@ -0,0 +1,24 @@
+#!/bin/bash 
+
+set -a; \
+. /app/.env; \
+set +a
+
+if [ $SSL_ENABLED = true ] ; then 
+  ## generate cert if not present 
+  if [ ! -f /certs/cert.pem ] ; then 
+    openssl req -x509 -newkey rsa:4096 -keyout /certs/key.pem -out /certs/cert.pem -days 365 -passout pass:'sigmaprime' -subj "/C=AU/CN=siren/emailAddress=noreply@sigmaprime.io"
+    echo 'sigmaprime' > /certs/key.pass
+  fi
+  ## nginx ssl stuff
+    ln -s /app/docker-assets/siren-https.conf /etc/nginx/conf.d/siren-https.conf
+fi
+
+nginx & 
+
+cd /app/backend
+yarn start & 
+
+cd /app
+
+yarn dev

docker-assets/docker-entrypoint.sh

@@ -0,0 +1,24 @@
+#!/bin/ash
+
+set -a; \
+. /app/.env; \
+set +a
+
+if [ $SSL_ENABLED = true ] ; then
+  ## generate cert if not present
+  if [ ! -f /certs/cert.pem ] ; then
+    mkdir -p /certs
+    openssl req -x509 -newkey rsa:4096 -keyout /certs/key.pem -out /certs/cert.pem -days 365 -passout pass:'sigmaprime' -subj "/C=AU/CN=siren/emailAddress=noreply@sigmaprime.io"
+    echo 'sigmaprime' > /certs/key.pass
+  fi
+  ## nginx ssl stuff
+    ln -s /app/docker-assets/siren-https.conf /etc/nginx/http.d/siren-https.conf
+fi
+
+nginx &
+
+cd /app/backend
+PM2_HOME='~/.pm2-backend' pm2-runtime yarn --interpreter sh -- start:prod &
+
+cd /app
+PM2_HOME='~/.pm2-frontend' pm2-runtime yarn --interpreter sh -- start 

docker-assets/siren-http.conf

@@ -0,0 +1,7 @@
+server {
+    listen       80  default_server;
+
+    location / {
+        proxy_pass http://localhost:3000;
+    }
+}

docker-assets/siren-https.conf

@@ -0,0 +1,13 @@
+server {
+    server_name         _;
+    listen              443 ssl;
+    ssl_certificate     /certs/cert.pem;
+    ssl_certificate_key /certs/key.pem;
+    ssl_password_file   /certs/key.pass;
+    ssl_protocols       TLSv1.3;
+    ssl_ciphers         HIGH:!aNULL:!MD5;
+
+    location / {
+        proxy_pass http://localhost:3000;
+    }
+}

package.json

@@ -17,8 +17,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^29.2.3",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
+    "@types/node": "20.14.5",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18.0.0",
     "@uiw/react-textarea-code-editor": "^2.1.1",
     "autoprefixer": "^9",
@@ -62,7 +62,7 @@
     "tailwindcss": "^3.1.8",
     "tailwindcss-scoped-groups": "^2.0.0",
     "ts-jest": "^29.0.3",
-    "typescript": "*",
+    "typescript": "5.4.5",
     "wait-on": "5.1.0",
     "web-vitals": "^2.1.0",
     "xmlbuilder": "^15.1.1",

src/components/SSELogProvider/SSELogProvider.tsx

@@ -28,7 +28,7 @@ const SSELogProvider: FC<SSELogWrapperProps> = React.memo(function ({ children,
   const [, setTrigger] = useState(false)
   const setBeaconNetworkError = useSetRecoilState(beaconNetworkError)
   const setValidatorNetworkError = useSetRecoilState(validatorNetworkError)
-  const [intervalId, setIntervalId] = useState<NodeJS.Timer | undefined>(undefined)
+  const [intervalId, setIntervalId] = useState<any | undefined>(undefined)
   const [isReady, setReady] = useState(false)
 
   useEffect(() => {