从Docker文件中提供一个Node项目

huangapple
go评论135阅读模式
英文:

Serving up a node project from within a docker file

问题

我对Node.js和前端世界还不太熟悉，各种框架让我感到困惑。

我有一个可以在本地运行的Node项目。我使用uppy前端框架和tus.io来处理后端上传，已经实现了一个简单的概念验证。我使用yarn start命令使用vite在本地提供所有内容。

我想从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文件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Node.js + Uppy Example</title>
  7. </head>
  8. <body>
  9.     <noscript>The app requires JavaScript to be enabled.</noscript>
  10.     <button id="modalVisit">Upload To Visit</button>
  11.     <script src="./upload_to_visit.js" type="module"></script>
  12.     <noscript>The app requires JavaScript to be enabled.</noscript>
  13.     <button id="modalDataset">Upload To Dataset</button>
  14.     <script src="./upload_to_dataset.js" type="module"></script>
  15. </body>
  16. </html>

我的upload_to_visit.js文件：

  1. import Uppy from '@uppy/core'
  2. import Dashboard from '@uppy/dashboard';
  3. import Tus from '@uppy/tus'
  4. import GoldenRetriever from '@uppy/golden-retriever';
  6. import '@uppy/core/dist/style.css';
  7. import '@uppy/drag-drop/dist/style.min.css';
  8. import '@uppy/dashboard/dist/style.min.css';
  10. const uppy = new Uppy({
  11.     debug: true,
  12.     autoProceed: false,
  13. })
  15. uppy.use(Dashboard, {
  16.     inline: false,
  17.     trigger:"#modalDataset",
  18.     target: 'body',
  19.     note:"to upload to a dataset",
  20.     proudlyDisplayPoweredByUppy: false,
  21.     showProgressDetails: true,
  22.     fileManagerSelectionType:"files",
  23. })
  25. uppy.use(Tus, { endpoint: 'http://127.0.0.1:3000/files/datasets/' });
  26. uppy.use(GoldenRetriever);

（我知道URL需要更改以适应Docker网络）

我的package.json文件：

  1. {
  2.   "name": "node_uppy",
  3.   "version": "0.0.0",
  4.   "type": "module",
  5.   "dependencies": {
  6.     "@uppy/core": "^3.3.1",
  7.     "@uppy/drag-drop": "^3.0.2",
  8.     "@uppy/dashboard": "",
  9.     "@uppy/tus": "^3.1.2",
  10.     "@uppy/golden-retriever": "^3.1.0",
  11.     "formidable": "^3.5.0"
  12.   },
  13.   "devDependencies": {
  14.     "npm-run-all": "^4.1.3",
  15.     "vite": "^4.0.0"
  16.   },
  17.   "private": true,
  18.   "scripts": {
  19.     "build": "npm-run-all --parallel",
  20.     "start": "npm-run-all --parallel start:client",
  21.     "start:client": "vite"
  22.   }
  23. }
英文:

I'm pretty new to the node.js/frontend world and am getting bamboozled by the various frameworks.

I have a node project that I can run locally. I've got a simple proof of concept up and running using the uppy front end framework, supported by tus.io to handle backend uploads. I use vite to serve everything up locally using yarn start.

I'm looking to run it from within a docker file so I can host it and show some colleagues. Can anyone help to get this running, it doesn't have to be pretty.

Things I've tried:

  • using a standard HTTP server implementation here, got errors about .js files not cjs then getting Uncaught TypeError: The specifier “@uppy/core” was a bare specifier, but was not remapped to anything in the browser
  • trying to use vite from a docker file but that bombed out with FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
  • Using webpack, but that was an all round fail with mostly cjs errors.

my index.html:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;utf-8&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6.     &lt;title&gt;Node.js + Uppy Example&lt;/title&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9.     &lt;noscript&gt;The app requires JavaScript to be enabled.&lt;/noscript&gt;
  10.     &lt;button id=&quot;modalVisit&quot;&gt;Upload To Visit&lt;/button&gt;
  11.     &lt;script src=&quot;./upload_to_visit.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
  12.     &lt;noscript&gt;The app requires JavaScript to be enabled.&lt;/noscript&gt;
  13.     &lt;button id=&quot;modalDataset&quot;&gt;Upload To Dataset&lt;/button&gt;
  14.     &lt;script src=&quot;./upload_to_dataset.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
  15. &lt;/body&gt;
  16. &lt;/html&gt;

my upload_to_visit.js:

  1. import Uppy from &#39;@uppy/core&#39;
  2. import Dashboard from &#39;@uppy/dashboard&#39;;
  3. import Tus from &#39;@uppy/tus&#39;
  4. import GoldenRetriever from &#39;@uppy/golden-retriever&#39;;
  6. import &#39;@uppy/core/dist/style.css&#39;
  7. import &#39;@uppy/drag-drop/dist/style.min.css&#39;;
  8. import &#39;@uppy/dashboard/dist/style.min.css&#39;;
  10. const uppy = new Uppy({
  11.     debug: true,
  12.     autoProceed: false,
  13. })
  15. uppy.use(Dashboard, {
  16.     inline: false,
  17.     trigger:&quot;#modalDataset&quot;,
  18.     target: &#39;body&#39;,
  19.     note:&quot;to upload to a dataset&quot;,
  20.     proudlyDisplayPoweredByUppy: false,
  21.     showProgressDetails: true,
  22.     fileManagerSelectionType:&quot;files&quot;,
  23. })
  25. uppy.use(Tus, { endpoint: &#39;http://127.0.0.1:3000/files/datasets/&#39; });
  26. uppy.use(GoldenRetriever);

(I'm aware the the URL will need to change to accommodate the docker network)

my package.json:

  1. {
  2.   &quot;name&quot;: &quot;node_uppy&quot;,
  3.   &quot;version&quot;: &quot;0.0.0&quot;,
  4.   &quot;type&quot;: &quot;module&quot;,
  5.   &quot;dependencies&quot;: {
  6.     &quot;@uppy/core&quot;: &quot;^3.3.1&quot;,
  7.     &quot;@uppy/drag-drop&quot;: &quot;^3.0.2&quot;,
  8.     &quot;@uppy/dashboard&quot;: &quot;&quot;,
  9.     &quot;@uppy/tus&quot;: &quot;^3.1.2&quot;,
  10.     &quot;@uppy/golden-retriever&quot;: &quot;^3.1.0&quot;,
  11.     &quot;formidable&quot;: &quot;^3.5.0&quot;
  12.   },
  13.   &quot;devDependencies&quot;: {
  14.     &quot;npm-run-all&quot;: &quot;^4.1.3&quot;,
  15.     &quot;vite&quot;: &quot;^4.0.0&quot;
  16.   },
  17.   &quot;private&quot;: true,
  18.   &quot;scripts&quot;: {
  19.     &quot;build&quot;: &quot;npm-run-all --parallel&quot;,
  20.     &quot;start&quot;: &quot;npm-run-all --parallel start:client&quot;,
  21.     &quot;start:client&quot;: &quot;vite&quot;
  22.   }
  23. }

答案1

得分: 1

将以下内容放入 Dockerfile 中：

  1. FROM node:lts-alpine AS build
  2. WORKDIR /app
  3. COPY . .
  4. RUN yarn install
  5. RUN vite build
  6. FROM nginx:stable-alpine
  7. COPY --from=build /app/dist /usr/share/nginx/html

然后运行 docker build -t app .。这应该足够让你有一个良好的起点。

英文:

Put the following in a Dockerfile:

  1. FROM node:lts-alpine AS build
  2. WORKDIR /app
  3. COPY . .
  4. RUN yarn install
  5. RUN vite build
  6. FROM nginx:stable-alpine
  7. COPY --from=build /app/dist /usr/share/nginx/html

Then run docker build -t app .. That should be enough to give you a head-start.

huangapple
  • 本文由 发表于 2023年8月8日 23:54:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76861242.html
  • docker
  • node.js
  • tus
  • uppy
  • vite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定