Sådan oprettes et React-websted i AWS inden for 15 minutter

Denne tutorial hjælper dig med at starte et enkelt personligt eller professionelt websted, der er vært i AWS S3 og bygget ved hjælp af React. React er et Javascript-bibliotek til opbygning af brugergrænseflader. Lad os sige, at du stadig lærer reaktion og andre teknologier, der er relateret til Web Design, og at du ønsker en omkostningseffektiv måde at opbygge og lege på med dit eget live-websted. Den bedste måde at opnå dette på er at være vært for webstedet i AWS S3, da det tilbyder gratis lagring af brug i 12 måneder - 5 GB Amazon S3 standardlagring, 20.000 få anmodninger og 2.000 salgsanmodninger. Det betyder, at du betaler mindre end en dollar pr. Måned, indtil dit websted begynder at få en vis alvorlig trafik.

Trin 1: Opret en reaktionsapplikation lokalt

Hvis du vil oprette en reaktionsapplikation, skal du først installere node og npm. Sådan installeres begge:

Hvis du bruger Mac og Homebrew installeret, skal du køre bryggeinstallationsnode
Andre muligheder for Mac OS: https://nodejs.org/en/download/package-manager/#macos
Windows: https://nodejs.org/da/download/package-manager/#windows
Downloads: https://nodejs.org

Når installationen er afsluttet, kan du oprette en ny applikation ved at køre:

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

Når dette er afsluttet, åbner det din browser med adressen localhost: 3000. Eventuelle ændringer, du foretager i din reagerende appkode, vil blive afspejlet straks i browseren.

Trin 2: Byg det lokale websted til distribution

Når du er færdig med at foretage ændringer i den lokale version af dit websted, kan du oprette det til produktion ved at køre følgende kommando i din reager-app-mappe:

npm run build

Dette vil eksportere alle aktiver og skabe en enkelt, minificeret Javascript-fil ved korrekt at bundtage React og optimere appen for at opnå den bedste ydelse. Når denne kommando er afsluttet, vil alle dine webstedsaktiver være i build-mappen. Nu er dit websted klar til distribution til AWS.

Trin 3: Opret en AWS-konto

Hvis du allerede har en Amazon-konto, kan du springe dette trin over. Gå til aws.amazon.com og opret en ny konto. Bemærk, at oprettelse af en AWS-konto kræver kreditkortoplysninger til fakturering, betalinger og for at undgå svigagtig brug.

Trin 4: Opret en S3-spand

Log ind på din AWS-konto. Åbn S3 fra din AWS-konsol. Klik på "Opret spand".

Hvis du planlægger at bruge et domænenavn til dit websted, skal du oprette spanden med det samme navn. Hvis dit websteds domænenavn er "abc.com", skal dit S3 spand navn også være "abc.com".

Indtast et spandnavn, og klik på "Opret".

Trin 5: Konfigurer statisk webstedshosting i S3

Gå til S3-skovegenskaber og aktiver “Static Website Hosting”. Vælg "Brug denne spand til at være vært for et websted". Angiv "indeks.html" som indeksdokument og fejldokument.

Noter dit slutpunkt. Dette er den URL, hvor du kan få adgang til dit websted. Når du er færdig, skal du klikke på Gem.

Trin 6: Indstil S3-skovlæsetilladelser til offentligt

Da dit websted skal have adgang til alle på Internettet, skal S3-skovlæseadgangen være offentlig. For at gøre dette skal du åbne spand “Tilladelser” og indsætte nedenstående politik efter at have erstattet det med dit spandnavn.

{
    "Version": "2012-10-17",
    "Udmelding": [
        {
            "Sid": "PublicReadGetObject",
            "Effekt": "Tillad",
            "Principal": "*",
            "Handling": "s3: GetObject",
            "Ressource": "arn: aws: s3 :::  / *"
        }
    ]
}

Trin 7: Upload webstedsindhold til S3

Nu skal du uploade indholdet af din build-mappe til din S3-spand.

Åbn din S3-spand, og klik på "Upload". Træk og slip indholdet af din build-mappe til uploadvinduet. Kontroller, om alt indholdet i din build-mappe er til stede, inklusive undermapper og filer. Når du har bekræftet dette, skal du klikke på "Upload".

Det er det. Din hjemmeside er live. Du kan få adgang til det ved hjælp af det slutpunkt, du noterede som en del af trin 5.

Trin 8: (Valgfrit) Opsætning af hurtig implementering til S3

Hver gang du foretager ændringer på dit websted lokalt, skal du uploade indholdet af din build-mappe til S3 manuelt for at skubbe dine ændringer til det levende websted. For at undgå dette kan du installere AWS CLI og konfigurere det med dine AWS-legitimationsoplysninger. Når du gør det, kan du uploade indholdet i dit build-bibliotek ved hjælp af følgende kommando.

aws s3 cp build / s3: //  - rekursiv

For at forenkle dette yderligere kan du også tilføje denne kommando til scriptsafsnittet i pakken.json-filen, som du kan finde i din react app-mappe.

"scripts": {
  "start": "react-scripts starter",
  "build": "react-scripts build",
  "predeploy": "reaktion-scripts build",
  "deploy": "aws cp build s3: //  - rekursiv",
  "test": "reaktion-scripts-test - env ​​= jsdom",
  "eject": "react-scripts eject"
}

Nu kan du udføre implementering af npm for at distribuere indholdet af din build-mappe til S3.

Baseret på min erfaring er det meget billigere at bruge AWS til et enkelt websted end at bruge nogen anden hostet løsning. Du kan også udvide din ansøgning til at bruge AWS Lambda og andre AWS-tilbud. God hacking!