我在浏览器中收到错误消息“无法加载资源:服务器响应状态为 404”,并且我正在使用 Node/Express、Mongo 数据库和 Docker。 没有 Docker,一切都可以正常工作。
文件夹结构:
<小时/>- 后端
- 服务器
- 服务器.js
- 服务器
- 前端
- 源代码
- index.html
- 源代码
- 距离
- webpack.config.js
- package.json
- Dockerfile
- docker-compose.yml
服务器.js
app.use('/', express.static(__dirname + '../../dist/'));
app.get('/gallery', (req, res) => {
Gallery.find({}, {name: 1, path: 1, _id: 0, image: 1}).then(
gallery => {
res.json({gallery});
},
e => {
res
.status(500)
.send(e)
.send('Undefined error');
},
);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Gallery</title>
<base href="/">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="dist/frontend-output.js"></script>
</body>
</html>
const frontend = {
resolve: {
modules: [path.resolve(__dirname, 'frontend'), 'node_modules'],
},
mode: 'development',
entry: './frontend/js/index.js',
output: {
path: path.resolve(__dirname, '/dist/'),
publicPath: '/',
filename: 'frontend-output.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-0', 'react'],
},
},
},
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.(jpe?g|png|gif|svg)$/i, use: ['url-loader', 'file-loader']},
{
test: /\.(jpe?g|png|ttf|eot|gif|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: 'base64-inline-loader?limit=1000&name=[name].[ext]',
},
],
},
plugins: [
new HtmlWebpackPlugin({
publicPath: '/',
template: './frontend/src/index.html',
}),
],
devServer: {
historyApiFallback: true,
},
};
package.json {脚本}
"server": "node ./backend/server/server.js",
"webpack": " webpack-dev-server --host 0.0.0.0 --disable-host-check",
"start": "run-p webpack server " /* run-p is part of npm-run-all package*/
Dockerfile
FROM node:latest
WORKDIR /app
COPY . /app
EXPOSE 3000
docker-compose.yml
version: "3" services: app: container_name: projectX image: docker-node-express-mongoapp restart: always build: . command: npm run start ports: - "3000:3000" mongo: container_name: mongo image: mongo command: ["mongod", "--bind_ip_all"] volumes: - /app:/data/configdb - mongo-data:/data/db ports: - "27017:27017" volumes: mongo-data:
If I type in the browser "192.168.99.100:3000/gallery" I had only data (json) response from database but not any html/css code.
When I try manually send index.html to the browser with:
app.get('/', function(request, response) {
response.sendFile(path.resolve(__dirname + '../../../frontend/src/index.html'),
);
});
我在加载 frontend-output.js 时遇到问题。 (404未找到)
非常感谢您的帮助:)
最佳答案
问题解决了!!! 到 dockerfile 添加:
- 曝光 3000
- 暴露8080
到 docker-compose.yml 添加:
- 端口:
- “8080:8080”
- “3000:3000”
并在 webpack.config.js 中设置 devServer 的端口
- 端口:8080
关于javascript - "Failed to load resource: the server responded with a status of 404" express docker ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51952377/