Узел обслуживает пустые статические файлы в SSR, когда докеризуется

Question

У меня есть образец приложения с razzle, реагировать и машинописи. Я пытаюсь докеризовать его и запустить как контейнер, но, хотя контейнер работает, статические файлы пусты.

Это мой 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 .

Я получаю следующее предупреждение (не уверен, связано ли это с моей проблемой):

ПРЕДУПРЕЖДЕНИЕ О БЕЗОПАСНОСТИ: Вы создаете образ Docker из Windows на хосте, отличном от Windows. Все файлы и каталоги, добавленные в контекст сборки, будут иметь права доступа '-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 локально в моей файловой системе я вижу приложение localhost:30001 правильно работает со стилями.

Я что-то упускаю или делаю что-то не так?

Я слишком новичок в докере и узле 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}"
    ]
  }
}

Answer 1

Вы должны создать свое приложение на изображении, а не на 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" ]

При многоступенчатой ​​сборке размер изображения падает с 290 МБ до 267 МБ для приложения-образца razzle.

Полностью проверено на окнах, активы обслуживаются правильно.