“加载资源失败:服务器响应状态为 404”express docker

Posted

技术标签:

【中文标题】“加载资源失败:服务器响应状态为 404”express docker【英文标题】:"Failed to load resource: the server responded with a status of 404" express docker 【发布时间】:2019-01-27 20:38:51 【问题描述】:

我在浏览器中收到错误消息“加载资源失败:服务器响应状态为 404”,我正在使用 Node/Express、Mongo 数据库和 Docker。 没有 Docker 一切正常。

文件夹结构:


后端 服务器 server.js 前端 源 index.html 分布 webpack.config.js package.json Dockerfile docker-compose.yml

server.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>
webpack.config.js

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

版本:“3”
服务:
  应用程序:
    容器名称:projectX
    图片:docker-node-express-mongoapp
    重启:总是
    建造: 。
    命令: npm 运行开始
    端口:
      - “3000:3000”


  蒙哥:
    容器名称:mongo
    图片:蒙哥
    命令:[“mongod”,“--bind_ip_all”]
    卷:
       - /app:/data/configdb
       - 蒙戈数据:/数据/分贝
    端口:
       - “27017:27017”

卷:
    mongo 数据:

如果我在浏览器中输入“192.168.99.100:3000/gallery”,我只有来自数据库的数据 (json) 响应,但没有任何 html/css 代码。

当我尝试手动将 index.html 发送到浏览器时:

app.get('/', function(request, response) 
    response.sendFile(path.resolve(__dirname + '../../../frontend/src/index.html'),
  );
);

我在加载 frontend-output.js 时遇到问题。 (404 未找到)

非常感谢您的帮助:)

【问题讨论】:

你能显示你的frontend-output.js脚本的代码吗?您是否尝试过从浏览器访问 192.168.99.100:3000/? 是的,我试过了。前端输出应该从 webpack 编译。帖子已编辑,我添加了 webpack.config.js。 【参考方案1】:

问题解决了!!! 到 dockerfile 添加:

曝光 3000 暴露 8080

到 docker-compose.yml 添加:

端口: “8080:8080” “3000:3000”

并在 webpack.config.js 中为 devServer 设置端口

端口:8080

【讨论】:

以上是关于“加载资源失败:服务器响应状态为 404”express docker的主要内容,如果未能解决你的问题,请参考以下文章

加载资源失败:服务器响应状态为 404(未找到)

Apache Cordova:“加载资源失败:服务器响应状态为 404(未找到)”

加载资源失败:服务器响应状态为 404(未找到)

加载资源失败:服务器响应状态为 404(未找到)

Angular 5 - 加载资源失败:服务器响应状态为 404(未找到)

加载资源失败:服务器响应状态为 404 () Spring boot with JWT