Com es crea una aplicació React mitjançant Docker vs NGINX

Bloc

Com es crea una aplicació React mitjançant Docker vs NGINX

En aquest post, veurem els detalls i la implementació de l’aplicació Build React mitjançant Docker vs NGINX. Anirem pas a pas amb un exemple.



Exemple de projecte

Aquest és un projecte senzill que demostra el servei d'aplicacions estàtiques React amb NGINX i Docker. Disposem d’una aplicació senzilla amb capçalera, peu de pàgina i amb un missatge.








Aquí teniu l'exemple de projecte on podeu clonar i executar a la vostra màquina



// clone the project git clone https://github.com/bbachi/react-nginx-docker // install and start the dependencies npm install npm start // build the docker image docker build -t react-ui . // run the app docker run -d --name reactui -p 80:80 react-ui

Aquesta és una senzilla aplicació React que té la capçalera, el peu de pàgina i alguns missatges al tauler. Aquests són els fitxers Header.js, Footer.js i, App.js






import React from 'react'; const Header = () => { return ( Simple React App ) }; export default Header

Header.js

import React from 'react'; const Footer = () => { return ( 2020 ) }; export default Footer

Footer.js

com comprar sia coin
import React from 'react'; import Header from './header/header' import Footer from './footer/footer' import './App.css'; function App() { return ( ); } export default App;

App.js

atura les finestres emergents de mitjana

Només cal NGINX per a aquest projecte

Aquí no ho passem per tot sobre NGINX i només ho passem prou per a aquest projecte. Si ja esteu familiaritzats amb aquestes coses, podeu passar a la secció següent.

Els processos NGINX es divideixen en un procés principal i diversos processos de treball. El procés mestre s’encarrega d’avaluar la configuració i mantenir els processos del treballador i els processos del treballador s’encarreguen de les sol·licituds reals. Podem definir el nombre de processos de treball al fitxer de configuració que es pot col·locar al directori /usr/local/etc/nginx, /etc/nginx o /usr/local/nginx/conf.

El fitxer de configuració consta de directrius que formen els mòduls o contextos. Hi ha dos tipus de directives: directives simples i directives de blocs. Una directiva simple té noms i paràmetres separats per un espai i acaba amb un punt i coma com aquest listen 80; . Una directiva de blocs és la mateixa, però té informació addicional i està envoltada de claus com aquesta { listen 80; root /usr/share/nginx/html; }.

Comprenguem el fitxer de configuració NGINX que hem utilitzat en aquest projecte. A continuació es mostra el nginx.conf que es troba a la carpeta .nginx a la ubicació arrel del fitxer projecte.

Tot és un context al fitxer de configuració. Tenim un context jeràrquic que comença pel context principal. Per exemple, processos_treballador i esdeveniments es defineixen al context principal i comença un altre context http. Tenim un altre context dins http va trucar servidor que escolta al port 80 i serveix actius estàtics des de la ubicació arrel /usr/share/nginx/html.

Podem tenir diverses declaracions del fitxer servidor dins del http context i podem tenir múltiples declaracions de ubicació dins del servidor context.

worker_processes 4; events { worker_connections 1024; } http { server { listen 80; root /usr/share/nginx/html; include /etc/nginx/mime.types; location /appui { try_files $uri /index.html; } } }

nginx.conf

Implementació

Utilitzem Docker com a temps d'execució de contenidors per a aquest projecte. Estem utilitzant versions de diverses etapes per crear la imatge de Docker. Aquí teniu el fitxer Docker per al projecte.

# stage1 as builder FROM node:10-alpine as builder # copy the package.json to install dependencies COPY package.json package-lock.json ./ # Install the dependencies and make the folder RUN npm install && mkdir /react-ui && mv ./node_modules ./react-ui WORKDIR /react-ui COPY . . # Build the project and copy the files RUN npm run build FROM nginx:alpine #!/bin/sh COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf ## Remove default nginx index page RUN rm -rf /usr/share/nginx/html/* # Copy from the stahg 1 COPY --from=builder /react-ui/build /usr/share/nginx/html EXPOSE 3000 80 ENTRYPOINT ['nginx', '-g', 'daemon off;']

Dockerfile *

Etapa 1

Estem utilitzant node:10-alpine com a imatge base per a l'escenari 1 i la còpia package.json per instal·lar totes les dependències. A continuació, copiem el projecte restant més endavant, d'aquesta manera podem ometre les dependències d'instal·lació cada vegada que hi hagi un canvi als fitxers. Docker utilitza una memòria cau per crear la imatge a partir de capes existents si no hi ha cap canvi.

showtime anytime.com/activate al vostre ordinador

Construïm el projecte amb el scripts de reacció i tots els fitxers estàtics construïts es col·loquen al fitxer / construir carpeta.

Etapa 2

La fase 2 comença amb la imatge base nginx:alpine i copieu el fitxer nginx.conf, traieu el fitxer d'índex de la ubicació arrel i, finalment, copieu tots els fitxers de l'etapa 1 a la ubicació arrel des d'on pugui publicar el contingut.

Construeix la imatge i executa el projecte

Construïm el projecte amb aquesta ordre docker build -t react-ui. i podeu executar el projecte amb aquesta ordre docker run -d --name reactui -p 80:80 react-ui . Podeu executar l'aplicació a [http://localhost:80](http://localhost:80/appui)

Projecte en execució a localhost

Coses importants que cal notar

El port de contenidor i el port d'escolta de nginx haurien de ser els mateixos que 80, en cas contrari ERR_EMPTY_RESPONSE quan executeu el projecte.

// container port docker run -d --name react-ui -p 80:80 reactui // nginx conf http { server { listen 80; } }

Hauríem d’incloure aquesta directiva al fitxer nginx.conf en cas contrari, tots els estils es representaran en text pla al navegador.

include /etc/nginx/mime.types;

Exec al contenidor en curs

Mentre el contenidor està en estat d’execució, podem executar-lo i veure el contingut del sistema de fitxers.

què fa cp a linux
docker exec -it reactui /bin/sh

En realitat, podem veure tot el contingut a /usr/share/nginx/html

Sistema de fitxers dins del mollador

Resum

  • NGINX es pot utilitzar com a servidor web o servidor intermediari invers per servir el contingut estàtic.
  • Tota la configuració de NGINX es pot col·locar en aquest fitxer nginx.conf .
  • Hem de crear l’aplicació react i col·locar tots els fitxers estàtics a la ubicació arrel del NGINX per publicar el web.
  • Docker s'utilitza com a temps d'execució del contenidor.
  • Utilitzem versions de diverses etapes per reduir la mida final de la imatge i eliminar fitxers innecessaris de l’entorn de producció.
  • La imatge Docker es pot construir amb docker build -t react-ui .
  • Executeu el contenidor amb aquesta ordre docker run -d --name reactui -p 80:80 react-ui.
  • És molt important fer coincidir els ports mentre s’executa el contenidor i el port d’escolta al fitxer nginx.conf. En cas contrari, obtindríeu un ERR_EMPTY_RESPONSE error **. **
  • Podeu executar-vos al contenidor per explorar el sistema de fitxers amb aquesta ordre docker exec -it reactui /bin/sh.

Conclusió

NGINX és un servidor web d'alt rendiment que ofereix contingut i aplicacions, millora la seguretat, facilita la disponibilitat i l'escalabilitat de les aplicacions web. Si voleu evitar o no cal crear aplicacions d’interfície d’usuari amb el temps d’execució del servidor Java o node js, podeu crear l’app d’interfície d’usuari i publicar els fitxers estàtics amb el NGINX a escala. Gràcies per llegir!

#react #docker #javascript #nginx #development