我正在使用教程在线学习Docker。我被要求构建的唯一的东西是Dockerfile，所以我确信问题就在那里，但我还不能找出一个有效的方法来调试这个问题。
问题是，当我运行容器与构建docker图像index.html呈现在本地主机，但bundle.js不呈现，并给出了控制台标题的错误。当我在本地机器上webpack bundle并打开index.html时，网页呈现正确。
Dockerfile:
FROM node:8.15-alpine as build-stage
COPY . /app
RUN npm install && npm start
FROM nginx:1.15
EXPOSE 80
COPY --from=build-stage /app /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
index . html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo App</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="./styles/main.css" >
</head>
<body>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>
package.json:
{
"name": "todos",
"version": "1.0.0",
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.2.2",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {}
}
webpack.config.js:
const path = require('path');
module.exports = {
context: __dirname,
entry: './frontend/todo_redux.jsx',
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
},
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", ".jsx", "*"]
}
};
nginx.conf
# This will tell our nginx server what path
# we want it to use for the html it renders
server {
# list on port 80
listen 80;
location / {
# to learn more about location blocks check out this resouce:
# https://www.linode.com/docs/web-servers/nginx/how-to-configure-nginx/#location-blocks
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
更新:删除了我在Dockerfile的节点构建部分的CMD行，将RUN npm install更改为RUN npm install && npm start，现在正在创建bundle.js文件并添加到nginx，但同样的错误仍然存在。
好了，所以最后得到了制作者的帮助，发现我需要创建一个WORKDIR /app，然后复制到其中。下面对Dockerfile的修改修复了这个问题:
FROM node:14.15-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install && npm start
我误读了文档，我认为只有使用COPY. /app才能创建/app，如果它没有找到它，但就多阶段构建而言，这似乎是不够的，并且需要创建WORKDIR才能被--from=build-stage正确引用。在那之后，当然记得COPY . .而不是COPY . /app，这也是我被困了一段时间的地方。它似乎在图像中创建了一个额外的路径/app/app，这扰乱了最终的渲染。
最后，从node:8.15-alpine到node:14.15-alpine的变化似乎不是一个因素，这是我在调试时做的升级，只是想看看它是否导致了问题。