"Erstellen Sie Reagieren-App" mit Docker

Ich Frage mich, ob jemand schon Erfahrung mit erstellen-reagieren-app mit docker. Ich war in der Lage, um es einzurichten mit einem Dockerfile wie:

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

Und dann eine docker-compose-Datei wie: 

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

Dieser erlaubt mir zu beginnen, bis der Behälter und die Ansicht der app. Aber livereload hat nicht funktioniert, beim speichern von Dateien in das gemountete volume und webpack erstellt mehrere .json.gzip-Dateien im src-Verzeichnis.

Irgendwelche Vorschläge für die erste dieser arbeiten, richtig?

  • Ich glaube docker ist nicht das richtige Werkzeug für das, was Sie haben wollen. Entwickeln gerade auf yout Maschine mit live-nachladen und andere Funktionen, die Sie mögen und bauen Container/Bilder für die version freigegeben oder nur für automatisierte Tests... Es ist nicht klar, warum Sie brauchen das Andockfenster für die Entwicklung hier...
  • livereload sollte funktionieren, wenn Sie Docker für Mac, oder mit docker auf linux. Wenn Sie noch Andockfenster Toolbox (mit VM) es wurde berichtet, dass die Datei beobachten oft nicht funktioniert.
  • danke für den Tipp eingeschaltet, um Docker für Mac und alles funktioniert Super.
  • Ich denke, Sie könnten Recht haben, mein Gedanke war, zu wickeln alles (einschließlich der backend arbeite ich an) in einem docker compose setup Umgang mit CORS aber ich denke, das ist wahrscheinlich overkill.
InformationsquelleAutor john_ryan | 2016-08-04
  1. 7

    Yeah, wie aholbreich erwähnt, verwende ich npm install /npm start lokal auf meinem Rechner für die Entwicklung, gerade weil es so einfach ist. Es ist wohl möglich mit docker-compose -, Montage-volumes usw. auch, aber ich denke, es könnte ein bisschen fummelig einzurichten.

    Für die Bereitstellung können Sie dann sehr leicht mit einem Dockerfile. Hier ein Beispiel für ein Dockerfile, das ich verwende:

    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" ]

    Müssen Sie den start:prod option, um Ihre Paket.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"
},

    Führen Sie die tests auf Ihre CI-service mit:

    docker run <image> npm test

    Es gibt nichts stoppen Sie die Ausführung von dieser docker-container vor Ort als auch, um sicherzustellen, dass alles wie erwartet funktioniert.

    InformationsquelleAutor metakermit
  2. 5

    Ich habe vor kurzem ein kleines Projekt namens Hallo-docker-reagieren, der nur tut, was der op sucht.

    Es mit docker-compose erstellen-reagieren-app, Garn, eine Knoten-Bild, und eine kleine entrypoint-Skript.

    Live-reload funktionieren einwandfrei und ich habe keine gefunden die Probleme noch.

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

    InformationsquelleAutor sh4
  3. 2

    hier ist gut gide für dieses
    https://mherman.org/blog/dockerizing-a-react-app/

    für die Entwicklung

    # 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 react-scripts@1.1.1 -g --silent

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

    für die Produktion

    # 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 react-scripts@1.1.1 -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;"]
    InformationsquelleAutor Ryabchenko Alexander
Schreibe einen Kommentar