J'ai une application React simple créée avec create-react-app
qui fonctionne bien sur localhost. J'essaye maintenant d'ancrer l'application. Voici mon package.json:
docker run --publish 3000:3000 yeet
Et voici mon Dockerfile:
docker build --tag yeet .
Je construis l'image avec:
# Specify base image FROM node:12.19.0-alpine3.10 # Specify app location in host WORKDIR /app # Copy the dependency list COPY package.json ./ # Install app dependencies RUN npm install # Copy app code to host COPY . . # Open specified port EXPOSE 3000:3000 # Start the app CMD ["npm", "run", "production"]
Ensuite, j'exécute l'image en tant que conteneur avec:
{ "name": "yeet", "version": "0.1.0", "engines": { "node": "12.x" }, "scripts": { "client": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "start": "node server.js", "production": "npm run build && npm run start" }, "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "axios": "^0.21.0", "body-parser": "^1.19.0", "cors": "^2.8.5", "express": "^4.17.1", "express-session": "^1.17.1", "mongoose": "^5.10.13", "mysql": "^2.18.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }, "devDependencies": { "babel-core": "*", "babel-loader": "*", "babel-preset-es2015": "*", "babel-preset-react": "*", "babel-preset-stage-0": "*" }, "babel": { "presets": [ "@babel/env", "@babel/react", "babel-preset-stage-0" ], "env": { "start": { "presets": [ "@babel/env", "@babel/react", "babel-preset-stage-0" ] } } } }
Cela jette:
$ docker run --publish 3000: 3000 yeet
yeet@0.1.0 production / application npm run build && npm run start
yeet@0.1.0 build / app react-scripts build
/app/node_modules/eslint-webpack-plugin/dist/options.js:62 (0, _schemaUtils.default) (_ options.default, options, {^
TypeError: (0, _schemaUtils.default) n'est pas une fonction dans getOptions (/app/node_modules/eslint-webpack-plugin/dist/options.js:62:28) au nouveau ESLintWebpackPlugin (/ app / node_modules / eslint-webpack- plugin / dist / index.js: 30: 44) à module.exports (/app/node_modules/react-scripts/config/webpack.config.js:749:7) à Object. (/app/node_modules/react-scripts/scripts/build.js:67:16) à Module._compile (interne / modules / cjs / loader.js: 1015: 30) à Object.Module._extensions..js (interne /modules/cjs/loader.js:1035:10) à Module.load (interne / modules / cjs / loader.js: 879: 32) à Function.Module._load (interne / modules / cjs / loader.js: 724 : 14) à Function.executeUserEntryPoint [as runMain] (internal / modules / run_main.js: 60: 12) à internal / main / run_main_module.js: 17: 47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yeet@0.1.0 build: react
react-scripts build
npm ERR! Statut de sortie 1 npm ERR! npm ERR! Échec du script de construction yeet@0.1.0. npm ERR! Ce n'est probablement pas un problème avec npm. Il y a probablement une sortie de journalisation supplémentaire ci-dessus.npm ERR! Un journal complet de cette exécution peut être trouvé dans: npm ERR!
/root/.npm/_logs/2020-11-07T12_47_03_927Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yeet@0.1.0 production:npm run build && npm run start
npm ERR! Statut de sortie 1 npm ERR! npm ERR! Échec du script de production yeet@0.1.0. npm ERR! Ce n'est probablement pas un problème avec npm. Il y a probablement une sortie de journalisation supplémentaire ci-dessus.npm ERR! Un journal complet de cette exécution peut être trouvé dans: npm ERR!
/root/.npm/_logs/2020-11-07T12_47_03_923Z-debug.log
Quelqu'un voit-il ce que je fais mal? Tous les pointeurs seraient super utiles!
4 Réponses :
Ce qui l'a résolu pour moi était
OP n'utilise pas de composants stylisés ou d'extensions redux-devtools
Je pense que l'étape 3 est suffisante. Pas besoin de 1 et 2.
Il existe donc deux façons de résoudre ce problème:
Rétrogradation de React 17 et react-scripts 4.0
C'est ce que j'ai fait puisque je ne voulais pas être éjecté de l'ARC (pour des raisons évidentes). Le problème est dû au fait que la bibliothèque de styles que j'utilise ne fonctionne pas bien avec la façon mise à jour dont l'ARC gère Eslint.
Cela pourrait être d'autres problèmes mais cela semble provenir de react-scripts 4.0
Ceci est mentionné dans le changelog pour react-scripts 4.0
Éjection de l'ARC
Comme mentionné dans les commentaires de @duhaime. Vous pouvez résoudre ce problème directement tout en utilisant React 17 et react-scripts 4.0 en éjectant puis en supprimant ESLintPlugin ou en mettant à jour le chargeur pour résoudre les problèmes avec la bibliothèque que vous utilisez.
Je recommanderais personnellement le premier car je suis sûr que le problème sera résolu le plus tôt possible. Mais les deux options vous y mèneront.
J'ai eu le même problème. Je ne suis pas sûr des autres solutions avec la suppression ou la rétrogradation des bibliothèques si cela fonctionne localement.
Pour résoudre ici, j'ai couru
docker-compose.exe -f .\docker-compose.yml up --build
pour être sûr que mon docker est propre avant de commencer la construction.
En cas d' yarn.lock
vous pouvez essayer de supprimer yarn.lock
ou package-lock.json
.
Si cela peut aider les autres, mes fichiers sont
.dockerignore
server { listen 80; server_name frontend; location / { root /usr/share/nginx/html; index index.html; try_files $uri /index.html; } }
Dockerfile.dev
version: "3.8" services: print: stdin_open: true build: context: . dockerfile: Dockerfile.prod ports: - "80:80"
docker-compose.dev.yml
FROM node:alpine as build WORKDIR /app COPY package.json /app RUN yarn install COPY . /app RUN yarn run build FROM nginx:stable-alpine COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/build /usr/share/nginx/html
Dockerfile.prod
version: "3.8" services: print: stdin_open: true build: context: . dockerfile: Dockerfile.dev ports: - "3000:3000" volumes: - ".:/app" - "/app/node_modules"
docker-compose.prod.yml
FROM node:alpine WORKDIR /app COPY package.json /app RUN yarn install COPY . . CMD ["yarn", "start"]
nginx.conf
.git .gitignore node_modules build
Courir
docker container prune docker image prune
Cela m'a beaucoup aidé! Je voudrais juste demander, dans votre docker-compose.prod.yml
, est-il censé être dockerfile: Dockerfile
, ou dockerfile: Dockerfile.prod
? Enfin, je voudrais juste souligner (parce que je suis nouveau dans Docker, et il m'a fallu un certain temps pour le comprendre, cela peut donc aider quelqu'un d'autre), que pour construire Dockerfile.dev, vous devez lancez docker build -f Dockerfile.dev -t devimage .
puis vous devez exécuter docker-compose -f docker-compose.dev.yml up
C'était une erreur lors de la copie de mes fichiers source. J'ai édité le message.
Cool. Je reçois toujours une erreur cependant, je vais essayer de la comprendre sans rétrograder, comme suggéré ailleurs ici
J'ai eu un problème similaire.
Essayez de remplacer les commandes npm par yarn dans votre Dockerfile - cela a résolu mon problème.
Donc, votre Dockerfile devrait ressembler à ceci:
# Specify base image FROM node:12.19.0-alpine3.10 # Specify app location in host WORKDIR /app # Copy the dependency list COPY package.json ./ # Install app dependencies RUN yarn install # Copy app code to host COPY . . # Open specified port EXPOSE 3000:3000 # Start the app CMD ["yarn", "run", "start", "production"]
C'est une solution de contournement chanceuse pour résoudre un "problème de cache" où il s'exécute également avec npm.
Je suis d'accord, exactement, comme vous l'avez écrit.
npm cache clean --force
Woof, je puis éjecté enlevé le
ESLintPlugin
plug - in dewebpack.config.js
qui ont résolu cette erreur.J'ai un problème similaire. Je pense que c'est lié à la nouvelle version de react-scripts
Qu'est-ce que vous utilisez pour le style? (CSS, SASS, etc.)
J'utilisais juste du CSS barebones