= Implementeer React-apps op Amazon S3 =
== Handleiding van 5 minuten over het implementeren van React Apps met S3 ==
Dus je hebt je React-app voltooid en je wilt hem ergens hosten. Wist je dat je Amazon AWS S3 kunt gebruiken om je React-apps te hosten? Het is relatief eenvoudig, goedkoop en snel te implementeren.
= Laten we beginnen! =
== Vereisten ==
Voordat we ingaan op hosting, laten we eerst de administratieve instellingen uitvoeren. Zorg ervoor dat het volgende is voltooid:
**Je hebt een AWS-account Meld je hier aan voor een AWS-account: httpsaws.amazon.com/resources/create-account/ **Maak een AWS-gebruiker aan Ga in de AWS-console naar het tabblad IAM en ga naar de à ¢ÃÂÃÂGebruikersgedeelte op de zijbalk.
Klik op 'Gebruiker toevoegen'en vink 'Programmatische toegang'aan. ÃÂ.
Klik op 'Volgende: machtigingen'en selecteer hier 'Bestaand beleid direct toevoegen'. ÂÃ. Controleer âÃÂÃÂAdministratorAccessâÃÂàvoor het implementatiedoel.
Klik door de knoppen Volgende en klik ten slotte op âÃÂÃÂCreate userâÃÂÃÂ.
In de laatste stap ontvangen we een toegangssleutel-ID en een geheime toegangssleutel. Downloaden en
**sla ze op je computer op, want je hebt ze later nodig
== Installeer AWS CLI ==
De AWS CLI is een krachtige tool die ons kan helpen het implementatieproces te vereenvoudigen.
Laten we AWS CLI installeren met Homebrew (voor macOS). Installeer Homebrew als je dat nog niet hebt gedaan.
*Opmerking: als u Windows gebruikt, vindt u de instructies in de officiële documenten * *hier*
Open uw terminal en voer in
brew installeren awscli.
Zodra de CLI-tool is geïnstalleerd, kunnen we ons AWS-account configureren met
aws configureren. Hier moet u de toegangssleutelinformatie invoeren die u eerder hebt gedownload. Het zou ongeveer het volgende moeten zijn.
Voor regio kunt u uw URL op de AWS-console controleren en uw regio vermelden. De mijne is bijvoorbeeld âÃÂÃÂap-zuidoost-1âÃÂÃÂ.
= Een React-app maken =
Mogelijk heeft u uw React-app al klaar om te implementeren. Als u echter een voorbeeld-app nodig heeft, kunt u de volgende opties gebruiken:
- Genereer een standaard React-app door deze uit te voeren
npx maak-reageer-app mijn-app
- Download mijn voorbeeld React-app (met een formuliervoorbeeld) van httpsgithub.com/harishv7/react-hook-form-example. Dit is gedaan voor een tutorial om formulieren toe te voegen aan React-apps. Bekijk het hier.
Als u klaar bent, zorgt u ervoor dat de afhankelijkheden allemaal zijn geïnstalleerd met behulp van
garen installeren en geef de app een run met behulp van
garen beginnen.
= Stel een S3-emmer in =
Nu we onze voorbeeld-app gereed hebben, kunnen we een S3-bucket configureren om onze app te hosten.
Zoek op de AWS-console naar âÃÂÃÂS3âÃÂàen ga naar S3 Dashboard. Klik op 'Create bucket'en geef de bucket een naam zoals 'my-react'-app-2021âÃÂà(of wat je maar wilt).
*Opmerking: de bucketnaam moet uniek zijn in heel S3. Kies dus een unieke naam die niet bestaat, anders krijg je een foutmelding!* 
Schakel openbare toegang tot de bucket in, aangezien we deze live hosten.
Laat de rest van de instellingen zoals ze zijn en klik op âÃÂÃÂCreate bucket. U ziet een item zoals het volgende op uw S3-dashboard.
Laten we klikken en naar onze nieuw gemaakte S3-bucket gaan.
Laten we op âÃÂÃÂEigenschappen klikken en helemaal naar beneden scrollen waar u zie 'Statische website hosting'.
Klik op âÃÂÃÂEnableâÃÂàen voer âÃÂÃÂindex.htmlâàin àonder Indexdocument.
Laat de overige velden ongewijzigd en klik op âÃÂÃÂWijzigingen opslaanâÃÂÃÂ.
= Implementeren naar S3 =
Nu zijn we klaar om onze app naar S3 te implementeren. De manier om dat te doen is door de volgende CLI-opdracht te gebruiken:
aws s3 sync build/ s3your-bucket-name>--acl public-read
We kunnen deze opdracht ook toevoegen aan ons bestand package.json als een âÃÂÃÂdeployâÃÂÃÂ-script.
Laten we onze app bouwen met behulp van
garenopbouw die helpt bij het creëren van een geoptimaliseerde productieopbouw.
Laten we vervolgens de CLI-opdracht hierboven uitvoeren of als u uw publicatiescript in package.json hebt ingesteld, kunnen we gebruiken
garen inzetten.
Dat is alles, onze app is nu geïmplementeerd!
Om te zien waar onze app wordt gehost (de websitelink), gaat u naar de AWS S3-console en klikt u op de bucket die u hebt gemaakt.
Ga naar het tabblad 'Eigenschappen'en scrol helemaal omlaag naar de 'Statische website'hostingsectie en onze URL zal daar zijn.
Klik erop en je app wordt geopend in een nieuw tabblad. Hier is de mijne!
= Conclusie =
We hebben onze React-app met succes geïmplementeerd in Amazon S3! Dit is een uitstekende keuze om uw React-prototypes snel te implementeren, te testen en met anderen te delen. Het is ook heel gemakkelijk en snel te implementeren.
Ik hoop dat deze tutorial nuttig voor je was!
Veel codeerplezier! ðÃÂÃÂû
*Meer inhoud op * *plainenglish.io*
