[PIE-14] More robust API proxy (!7)

Finally! Using an Astro API Route to handle all the queries which works like a dream. Also created a custom function to get the relative path for image files, fixing any external access issues.
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

Dockerfile

@@ -9,5 +9,5 @@ ENV PUBLIC_URL=http://localhost:4321
 RUN npm run build
 
 EXPOSE 4321
-CMD ["npm", "run", "dev", "--", "--host"]
+# CMD ["npm", "run", "dev", "--", "--host"]
-# CMD [ "node", "dist/sever/entry.mjs"]
+CMD [ "npm", "run", "preview", "--", "--host" ]

astro.config.mjs

@@ -19,16 +19,5 @@ export default defineConfig({
 
   vite: {
     plugins: [tailwindcss()],
-    server: {
-      proxy: {
-        // The idea is to proxy the Pocketbase connection to the current domain so the user doesn't have to open two ports
-        // Currently works in dev (npm run dev -- --host) with the correct PUBLIC_URL var set but not through docker
-        '/api': {
-          target: PUBLIC_PB_URL,
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '/api'),
-        },
-      }
-    }
   }
 });

docker-compose.yml

@@ -2,7 +2,6 @@ services:
   web:
     build: .
     env_file: .env
-    network_mode: host
     ports:
       - "4321:4321"
 

src/components/Card/OverviewCard.astro

@@ -5,7 +5,7 @@ import TagRow from "./TagRow.astro"
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
-const image = await client.files.getURL(headerImage, headerImage.image)
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">

src/components/Detail/ImageCarousel.astro

@@ -4,7 +4,7 @@ const { class: className, recipe } = Astro.props
 
 async function getLink(img: string) {
     const record = await client.collection("images").getOne(img)
-    const link = await client.files.getURL(record, record.image)
+    const link = await client.files.getRelativeURL(record, record.image)
     return link
 }
 

src/data/pocketbase.ts

@@ -1,5 +1,12 @@
 import Pocketbase from "pocketbase"
 
-const client = new Pocketbase(import.meta.env.PUBLIC_URL)
+const client = new Pocketbase("http://localhost:4321")
 client.autoCancellation(false)
+
+// Return a relative url for file instead of full path including localhost, which breaks external access
+client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
+    const res = client.files.getURL(record, filename)
+    return res.substring(21)
+}
+
 export default client;

src/pages/api/[...proxy].ts

@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+
+// THANK YOU https://stackoverflow.com/a/77297521 !!!!!!!
+
+const getProxyUrl = (request: Request) => {
+  const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
+  const requestUrl = new URL(request.url);
+
+  return new URL(requestUrl.pathname, proxyUrl);
+};
+
+export const ALL: APIRoute = async ({ request }) => {
+  const proxyUrl = getProxyUrl(request);
+  const response = await fetch(proxyUrl.href, request);
+  return new Response(response.body);
+};