GOOGLE ADS

lundi 18 avril 2022

docker-compose ne peut pas exécuter réagir sans node_modules déjà existant

J'utilise docker/docker-compose pour que mon application react (ts) soit opérationnelle. Le script que j'utilise actuellement fonctionne parfaitement, à une condition. Que j'ai déjà fait 'npm install' dans le répertoire, sans être dans docker.

J'aimerais pouvoir cloner mon projet à partir de github, et juste faire docker-composer, et que cela fonctionne ensuite.

En ce moment, je dois d'abord exécuter 'npm install', puis 'docker-compose up' pour que cela fonctionne malheureusement.

J'ai essayé d'utiliser simplement RUN npm install react-scripts -g, et cela fonctionne un peu. cependant, j'obtiens une erreur pour le script dactylographié et tous les autres packages.

Ce que je veux qu'il se passe, c'est. Lorsque je clone mon dépôt et que j'utilise docker-compose up. Que tout mon projet tourne. Cela devrait également créer un node_modulesdossier dans mon dossier de réaction que je peux voir dans mon IDE. C'est pour que mon IDE connaisse le code du package et ne me crie pas dessus tout le temps.

I cant figure out how to get this to work, I'm already struggling on this for hours and can't find online how to fix it. Hope anyone can help me:D

Ma structure ressemble à ceci:


  • applications

    • l'extrémité avant

      • Fichier Docker

      • compositeur.json

      • // Tous les autres fichiers/dossiers de réaction





  • docker-compose.yml


Dockerfile :

FROM node:16.14.2
WORKDIR /usr/src/app
COPY./package*.json./
RUN npm install
CMD npm start --host 0.0.0.0 --port 3000 --disableHostCheck true

docker-compose.yml :

version: '3'
services:
frontend:
build:
context:./apps/frontend
dockerfile:./Dockerfile
volumes:
-./apps/frontend:/usr/src/app
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
- API_BASE_URL=host.docker.internal:8080/api
extra_hosts:
- "host.docker.internal:host-gateway"

L'erreur que j'obtiens est:

frontend_1 | > spa@0.1.0 start
frontend_1 | > react-scripts start "0.0.0.0" "3000"
frontend_1 |
frontend_1 | sh: 1: react-scripts: not found
cyldiscordbot_frontend_1 exited with code 127

package.json (idk si vous en avez besoin, mais le voici):

{
"name": "spa",
"version": "0.1.0",
"private": true,
"dependencies": {
"@cylbot/cyldiscordbotlanguage": "^2.0.3",
"@emotion/core": "^11.0.0",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.3.1",
"@mui/material": "^5.5.0",
"@testing-library/user-event": "^13.2.1",
"@types/node": "^17.0.9",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"axios": "^0.25.0",
"emotion-theming": "^11.0.0",
"enzyme": "^3.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"typescript": "^4.5.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@material-ui/core": "^4.12.3",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/node-logger": "^6.4.19",
"@storybook/preset-create-react-app": "^4.0.1",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/react-hooks": "^7.0.2",
"@types/jest": "^27.4.1",
"@types/styled-components": "^5.1.20",
"jest": "^27.5.1",
"react-test-renderer": "^17.0.2",
"ts-jest": "^27.1.3",
"webpack": "^5.70.0"
}
}

Je peux donner beaucoup d'informations sur ce projet, donc si plus d'informations sont nécessaires, il suffit de demander !:RÉ


Solution du problème

Je l'ai compris. J'ai demandé à un ami, et il m'a aidé. J'avais besoin de changer mon Dockerfile en:

FROM node:16.14.2
WORKDIR /usr/src/app
RUN npm install -g react-scripts
RUN chown -Rh node:node /usr/src/app
USER node
EXPOSE 3000
CMD [ "sh", "-c", "npm install && npm run start" ]

Aucun commentaire:

Enregistrer un commentaire

Comment utiliseriez-vous .reduce() sur des arguments au lieu d'un tableau ou d'un objet spécifique ?

Je veux définir une fonction.flatten qui aplatit plusieurs éléments en un seul tableau. Je sais que ce qui suit n'est pas possible, mais...