Kako izraditi web mjesto React u AWS-u u roku od 15 minuta

Ovaj će vam vodič pomoći da pokrenete jednostavnu osobnu ili profesionalnu web stranicu koja se nalazi u AWS S3 i napravljenu pomoću React-a. React je Javascript knjižnica za izgradnju korisničkih sučelja. Recimo da i dalje učite reagirati i druge tehnologije povezane s web dizajnom i želite ekonomičan način izrade i igranja s vlastitom web stranicom uživo. Najbolji način da se to postigne je hostiranje web stranice u AWS S3 jer nudi besplatnu upotrebu 12 mjeseci - 5 GB Amazon S3 standardne pohrane, 20 000 zahtjeva i 2000 zahtjeva za postavljanje. To znači da ćete plaćati manje od jednog dolara mjesečno dok vaša web stranica ne počne ostvarivati ​​ozbiljan promet.

1. korak: Napravite lokalnu aplikaciju za reakciju

Da biste stvorili reakcijsku aplikaciju, prvo morate instalirati čvor i npm. Da biste instalirali oba:

Ako koristite instalirane Macu i Homebrew, pokrenite pivar install čvor
Ostale mogućnosti za Mac OS: https://nodejs.org/en/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Preuzimanja: https://nodejs.org

Nakon što je instalacija dovršena, možete kreirati novu aplikaciju pokretanjem:

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

Nakon što je to dovršeno, otvorit će vaš preglednik s adresom localhost: 3000. Sve promjene koje unesete u reakcijski kôd aplikacije prikazat će se odmah u pregledniku.

2. korak: izgradite lokalnu web stranicu za implementaciju

Nakon što učinite izmjene u lokalnoj verziji svoje web lokacije, možete je izgraditi za proizvodnju tako da u mapi reakcije aplikacije izvršite sljedeću naredbu:

npm trčanje graditi

Ovo će izvesti svu imovinu i stvoriti jedinstvenu minificiranu Javascript datoteku ispravnim povezivanjem React i optimiziranjem aplikacije za najbolje performanse. Nakon što se ova naredba izvrši, sva imovina vaše web stranice nalazit će se u mapi za izgradnju. Sada je vaša web stranica spremna za primjenu na AWS.

Korak 3: Kreirajte AWS račun

Ako već imate račun na Amazonu, ovaj korak možete preskočiti. Idite na aws.amazon.com i otvorite novi račun. Imajte na umu da stvaranje AWS računa zahtijeva podatke o kreditnoj kartici za naplatu, plaćanje i izbjegavanje lažne uporabe.

Korak 4: Stvorite kantu S3

Prijavite se na svoj AWS račun. Otvorite S3 s AWS konzole. Kliknite "Create Bucket".

Ako planirate koristiti naziv domene za vaše web mjesto, stvorite kantu s istim imenom. Ako je naziv vaše domene web stranice "abc.com", tada bi vaše ime S3 kante trebalo biti i "abc.com".

Unesite naziv kante i kliknite "Create".

Korak 5: Konfigurirajte statički hosting web mjesta u S3

Idite na S3 svojstva kante i omogućite "statički hosting web stranica". Odaberite "Koristi ovu kantu za hosting web mjesta". Navedite "index.html" kao indeksni dokument i dokument o pogrešci.

Zapišite svoju krajnju točku. Ovo je URL pomoću kojeg možete pristupiti svojoj web stranici. Nakon što završite, kliknite Spremi.

Korak 6: Postavite javna dopuštenja za čitanje S3 posude

Budući da vašoj web stranici mora pristupiti bilo tko na internetu, pristup čitanju S3 kante trebao bi biti javan. Da biste to učinili, otvorite kantu "Dozvole" i zalijepite dolje navedeno pravilo nakon što je zamijenite svojim nazivom kante.

{
    "Verzija": "2012-10-17",
    "Izjava": [
        {
            "Sid": "PublicReadGetObject",
            "Učinak": "Dopusti",
            "Glavni": "*",
            "Akcija": "s3: GetObject",
            "Resurs": "arn: aws: s3 :::  / *"
        }
    ]
}

7. korak: Učitajte sadržaj web mjesta na S3

Sada morate učitati sadržaj mape za izradu u svoju S3 posudu.

Otvorite svoju kantu S3 i kliknite "Učitaj". Povucite i ispustite sadržaj mape za izradu u prozor za prijenos. Provjerite je li prisutan sav sadržaj mape za izradu, uključujući podmape i datoteke. Nakon što to potvrdite, kliknite "Učitaj".

To je to. Vaša web stranica je aktivna. Možete mu pristupiti pomoću krajnje točke koju ste zabilježili kao dio koraka 5.

Korak 8: (Neobavezno) Postavljanje brzog postavljanja na S3

Svaki put kada lokalno unesete promjene na svoje web mjesto, morate ručno prenijeti sadržaj direktorija izrade u S3 da biste promijenili promjene na web lokaciji uživo. Da biste to izbjegli, možete instalirati AWS CLI i konfigurirati ga svojim AWS vjerodajnicama. Nakon što to učinite, možete prenijeti sadržaj svoje mape izrade pomoću sljedeće naredbe.

aws s3 cp build / s3: //  - rekurzivno

Da biste to dodatno pojednostavili, ovu naredbu možete dodati i u odjeljak skripte datoteke package.json koji možete pronaći u mapi s reakcijskim aplikacijama.

"skripte": {
  "start": "start-script skripti",
  "build": "react-skripte graditi",
  "predeploy": "build-script skripti",
  "implementirati": "aws cp build s3: //  --recursive",
  "test": "test-script skripti --env = jsdom",
  "izbaci": "reakcija-skripte izbaci"
}

Sada možete napraviti npm pokrenuti implementaciju kako biste rasporedili sadržaj svoje mape za izgradnju na S3.

Na temelju mog iskustva, korištenje AWS-a za jednostavnu web stranicu mnogo je jeftinije od korištenja bilo kojeg drugog rješenja s hostom. Također možete proširiti svoju aplikaciju za upotrebu AWS Lambda i drugih AWS ponuda. Sretno sjeckanje!