1

我有一个带有 razzle、react 和 typescript 的示例应用程序。我正在尝试将其 dockerize 并将其作为容器运行，但是尽管容器运行，但静态文件是空的。

这是我的 Dockerfile

FROM node:alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

ENV NODE_ENV production
ENV RAZZLE_CUSTOM_VARIABLE xxxxx

COPY package.json .

RUN npm install --production

COPY build ./build

EXPOSE 3000

CMD [ "node", "build/server.js" ]

我用docker build --tag=my-app:0.0.1 .

我收到以下警告（不确定是否与我的问题有关）：

安全警告：您正在针对非 Windows Docker 主机从 Windows 构建 Docker 映像。添加到构建上下文的所有文件和目录都将具有“-rwxr-xr-x”权限。建议仔细检查和重置敏感文件和目录的权限。

最后我运行我的容器，例如：docker run -p 3001:3000 my-app:0.0.1它可以正确执行。

当我去时，localhost:30001我可以看到我的反应应用程序，但没有样式。例如，我可以看到一个http://localhost:3003/static/css/bundle.b1e53d9a.css正在提供服务，但它也是空的http://localhost:3003/static/js/bundle.fd36658a.js是空的，这一定是问题所在。问题是为什么？

如果我node build/server.js在我的文件系统上进行本地操作，我可以看到服务的 react 应用程序可以localhost:30001正常使用样式。

我错过了什么或做错了什么？

我对 docker 和 node js 太陌生了，无法自己弄清楚。

更新 1：如果需要，这是我的 package.json

{
  "name": "llevatelo-web",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "4.17.1",
    "razzle": "3.0.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-router-dom": "5.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.0.0",
    "@testing-library/react": "^8.0.9",
    "@types/express": "^4.17.0",
    "@types/jest": "^24.0.17",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.8.5",
    "@types/react-router-dom": "^4.3.4",
    "@types/webpack-env": "^1.14.0",
    "eslint": "^6.1.0",
    "razzle-plugin-typescript": "^3.0.0",
    "ts-jest": "^24.0.2",
    "typescript": "^3.5.3"
  },
  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "ts-jest",
      "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
    },
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ]
  }
}
4

1 回答 1

3

您应该在图像上构建您的应用程序，而不是在 Windows 上构建它并复制它。

您可以稍后通过多阶段构建来优化大小

完整的 Dockerfile：

FROM node:alpine as builder
RUN mkdir -p /app
WORKDIR /app
ENV NODE_ENV production

COPY package.json ./
RUN npm install --production

COPY src ./src
COPY public ./public
RUN npm run build


FROM node:alpine
RUN mkdir -p /app
WORKDIR /app
ENV NODE_ENV production

COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/build ./build

EXPOSE 3000

CMD [ "node", "build/server.js" ]

通过多阶段构建，razzle 示例应用程序的图像大小从 290MB 下降到 267MB。

在 Windows 上进行了全面测试，资产服务正确。

于 2019-08-13T08:45:28.273 回答