个人中心
gpt4 book ai didi

javascript - "Failed to load resource: the server responded with a status of 404" express docker

转载 作者：太空宇宙 更新时间：2023-11-04 01:44:32 24 4
gpt4 key购买 nike

我在浏览器中收到错误消息“无法加载资源:服务器响应状态为 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>
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

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/

24 4 0
文章推荐： CSS动画从一个类到另一个类的变化::之后
文章推荐： python - 如何防止覆盖别人修改过的对象
文章推荐： javascript - Mongoose 上的这种保存方法如何在不说明哪个数据库的情况下工作？
文章推荐： html - 删除正文和页脚之间不需要的空间
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com