英文:
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文件：
<!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"
}
}
英文:
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
.jsfiles notcjsthen gettingUncaught TypeError: The specifier “@uppy/core” was a bare specifier, but was not remapped to anythingin 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:
<!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>
my 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);
(I'm aware the the URL will need to change to accommodate the docker network)
my 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"
}
}
答案1
得分: 1
将以下内容放入 Dockerfile 中：
FROM node:lts-alpine AS build
WORKDIR /app
COPY . .
RUN yarn install
RUN vite build
FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html
然后运行 docker build -t app .。这应该足够让你有一个良好的起点。
英文:
Put the following in a Dockerfile:
FROM node:lts-alpine AS build
WORKDIR /app
COPY . .
RUN yarn install
RUN vite build
FROM nginx:stable-alpine
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论