web-dev-qa-db-fra.com

"Créer React App" avec Docker

Je me demandais si quelqu'un avait une expérience de l'utilisation de create-react-app avec docker. J'ai pu le configurer avec un Dockerfile comme:

from node
RUN mkdir /src
WORKDIR /src
ADD package.json /src/package.json
RUN npm install
EXPOSE  3000
CMD [ "npm", "start" ]

Et puis utilisé un fichier docker-compose comme:

app:
  volumes:
    - "./app:/src"
  ports:
    - "3000:3000"
    - "35729:35729"
  build: ./app

Cela m'a permis de démarrer le conteneur et de visualiser l'application. Cependant livereload n'a pas fonctionné lors de l'enregistrement de fichiers dans le volume monté et webpack a créé plusieurs fichiers .json.gzip dans le répertoire src.

Des suggestions pour que cela fonctionne correctement?

reactjsdockerwebpackdocker-composelivereload
15
john_ryan

Oui, comme l'a mentionné Aholbreich, j'utiliserais npm install/npm start localement sur ma machine pour le développement, juste parce que c'est si simple. C'est probablement possible avec docker-compose, monter des volumes, etc., mais je pense que la configuration peut être un peu fastidieuse.

Pour le déploiement, vous pouvez alors très facilement utiliser un Dockerfile. Voici un exemple de Dockerfile que j'utilise:

FROM node:6.9

# Create app directory
RUN mkdir -p /src/app
WORKDIR /src/app

# to make npm test run only once non-interactively
ENV CI=true

# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
    npm install -g pushstate-server

# Bundle app source
COPY . /src/app

# Build and optimize react app
RUN npm run build

EXPOSE 9000

# defined in package.json
CMD [ "npm", "run", "start:prod" ]

Vous devez ajouter le start:prod option à votre package.json:

"scripts": {
  "start": "react-scripts start",
  "start:prod": "pushstate-server build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

Vous pouvez exécuter les tests sur votre service CI avec:

docker run <image> npm test

Rien ne vous empêche également d'exécuter ce conteneur Docker localement pour vous assurer que les choses fonctionnent comme prévu.

9
metakermit

J'ai récemment réalisé un petit projet appelé hello-docker-react qui fait juste ce que l'op recherche.

Il est fait avec docker-compose, create-react-app, yarn, une image de nœud et un petit script de point d'entrée.

Le rechargement en direct fonctionne parfaitement et je n'ai pas encore trouvé de problème.

https://github.com/lopezator/hello-docker-react

6
sh4

voici bon gide pour cela https://mherman.org/blog/dockerizing-a-react-app/

pour le developpement

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent

# start app
CMD ["npm", "start"]

pour la production

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-Alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
2
Ryabchenko Alexander

Lors de l'utilisation de Docker en développement avec create-react-app, j'ai découvert qu'il était possible de remplacer la configuration de webpackDevServer en ajoutant CHOKIDAR_USEPOLLING=1à votre fichier .env. Cela fera fonctionner à nouveau l'observation des fichiers. Il rafraîchit même la page du navigateur sur l'hôte! La seule chose que j'ai découverte, c'est qu'elle n'ouvre pas automatiquement une page Web.

Je peux également conseiller d'ajouter tty: true à votre service pour que votre console d'origine soit renvoyée dans votre terminal. Pour supprimer les préfixes de nom de conteneur dans les journaux, vous pouvez exécuter quelque chose comme ceci après avoir exécuté docker-compose up -d:

docker-compose logs -f --tail=100 client | cut -f2 -d \"|\""
1
Donny Verduijn