reverse proxy

app/src/env.d.ts

@@ -1,5 +0,0 @@
-interface ImportMeta {
-  env: {
-    QUOT_API_URL: string;
-  };
-}

app/src/pages/index.tsx

@@ -4,9 +4,7 @@ import Cards from "../components/cards";
 import Card from "../components/card";
 
 async function fetchPages(): Promise<Pages.Response> {
-  const res = await fetch(
-    new URL("/pages?order=updated.desc", import.meta.env.QUOT_API_URL)
-  );
+  const res = await fetch("/api/pages?order=updated.desc");
   const data = (await res.json()) as Pages.Response;
   return data;
 }

app/src/pages/page.tsx

@@ -11,29 +11,21 @@ async function updatePage(
   id: number,
   content: Pages.RequestContentPage
 ): Promise<boolean> {
-  const res = await fetch(
-    new URL(`/pages?id=eq.${id}`, import.meta.env.QUOT_API_URL),
-    {
-      method: "PUT",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify(content),
-    }
-  );
+  const res = await fetch(`/api/pages?id=eq.${id}`, {
+    method: "PUT",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(content),
+  });
   return res.ok;
 }
 
 async function deletePage(id: number): Promise<boolean> {
-  const res = await fetch(
-    new URL(`/pages?id=eq.${id}`, import.meta.env.QUOT_API_URL),
-    { method: "DELETE" }
-  );
+  const res = await fetch(`/api/pages?id=eq.${id}`, { method: "DELETE" });
   return res.ok;
 }
 
 async function fetchPage(id: number): Promise<Pages.ResponsePage> {
-  const res = await fetch(
-    new URL(`/pages?id=eq.${id}`, import.meta.env.QUOT_API_URL)
-  );
+  const res = await fetch(`/api/pages?id=eq.${id}`);
   const data = (await res.json()) as Pages.Response;
   return data[0]!;
 }

app/src/server.ts

@@ -19,24 +19,22 @@ async function main() {
       bundle: true,
       minify: true,
       entryPoints: [scriptPath],
-      define: {
-        "import.meta.env.QUOT_API_URL": JSON.stringify(apiUrl),
-      },
     }
   );
 
   const handler: http.RequestListener = (req, res) => {
+    const api = req.url?.startsWith("/api/") && new URL(apiUrl);
     const options = {
-      hostname: result.host,
-      port: result.port,
-      path: req.url,
+      hostname: /**/ api ? api.hostname /*                 */ : result.host,
+      port: /*    */ api ? api.port /*                     */ : result.port,
+      path: /*    */ api ? req.url?.slice("/api".length) /**/ : req.url,
       method: req.method,
       headers: req.headers,
     };
 
     const proxyReq = http.request(options, (proxyRes) => {
-      if (proxyRes.statusCode === 200) {
-        res.writeHead(proxyRes.statusCode, proxyRes.headers);
+      if (api || proxyRes.statusCode === 200) {
+        res.writeHead(proxyRes.statusCode ?? 500, proxyRes.headers);
         proxyRes.pipe(res);
       } else {
         res.writeHead(200, { "Content-Type": "text/html" });

compose.yml

@@ -8,10 +8,12 @@ services:
     ports: ["8080:8080"]
     volumes:
       - ./app:/app
+    environment:
+      QUOT_API_URL: http://api:3000/
+    depends_on: [api]
   api:
     image: postgrest/postgrest:v10.0.0
     restart: unless-stopped
-    ports: ["127.0.0.1:3000:3000"]
     environment:
       PGRST_DB_URI: postgresql://postgres:${POSTGRES_PASSWORD}@/postgres?host=/var/run/postgresql
       PGRST_DB_SCHEMA: public