Hvordan distribuere React -app til AWS

React er et bibliotek på JavaScript -språket for å bygge raske og interaktive brukergrensesnitt og er et av de mer populære bibliotekene for å utvikle brukergrensesnitt. Den bruker uavhengige, isolerte og gjenbrukbare komponenter som er deler av brukergrensesnittet og komponerer dem for å bygge komplekse strukturer. Dette innlegget vil guide deg gjennom distribusjon av React -applikasjoner til AWS ved hjelp av EC2 -forekomster.

La oss starte med hvordan du distribuerer React Application til AWS:

Distribuer React -app til AWS

For å distribuere React -applikasjonen til AWS, oppretter du en EC2 -forekomst fra EC2 -konsollen ved å klikke på “Lanseringsforekomster”Knapp:

Skriv inn navnet på forekomsten med valg av Amazon Machine Image for EC2 -forekomsten:

Velg forekomsttype og lag det private nøkkelparet ved å klikke på "Lag nytt nøkkelpar”Link:

Skriv inn navnet på nøkkelparfilen og velg filtypen og formatet for å laste den ned. Etter det, klikk på “Lag nøkkelpar”-Knappen nederst på siden for å opprette nøkkelparfilen:

Tillat HTTP og HTTPS -trafikk fra internett i sikkerhetsgruppene. Etter det kan du bare gå gjennom alle innstillingene før du klikker på "Lanseringsinstans”For å lage en EC2 -forekomst:

Etter å ha opprettet, velg den og klikk på "Koble”-Knappen for å koble til EC2 -forekomsten:

Velg SSH -klienten for å koble til forekomsten og kopiere kommandoen som er nevnt på skjermdumpen nedenfor:

Lim inn kommandoen på ledeteksten eller PowerShell og endre banen til den private nøkkelparfilen:

Når brukeren er koblet til EC2 -forekomsten, bruk følgende kommando for å få de APT -pakkene oppdatert:

APT-Få oppdatering

Kjører kommandoen ovenfor vil vise følgende utdata:

Installer Nginx -serveren for å distribuere React -applikasjonen etter det som verifiser dens eksistens og start serveren på nytt ved å bruke følgende kommandoer:

sudo apt -get install nginx -y
nginx -v
sudo SystemCTL omstart Nginx

Disse kommandoene vil installere og starte Nginx -tjenestene:

Etter det installer Curl for å opprette React -applikasjonen på Nginx -serveren ved å bruke følgende kommando:

sudo apt-get install curl

Kjører denne kommandoen vil vise følgende utgang:

Etter det, bruk Curl til å laste ned NodeJs ved hjelp av følgende kommando:

Curl -sl https: // Deb.Nodesource.com/setup_14.x | sudo -e bash -

Følgende resultat vises fra kommandoen ovenfor:

Etter at nedlastingen er fullført, installer NodeJs ved hjelp av følgende kommando:

sudo apt -get install -y nodejs

Denne kommandoen vil installere NodeJs for å opprette React -applikasjonen:

Bruk følgende kommando for å finne mappen som React -applikasjonen skal opprettes:

CD/var/www/html/

Brukeren er inne i mappen for å opprette React -applikasjonen:

Opprett applikasjonen i mappen ved å bruke følgende kommando:

NPX Create-React-App React-Tutorial

Kjører denne kommandoen vil vise følgende utgang:

Bruk følgende kommandoer for å starte NPM og kjøre React -applikasjonen:

CD React-Tutorial
NPM start

Å kjøre denne kommandoen lar deg få tilgang til React -applikasjonen på nettleseren ved å bruke koblingene fra skjermbildet nedenfor:

React -applikasjonen din kjører i nettleseren ved hjelp av LocalHost eller AWS -nettverket:

Du har distribuert React Application på AWS:

Konklusjon

React -applikasjoner kan distribueres ved hjelp av AWS EC2 -forekomsten. Opprett EC2 -forekomsten fra EC2 -konsollsiden og koble deretter til den ved hjelp av SSH -klienten. Når du er inne i EC2 -forekomsten, last ned og installer Nginx -serveren og NodeJs for å distribuere React -applikasjonen til AWS. Inne i Nodejs opprette en React -app som vil bli distribuert ved hjelp av Nginx -serveren.