如何通过Docker部署基于Node.js+Uppy的前端项目？

刚接触Node.js/前端领域，对各类框架不太熟悉。我做了个本地可运行的Node.js项目，用Uppy前端框架实现了简单的上传Demo，后端上传用tus.io提供支持，本地通过vite执行yarn start启动服务。

现在需要把这个项目用Docker部署，方便展示给同事看，不用追求界面美观。

已尝试的部署方式：

• 使用标准HTTP服务器，出现.js文件非cjs格式的错误，后续浏览器报错：Uncaught TypeError: The specifier “@uppy/core” was a bare specifier, but was not remapped to anything
• 在Docker中直接运行vite，出现内存溢出错误：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
• 尝试用webpack打包，全程失败，大多是cjs相关的错误

项目文件内容 #

index.html #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Node.js + Uppy Example</title>
</head>
<body>
    <noscript>The app requires JavaScript to be enabled.</noscript>
    <button id="modalVisit">Upload To Visit</button>
    <script src="./upload_to_visit.js" type="module"></script>
    <noscript>The app requires JavaScript to be enabled.</noscript>
    <button id="modalDataset">Upload To Dataset</button>
    <script src="./upload_to_dataset.js" type="module"></script>
</body>
</html>

upload_to_visit.js #

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard';
import Tus from '@uppy/tus'
import GoldenRetriever from '@uppy/golden-retriever';

import '@uppy/core/dist/style.css'
import '@uppy/drag-drop/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';

const uppy = new Uppy({
    debug: true,
    autoProceed: false,
})

uppy.use(Dashboard, {
    inline: false,
    trigger:"#modalDataset",
    target: 'body',
    note:"to upload to a dataset",
    proudlyDisplayPoweredByUppy: false,
    showProgressDetails: true,
    fileManagerSelectionType:"files",
})

uppy.use(Tus, { endpoint: 'http://127.0.0.1:3000/files/datasets/' });
uppy.use(GoldenRetriever);

注：已知需要修改上述代码中的URL以适配Docker网络

package.json #

{
  "name": "node_uppy",
  "version": "0.0.0",
  "type": "module",
  "dependencies": {
    "@uppy/core": "^3.3.1",
    "@uppy/drag-drop": "^3.0.2",
    "@uppy/dashboard": "",
    "@uppy/tus": "^3.1.2",
    "@uppy/golden-retriever": "^3.1.0",
    "formidable": "^3.5.0"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.3",
    "vite": "^4.0.0"
  },
  "private": true,
  "scripts": {
    "build": "npm-run-all --parallel",
    "start": "npm-run-all --parallel start:client",
    "start:client": "vite"
  }
}

内容的提问来源于stack exchange，提问作者WhatTheWhat