Uyakha njani iReact yesicelo usebenzisa i-Docker vs NGINX

Ibhlog

Uyakha njani iReact yesicelo usebenzisa i-Docker vs NGINX

Uyakha njani iReact yesicelo usebenzisa i-Docker vs NGINX

Kule posi, siza kubona iinkcukacha kunye nokuphunyezwa kweSicelo seReact React usebenzisa iDocker vs NGINX. Siza kuhamba ngenyathelo ngenyathelo nomzekelo.



Umzekelo weProjekthi

Le projekthi ilula ebonisa ukusebenza kwesimo se-React esisicelo nge-NGINX kunye neDocker. Sine-app elula enentloko, i-footer kunye nomyalezo.



Nantsi iprojekthi yomzekelo apho unokubamba khona kwaye usebenze kumatshini wakho

// 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

Le yinkqubo elula yeReact enesihloko, i-footer kunye nomyalezo othile kwideshibhodi. Nazi iiHeader.js, iFooter.js kunye neefayile zeApp



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

Intloko

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

Umbhalo osemazantsi

tshintsha (xwp)
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

uqhagamshela njani umshicileli wam we-epson kwi-wifi

Yanele i-NGINX yale Projekthi

Asihambi kuyo yonke into malunga ne-NGINX apha kwaye sihamba nje ngokwaneleyo ukulungiselela le projekthi. Ukuba sele uqhelene nale nto, ungatsiba uye kwicandelo elilandelayo.

Iinkqubo ze-NGINX zahlulwe zangumsebenzi omnye kunye neenkqubo zomsebenzi ezininzi. Inkqubo yenkosi ikhathalela ukuvavanya ukumiselwa kunye nokugcina iinkqubo zomsebenzi kunye neenkqubo zabasebenzi zikhathalela ezona zicelo. Singalichaza inani leenkqubo zomsebenzi kwifayile yoqwalaselo enokubekwa kulawulo /usr/local/etc/nginx, /etc/nginx okanye /usr/local/nginx/conf.

Ifayile yoqwalaselo inezikhokelo ezenza iimodyuli okanye imeko. Zimbini iintlobo zemiyalelo: izikhokelo ezilula kunye nemiyalelo yebhloko. Isikhokelo esilula sinamagama kunye neeparameter ezahlulwe sisithuba kwaye siphela ngesemicolon enje listen 80; . Isikhokelo sebhloko siyafana kodwa sinolwazi olongezelelweyo kwaye sijikelezwe ziibhrashi ezinje { listen 80; root /usr/share/nginx/html; }.

Masiqonde ifayile yoqwalaselo ye-NGINX ebesiyisebenzisa kule projekthi. Apha ngezantsi kukho nginx.conf ifayile ebekwe phantsi kolawulo zintsi kwindawo yengcambu ye iprojekthi.

Yonke into ngumxholo kwifayile yoqwalaselo. Sinomxholo wokulandelelana oqala kumxholo ophambili. Umzekelo, Inkqubo_yabasebenzi kwaye iziganeko zichazwe kwimeko ephambili kwaye omnye umxholo uqala nge http. Sinomnye umxholo ngaphakathi http kubizwe umncedisi emamela kwizibuko lama-80 kunye nokuhambisa iiasethi ezimileyo kwindawo yengcambu /usr/share/nginx/html.

Singazibhengeza kaninzi iifayile ze umncedisi ngaphakathi http umxholo kwaye sinokubhengeza kaninzi indawo ngaphakathi umncedisi umxholo.

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

Ukuphunyezwa

Sisebenzisa iDocker njengexesha lokubaleka lale projekthi. Sisebenzisa amanqanaba amaninzi ukwakha umfanekiso weDocker. Nantsi iDockerfile yeprojekthi.

# 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;']

Ifayile yedokodo *

Inqanaba 1

Sisebenzisa node:10-alpine njengomfanekiso osisiseko wenqanaba1 kunye nokukopa package.json ukufaka konke ukuxhomekeka. Emva koko sikopa iprojekthi eseleyo kamva, ngaloo ndlela singatsiba ukufakela ukuxhomekeka ngalo lonke ixesha kukho utshintsho kwiifayile. I-Docker isebenzisa i-cache ukwakha umfanekiso kwizendlalelo ezikhoyo ukuba akukho lutshintsho.

penn square mall ifowuni yokulungisa

Sakha iprojekthi nge phendula-izikripthi kwaye zonke iifayile ezimileyo ezibekwe kwifayile ye- / Yakha ifolda.

Inqanaba 2

Inqanaba 2 liqala ngomfanekiso osisiseko nginx:alpine kwaye ukope ifayile ye-nginx.conf, susa ifayile yesalathiso kwindawo yengcambu, kwaye okokugqibela, khuphela zonke iifayile ukusuka kwinqanaba 1 ukuya kwindawo yengcambu apho inokuhambisa khona umxholo.

Yakha umfanekiso kwaye uqalise iprojekthi

Masakhe iprojekthi ngalo myalelo docker build -t react-ui. kwaye ungayiqhuba iprojekthi ngalo myalelo docker run -d --name reactui -p 80:80 react-ui . Ungaqhuba usetyenziso kwi | _ _ _ _ |

Iprojekthi esebenzayo kwindawo yasekhaya

Izinto ezibalulekileyo ekufuneka uziqaphele

Izibuko lesikhongozeli kunye ne-nginx yokumamela izibuko kufuneka zilingane ezingama-80 kungenjalo uya kufumana ERR_EMPTY_RESPONSE xa uqhuba iprojekthi.

[http://localhost:80](http://localhost:80/appui)

Kuya kufuneka siquke lo myalelo kwifayile ye-nginx.conf kungenjalo zonke izimbo zenziwe njengombhalo ocacileyo kwisikhangeli.

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

Yenza isiQinisekiso sokuSebenza

Ngelixa isikhongozeli sisebenza sinokwenza kuyo kwaye sibone imixholo yenkqubo yefayile.

yenza ntoni i-cp kwi-linux
include /etc/nginx/mime.types;

Ngokwenyani sinokubona yonke imixholo phantsi docker exec -it reactui /bin/sh

Inkqubo yefayile ngaphakathi kwe-docker

Isishwankathelo

  • I-NGINX inokusetyenziswa njengeseva yewebhu okanye ukubuyisela umva ukubuyisela umxholo we-tuli.
  • Lonke uqwalaselo lwe-NGINX lunokubekwa kule fayile /usr/share/nginx/html .
  • Kufuneka sakhe i-app yokusabela kwaye ubeke zonke iifayile ezimileyo kwindawo yengcambu ye-NGINX ukukhonza iwebhu.
  • I-Docker isetyenziswa njengexesha lokubaleka lesikhongozeli.
  • Sisebenzisa amanqanaba amaninzi ukwakha ukunciphisa ubungakanani bomfanekiso wokugqibela kunye nokususa iifayile ezingafunekiyo kwindawo yemveliso.
  • Umfanekiso weDocker ungakhiwa nge nginx.conf
  • Sebenzisa isikhongozeli ngalo myalelo docker build -t react-ui .
  • Kubaluleke kakhulu ukutshatisa amazibuko ngelixa uqhuba isitya kunye nokumamela izibuko kwifayile ye-nginx.conf. Ngaphandle koko, uya kufumana i- ERR_EMPTY_RESPONSE impazamo **. **
  • Unokwenza kwisitya ukukhangela inkqubo yefayile ngalo myalelo docker run -d --name reactui -p 80:80 react-ui.

Isiphelo

NGINX ngumncedisi wewebhu osebenza kakhulu osebenzisa umxholo kunye nokuhanjiswa kwesicelo, kuphucula ukhuseleko, kuququzelela ukubakho kunye nokwanda kweapps zewebhu. Ukuba ufuna ukunqanda okanye akukho sidingo sokwakha ii -apps ze-UI ngeJava okanye i-node js server runtime, ungakha i-app ye-UI kwaye ukhonze iifayile ezimileyo kunye ne-NGINX kwisikali. Enkosi ngokufunda!

#react #docker #javascript #nginx #development