Move ngrok to docker compose

.docker/pizzly-server.env.example

@@ -0,0 +1,7 @@
+SERVER_HOST=http://localhost
+SERVER_PORT=3004
+NODE_ENV=development
+PIZZLY_DB_HOST=db
+PIZZLY_DB_USER=postgres
+PIZZLY_DB_PASSWORD=postgres
+PIZZLY_DB_NAME=postgres

.docker/pizzly_proxy.env.example

@@ -0,0 +1,5 @@
+NGROK_SUBDOMAIN=<custom subdomain>
+NGROK_AUTH=<auth token>
+NGROK_PORT=3004
+NGROK_PROTOCOL=http
+NGROK_DEBUG=true

.docker/webapp_proxy.env.example

@@ -0,0 +1,5 @@
+NGROK_SUBDOMAIN=<custom subdomain>
+NGROK_AUTH=<auth token>
+NGROK_PORT=3004
+NGROK_PROTOCOL=http
+NGROK_DEBUG=true

.gitignore

@@ -31,6 +31,7 @@ yarn-error.log*
 
 # local env files
 .env.docker
+.docker/*.env
 .env.local
 .env.development.local
 .env.test.local

DEVELOPMENT.md

@@ -45,7 +45,21 @@ export PULSAR_CPP_DIR=/opt/homebrew/Cellar/libpulsar/3.1.0
 
    Then you will need to fill in the fields with real values.
 
-3. Start postgresql, pulsar, and the pizzly server
+   You also need to create three `.env` files under the `.docker` directory:
+
+   ```sh
+   cp ./.docker/pizzly-server.env.example ./.docker/pizzly-server.env
+   cp ./.docker/pizzly_proxy.env.example ./.docker/pizzly_proxy.env
+   cp ./.docker/webapp_proxy.env.example ./.docker/webapp_proxy.env
+   ```
+
+   In `webapp_proxy` and `pizzly_proxy` make sure you fill in the `NGROK_SUBDOMAIN` and `NGROK_AUTH` environment variables. For example, in `webapp_proxy` and `pizzly_proxy` you could have something like `dan-trigger-dev` and `dan-pizzly-dev` respectively for the `NGROK_SUBDOMAIN` env var.
+
+   Next, update the `SERVER_HOST` env var in the `pizzly-server.env` env file with the value provided to the `NGROK_SUBDOMAIN` in the `pizzly_proxy.env` file. Using the example above the `SERVER_HOST` would be `SERVER_HOST=https://dan-pizzly-dev.ngrok.io`
+
+   Also, in `webapp/.env`, set the `APP_ORIGIN` to the `NGROK_SUBDOMAIN` provided to the `webapp_proxy.env` file, e.g. `APP_ORIGIN=https://dan-trigger-dev.ngrok.io`
+
+3. Start postgresql, pulsar, pizzly server, and the two ngrok proxies
 
    ```bash
    pnpm run docker:db

apps/webapp/app/entry.server.tsx

@@ -3,7 +3,6 @@ import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 import * as Sentry from "@sentry/remix";
 import * as MessageBroker from "~/services/messageBroker.server";
-import * as WebhookProxy from "~/services/webhookProxy.server";
 import { prisma } from "./db.server";
 
 export default function handleRequest(
@@ -37,4 +36,3 @@ if (process.env.NODE_ENV === "production" && process.env.SENTRY_DSN) {
 }
 
 MessageBroker.init();
-WebhookProxy.init();

apps/webapp/app/env.server.ts

@@ -30,8 +30,6 @@ const EnvironmentSchema = z.object({
     .string()
     .default("0")
     .transform((v) => v === "1"),
-  NGROK_AUTH_TOKEN: z.string().optional(),
-  NGROK_SUBDOMAIN: z.string().optional(),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/services/externalSources/registerExternalSource.server.ts

@@ -3,9 +3,9 @@ import { github } from "internal-integrations";
 import crypto from "node:crypto";
 import type { PrismaClient } from "~/db.server";
 import { prisma } from "~/db.server";
+import { env } from "~/env.server";
 import { findExternalSourceById } from "~/models/externalSource.server";
 import { pizzly } from "../pizzly.server";
-import { originOrProxyUrl } from "../webhookProxy.server";
 
 export class RegisterExternalSource {
   #prismaClient: PrismaClient;
@@ -53,7 +53,7 @@ export class RegisterExternalSource {
 
     const secret = crypto.randomBytes(32).toString("hex");
 
-    const webhookUrl = `${originOrProxyUrl}/api/v1/internal/webhooks/${connection.apiIdentifier}/${externalSource.id}`;
+    const webhookUrl = `${env.APP_ORIGIN}/api/v1/internal/webhooks/${connection.apiIdentifier}/${externalSource.id}`;
 
     const serviceWebhook = await this.#registerWebhookWithConnection(
       externalSource.service,

apps/webapp/app/services/webhookProxy.server.ts

@@ -1,33 +0,0 @@
-import ngrok from "ngrok";
-import { env } from "~/env.server";
-
-let originOrProxyUrl: string;
-
-declare global {
-  var __origin_or_proxy_url__: string;
-}
-
-export async function init() {
-  if (originOrProxyUrl) {
-    return;
-  }
-
-  if (env.NODE_ENV === "production" || !env.NGROK_AUTH_TOKEN) {
-    originOrProxyUrl = env.APP_ORIGIN;
-  } else {
-    if (!global.__origin_or_proxy_url__) {
-      const proxyUrl = await ngrok.connect({
-        addr: process.env.REMIX_APP_PORT || 3000,
-        authtoken: env.NGROK_AUTH_TOKEN,
-        subdomain: env.NGROK_SUBDOMAIN,
-      });
-
-      console.log(`🚧 Initiated Proxy URL: ${proxyUrl} 🚧`);
-
-      global.__origin_or_proxy_url__ = proxyUrl;
-    }
-    originOrProxyUrl = global.__origin_or_proxy_url__;
-  }
-}
-
-export { originOrProxyUrl };

docker-compose.yml

@@ -21,23 +21,25 @@ services:
     networks:
       - app_network
   pizzly-server:
-    image: nangohq/pizzly-server:0.4.3
+    image: nangohq/pizzly-server
     container_name: pizzly-server
     restart: always
-    environment:
-      - SERVER_HOST=http://localhost
-      - SERVER_PORT=3004
-      - NODE_ENV=development
-      - NANGO_DB_HOST=db
-      - NANGO_DB_USER=postgres
-      - NANGO_DB_PASSWORD=postgres
-      - NANGO_DB_NAME=postgres
+    env_file:
+      - .docker/pizzly-server.env
     ports:
       - "3004:3004"
     depends_on:
       - db
     networks:
       - app_network
+  pizzly_proxy:
+    image: wernight/ngrok
+    env_file:
+      - .docker/pizzly_proxy.env
+  webapp_proxy:
+    image: wernight/ngrok
+    env_file:
+      - .docker/webapp_proxy.env
   pulsar:
     image: apachepulsar/pulsar:2.10.2
     ports:
@@ -50,6 +52,7 @@ services:
     tty: true
     stdin_open: true
     restart: always
+  
 
 networks:
   app_network: