Kuidas luua AWS-is Reacti veebisait 15 minuti jooksul

See õpetus aitab teil käivitada lihtsa isikliku või professionaalse veebisaidi, mida hostitakse AWS S3-s ja mis on üles ehitatud Reaxi abil. React on Javascripti teek kasutajaliideste loomiseks. Oletame, et õpid endiselt reageerimist ja muid veebidisainiga seotud tehnoloogiaid ning soovite kuluefektiivset viisi omaenda veebisaidi loomiseks ja mängimiseks. Parim viis selle saavutamiseks on veebisaidi majutamine AWS S3-s, kuna see pakub 12-kuulist tasuta astmekasutust - 5 GB Amazon S3 standardset salvestusruumi, 20 000 hanketaotlust ja 2000 lisamistaotlust. See tähendab, et maksate vähem kui dollar kuus, kuni teie veebisaidi liiklus on tõsine.

1. samm: looge kohapeal reageerimisrakendus

Reageerimisrakenduse loomiseks peate esmalt installima sõlme ja npm. Mõlema installimiseks toimige järgmiselt.

Kui kasutate installitud Mac'i ja Homebrew'i, käivitage brew installimissõlm
Muud võimalused Mac OS-i jaoks: https://nodejs.org/en/download/package-manager/#macos
Windows: https://nodejs.org/en/download/package-manager/#windows
Allalaadimised: https://nodejs.org

Kui installimine on lõpule viidud, saate uue rakenduse luua järgmiselt:

NPX loo-reageeri-rakendus minu-rakendus
cd minu rakendus
npm algus

Kui see on valmis, avab see teie brauseri aadressiga localhost: 3000. Kõik muudatused, mida teete oma reageeriva rakenduse koodis, kajastuvad kohe brauseris.

2. samm: looge kohalik veebisait juurutamiseks

Kui olete oma veebisaidi kohalikus versioonis muudatused teinud, saate selle tootmiseks luua, käivitades rakenduse react kaustas järgmise käsu:

npm käivitage

See ekspordib kõik varad ja loob ühtse minimeeritud Javascripti faili, komplekteerides õigesti Reakti ja optimeerides rakenduse parimaks toimimiseks. Kui see käsk on täidetud, asuvad kõik teie veebisaidi varad ehitamiskaustas. Nüüd on teie veebisait valmis AWS-i kasutamiseks.

3. samm: looge AWS-i konto

Kui teil juba on Amazoni konto, saate selle sammu vahele jätta. Minge saidile aws.amazon.com ja looge uus konto. Pange tähele, et AWS-i konto loomine nõuab krediitkaarditeavet arvelduse, maksete tegemiseks ja pettuse vältimiseks.

4. samm: looge S3-ämber

Logige sisse oma AWS-i kontole. Avage S3 oma AWS-i konsoolist. Klõpsake „Loo ämber“.

Kui plaanite oma veebisaidi jaoks kasutada domeeninime, looge sama nimega ämber. Kui teie veebisaidi domeeninimi on “abc.com”, peaks teie S3-ämbri nimi olema ka “abc.com”.

Sisestage kopa nimi ja klõpsake nuppu „Loo”.

5. samm: seadistage staatiline veebisaidi hostimine S3-s

Minge S3 ämbri atribuutidesse ja lubage „Staatiline veebisaidi hostimine”. Valige „Kasuta seda ämbrit veebisaidi majutamiseks”. Esitage indeksdokumendina ja veadokumendina „index.html”.

Pange oma lõpp-punkt üles. Selle URL-i abil saate oma veebisaidile juurde pääseda. Kui olete lõpetanud, klõpsake nuppu Salvesta.

6. samm: määrake S3 kopa lugemisõigused avalikeks

Kuna teie veebisaidil peab olema juurdepääs kõigile, kes Internetis asuvad, peaks S3-ämbri lugemisjuurdepääs olema avalik. Selleks avage kopp “Permissions” ja kleepige allolev poliitika pärast selle asendamist kopa nimega.

{
    "Versioon": "2012-10-17",
    "Avaldus": [
        {
            "Sid": "PublicReadGetObject",
            "Efekt": "Luba",
            "Printsipaal": "*",
            "Toiming": "s3: GetObject",
            "Allikas": "arn: aws: s3 :::  / *"
        }
    ]
}

7. samm. Laadige veebisaidi sisu üles S3-le

Nüüd peate oma ehitamiskausta sisu üles laadima oma S3 ämbrisse.

Avage S3-kopp ja klõpsake nuppu „Laadi üles”. Lohistage oma ehituse kausta sisu üleslaadimisaknasse. Kontrollige, kas kogu ehitamiskausta sisu on olemas, sealhulgas alamkaustad ja failid. Kui olete selle kinnitanud, klõpsake nuppu „Laadi üles”.

See selleks. Teie veebisait on aktiivne. Sellele pääsete juurde, kasutades lõpp-punkti, mille 5. sammuna märkisite.

8. samm: (valikuline) Häälestage kiire juurutamine S3-sse

Iga kord, kui teete oma veebisaidil kohapeal muudatusi, peate oma ehitamiskataloogi sisu S3 käsitsi üles laadima, et muudatused reaalajas veebisaidile suunata. Selle vältimiseks võite installida AWS CLI ja konfigureerida selle oma AWS mandaadiga. Kui olete selle teinud, saate oma ehituse kataloogi sisu üles laadida, kasutades järgmist käsku.

aws s3 cp build / s3: //  - rekursiivne

Selle edasiseks lihtsustamiseks võite selle käsu lisada ka faili package.json skriptide sektsiooni, mille leiate rakenduse react kaustast.

"skriptid": {
  "start": "reageerima-skriptid käivituvad",
  "ehitama": "reageerima-skriptid ehitama",
  "predeploy": "react-scripts build",
  "juurutama": "aws cp build s3: //  - rekursiivne",
  "test": "reageeri skriptide test - env ​​= jsdom",
  "eject": "react-scripts eject"
}

Nüüd saate ehituse kausta sisu S3-sse juurutada npm run deploy abil.

Minu kogemuse põhjal on AWS-i kasutamine lihtsa veebisaidi jaoks palju odavam kui mis tahes muu hostitud lahenduse kasutamine. Samuti saate laiendada oma rakendust AWS Lambda ja muude AWS-i pakkumiste kasutamiseks. Õnnelik häkkimine!