Как настроить контейнер Docker React для установки модулей только тогда, когда они ему нужны? - PullRequest
Новая
       40

Как настроить контейнер Docker React для установки модулей только тогда, когда они ему нужны?

0 голосов
/ 27 мая 2020

Я пытаюсь создать несколько служб Docker в моем файле docker -compose.yml, которые запускали бы мой бэкэнд Django / MySql, а также мое клиентское приложение React. У меня есть этот раздел в моем docker -compose.yml для работы с частью React .... 

  client:
    build:
      context: ./client
    volumes:
      - ./client:/app
    ports:
      - '3001:3000'
    restart: always
    container_name: web-app
    environment:
      - NODE_ENV=development
      - REACT_APP_PROXY=http://localhost:9090
    depends_on:
      - web

Затем я создал следующий клиент / файл Docker для настройки контейнера React ... 

FROM node:10-alpine AS alpine

# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /app/

# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./

# Installs all node packages
RUN npm install

# Finally runs the application
CMD [ "npm", "start" ]

Но когда мой контейнер запускается, он умирает с ошибкой ниже ... 

web-app   | Failed to compile.
web-app   | 
web-app   | ./node_modules/react-tag-input/dist-modules/components/ReactTags.js
web-app   | Module not found: Can't resolve 'react-dnd' in '/app/node_modules/react-tag-input/dist-modules/components'

Я думал, что мой "RUN npm install" выше спасет положение, но Думаю, нет. Есть ли способ каким-то образом определить, какие модули не установлены, и установить их при запуске моего контейнера?

Изменить: package. json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-device-detect": "^1.12.1",
    "react-dom": "^16.12.0",
    "react-hamburger-menu": "^1.2.1",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "react-tag-input": "^6.4.3",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

1 Ответ

0 голосов
/ 27 мая 2020

Здесь происходят две вещи:

  1. Ваша volumes: директива перезаписывает все в дереве /app, включая node_modules.
  2. Ваш Dockerfile на самом деле не COPY код приложения в образ (так что вам понадобится обходной путь использования volumes:, чтобы поместить его туда).

Вы можете исправить это, обновив свой Dockerfile 

FROM node:10-alpine
WORKDIR /app/
COPY package*.json ./
RUN npm install

# Actually copy the application code in
COPY . ./

CMD ["npm", "start"]

Если у вас еще нет файла .dockerignore, создайте его, содержащую строку node_modules, чтобы этот каталог хоста не был встроен в образ.

Наконец, удалите volumes: из вашего docker-compose.yml файл.

Если вы измените код внешнего интерфейса, вам потребуется docker-compose up --build, чтобы изображение было перестроено.

Если вам нужна среда разработки в реальном времени, вы можете использовать Node непосредственно на хосте, даже если большая часть остальной части вашего стека работает в Docker. Это особенно верно для внешнего кода: поскольку код, который обслуживается, фактически выполняется в браузере конечного пользователя, он не может напрямую взаимодействовать с сетью Docker или иным образом действительно использовать преимущества пребывания в Docker вообще. 

# Start everything besides the front-end
docker-compose up -d web

# Start a dev server in the usual way
export NODE_ENV=development
export REACT_APP_PROXY=http://localhost:9090
npm start
...