Com es crea un lloc web React a AWS en 15 minuts

Aquest tutorial us pot ajudar a iniciar un lloc web personal o professional senzill allotjat a AWS S3 i creat amb React. React és una biblioteca Javascript per crear interfícies d'usuari. Suposem que encara esteu aprenent a utilitzar el disseny web i altres tecnologies i que voleu una manera econòmica de construir i desordenar amb el vostre propi lloc web en directe. La millor manera de fer-ho és allotjar el lloc web a AWS S3, ja que es pot utilitzar gratuïtament durant 12 mesos: 5 GB d’emmagatzematge estàndard d’Amazon S3, 20.000 obtenir sol·licituds i 2.000 sol·licituds de venda. Això vol dir que haureu de pagar menys d’un dòlar al mes per obtenir trànsit seriós al vostre lloc web.

Pas 1: creeu una aplicació de resposta localment

Per crear una aplicació de resposta, primer heu d’instal·lar node i npm. Per instal·lar tots dos:

Si feu servir un Mac i teniu instal·lat Homebrew, executeu el node d'instal·lació de Brew. Més opcions per a Mac OS: https://nodejs.org/en/download/package-manager/#macos Windows: https://nodejs.org / ca / ​​download / package-manager / Descàrregues de # windows: https://nodejs.org

Un cop finalitzada la instal·lació, podeu crear una nova aplicació executant:

npx create-react-app my-app cd my-app npm start

Tan aviat com es faci això, el navegador s'obrirà a l'adreça localhost: 3000. Qualsevol canvi que feu al codi de l'aplicació de reacció es mostrarà immediatament al navegador.

Pas 2: creeu el lloc web local per al desplegament

Després de fer canvis a la versió local del vostre lloc web, podeu fer-la per a la producció executant l'ordre següent des de la carpeta d'aplicacions reactives:

npm executa la compilació

Això exportarà tots els recursos i crearà un únic fitxer Javascript minimitzat agrupant React i optimitzant l’aplicació per obtenir un rendiment òptim. Un cop executada aquesta ordre, tots els recursos del lloc web es trobaran a la carpeta de compilació. Ara el vostre lloc web està llest per ser allotjat a AWS.

Pas 3: creeu un compte AWS

Si ja teniu un compte d'Amazon, podeu ometre aquest pas. Aneu a aws.amazon.com i creeu un compte nou. Tingueu en compte que per crear un compte AWS es necessita informació de la targeta de crèdit per esborrar factures, fer pagaments i evitar un ús fraudulent.

Pas 4: creeu un cub S3

Inicieu la sessió al vostre compte d'AWS. Obriu S3 des de la consola AWS. Feu clic a "Crea dipòsit".

Si teniu previst utilitzar un nom de domini per al vostre lloc web, creeu el dipòsit amb el mateix nom. Si el nom del domini del vostre lloc web és abc.com, el vostre nom del dipòsit S3 també hauria de ser abc.com.

Introduïu un nom de dipòsit i feu clic a Crea.

Pas 5: configureu l'allotjament estàtic de llocs web a S3

Aneu a Propietats del buc S3 i activeu l’allotjament de llocs web estàtic. Seleccioneu "Utilitza aquest dipòsit per allotjar un lloc web". Introduïu "index.html" com a document d'índex i document d'error.

Anoteu el vostre punt final. Aquest és l’URL des d’on podeu accedir al vostre lloc web. Quan hàgiu acabat, feu clic a Desa.

Pas 6: definiu els permisos de lectura del dipòsit S3 com a Públic

Com que tothom a Internet necessita accedir al vostre lloc web, l’accés de lectura del dipòsit S3 hauria de ser públic. Per fer-ho, obriu el tauler de permisos i enganxeu la política següent després de substituir-la pel vostre nom de domini.

{"Version": "2012-10-17", "Statement": [{"Sid": "PublicReadGetObject", "Effect": "Permet", "Headmaster": "*", "Action": "s3: GetObject "," Recurs ":" arn: aws: s3 ::: / * "}]}

Pas 7: pengeu el contingut del lloc web a S3

Ara heu de penjar el contingut de la vostra carpeta de compilació al vostre dipòsit S3.

Obriu el dipòsit S3 i feu clic a "Penja". Arrossegueu i deixeu anar el contingut de la carpeta de compilació a la finestra de càrrega. Verifiqueu que hi hagi tot el contingut de la carpeta de compilació, incloses les subcarpetes i els fitxers. Un cop ho hàgiu verificat, premeu el botó "Penja".

Això és. El vostre lloc web està en directe. Podeu accedir-hi mitjançant el punt final que heu assenyalat al pas 5.

Pas 8: (Opcional) configureu un desplegament ràpid a S3

Cada vegada que feu canvis al vostre lloc web de manera local, haureu de carregar manualment el contingut del directori de compilació a S3 per poder introduir els canvis al lloc web actiu. Per evitar-ho, podeu instal·lar AWS CLI i configurar-lo amb les vostres credencials AWS. A continuació, podeu penjar el contingut del directori de compilació mitjançant l'ordre següent.

aws s3 cp build / s3: // --recursiu

Per fer-ho encara més fàcil, també podeu afegir aquesta ordre a la secció de scripts del fitxer package.json, que podeu trobar a la carpeta de l'aplicació React.

"Scripts": {"start": "Iniciar scripts de reacció", "build": "Construir scripts de reacció", "predeploy": "Crea scripts de reacció", "deploy": "aws cp build s3: // --recursive "," test ":" React-Scripts-Test --env = jsdom "," Eject ":" React-Scripts Eject "}

Ara podeu executar npm run deploy per desplegar el contingut de la carpeta de compilació a S3.

Segons la meva experiència, utilitzar AWS per a un lloc web senzill és molt més barat que utilitzar qualsevol altra solució allotjada. També podeu ampliar la vostra aplicació per utilitzar AWS Lambda i altres ofertes d’AWS. Diverteix-te piratejant!