Cloudflare上のRemixからTCPでデータベースへ直接接続する

$ npx create-remix@latest

$ npm install -D @types/pg
$ npm install pg

+ node_compat = true

import { Client } from 'pg'

export async function connection() {
  const client = new Client(<database connection url>)
  await client.connect()
  return client
}

import { useLoaderData } from "@remix-run/react"
import { connection } from "~/lib/db.server"

export const loader = async () => {
  const client = await connection()
  const result = await client.query({
    text: 'SELECT * FROM "tablename"'
  })

  return { result: JSON.stringify(result.rows[0]) }
}

export default function Test() {
  const { result } = useLoaderData<typeof loader>()

  return (
    <>
      test: {result}
    </>
  )
}

✘ [ERROR] Could not resolve "dns"

    node_modules/pg/lib/connection-parameters.js:3:18:
      3 │ var dns = require('dns')
        ╵                   ~~~~~

  The package "dns" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


✘ [ERROR] Could not resolve "net"

    node_modules/pg/lib/connection.js:3:18:
      3 │ var net = require('net')
        ╵                   ~~~~~

  The package "net" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

$ npm install -D remix-esbuild-override @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill

  "scripts": {
    "postinstall": "remix-esbuild-override",
    ...
  }

import { withEsbuildOverride } from "remix-esbuild-override";
import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";

withEsbuildOverride((option, { isServer, isDev }) => {
  // update the option
  option.plugins = [
    NodeGlobalsPolyfills['default']({ buffer: true }),
    NodeModulesPolyfills['default'](),
    ...option.plugins,
  ];

  return option;
});

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ...
}