= Hoe AWS Amplify te gebruiken om een React-applicatie te implementeren =
== Een gids voor het implementeren van React-applicaties met AWS Amplify ==
Sinds ik begon met adviseren als Software Engineer, wilde ik een portfoliowebsite samenstellen die de
persoonlijke en professionele projecten waaraan ik heb gewerkt. Deze winterstop heb ik tijd besteed aan het ontwerpen, ontwikkelen en implementeren van mijn portfoliosite, en in dit artikel zal ik je laten zien hoe ik het heb geïmplementeerd met AWS Amplify. U kunt de website bekijken op dan-murphy.com en de code op GitHub.
= Een korte achtergrond =
Het grootste deel van mijn professionele werk bestaat uit het bouwen van datagestuurde applicaties en het stroomlijnen van datapijplijnen. Om deze taken uit te voeren, gebruik ik regelmatig Python en Ruby en neem ik JavaScript op voor elk frontend-werk. In een poging om meer vertrouwd te raken met React, besloot ik het framework te gebruiken om mijn portfoliowebsite te bouwen.
= De applicatie instellen =
De eerste stap die ik nam, was beslissen hoe ik de applicatie moest structureren. ik gebruikte
create-react-app als basissjabloon voor mijn mappen, en vervolgens de applicatie opnieuw gestructureerd met een paar extra mappen. De definitieve opstelling ziet er als volgt uit:
src
componenten
archieven
âÃÂÃÂextra's
¢ÃÂàgegevens
âÃÂÃÂimgs
Pagina's
âÃÂÃÂinhoud
¢ÃÂàgegevens
stijlen
testen
armaturen
Enkele opvallende veranderingen zijn de
**componenten**
, en
**Pagina's**
mappen.
**stijlen**
,
: Hier bewaar ik alle componenten voor de toepassing. Door de componenten in een gecentraliseerde map op te slaan, is het gemakkelijker om mijn code opnieuw te gebruiken en te herstructureren en is het intuïtiever voor anderen om het te begrijpen. Enkele van de componenten waaruit mijn portfoliowebsite bestaat, zijn
componenten
Koptekst,
Voettekst, en
Projectzijbalk.
: Hier bouw ik de afzonderlijke pagina's voor de toepassing. Ik importeer de benodigde componenten uit het
Pagina's
map en verzamel ze vervolgens om de pagina te ontwerpen. Hier is een voorbeeld van hoe ik dit deed voor de
componenten startpagina:
: Hier definieer ik globale CSS-stijlen voor de toepassing. Ik ben dol op gebruik
stijlen
gestileerde componenten voor individuele componenten, maar ik heb het ook nuttig gevonden om globale stijlen te bouwen die voor elke pagina beschikbaar zijn.
Ten slotte gebruiken we om verzoeken naar de juiste pagina's te verwijzen
reactie-router-dom. De routes zijn vastgelegd in de
App.js-bestand zoals hieronder weergegeven:
Dit zal in kaart brengen
Startpagina,
/projecten verzoeken aan
ProjectenPagina,
/over verzoeken aan
OverPage, en
/bookshelf verzoeken aan
BoekPagina. Nu de ontwikkeling van de applicatie is voltooid, moeten we deze implementeren zodat anderen deze kunnen gebruiken!
/verzoeken aan
= Implementeren met AWS Amplify =
== Overzicht ==
Er zijn verschillende manieren om een React-website te implementeren, maar ik heb ontdekt dat een van de eenvoudigste is om
**AWS Amplify Amplify wordt beschreven als de snelste en gemakkelijkste manier om mobiele en web-apps te bouwen die schaalbaar zijn. Om dit te bereiken, AWS extrapoleert alle complicaties van het opzetten van een server, het installeren van afhankelijkheden en het maken van een productieversie van uw website, zodat u zich uitsluitend kunt concentreren op het bouwen van een intuïtieve UX. Raadpleeg hun documentatie voor meer informatie over wat AWS Amplify biedt voor datagestuurde applicaties (met name websites met een **frontend** en **backend).
== Uw repository verbinden ==
Om uw webapp op AWS Amplify te hosten, moet u eerst verbinding maken met de repository met uw broncode. Om dit te doen, kunt u navigeren naar de
*AWS Amplify* *Aan de slag* **Host My Web App en klik op **App repo *pagina verbinden, scrol naar*pagina, scrol naar 
Vervolgens wordt u doorgestuurd naar een aparte pagina waar u de repository met uw broncode kunt verbinden. Voor dit voorbeeld kies ik GitHub, maar AWS Amplify ondersteunt ook BitBucket, GitLab, AWS CodeCommit en zelfs implementatie zonder een Git-provider.
Na succesvolle autorisatie kunt u selecteren welke repository u wilt implementeren en de branch selecteren die AWS Amplify moet gebruiken voor productiebuilds.
Klik daarna
**Next** en AWS zal je vragen om je *build* en *test* instellingen te configureren. De basissjabloon die AWS biedt, wordt hieronder weergegeven.
versie 1
voorkant:
fasen:
voorbouw:
commando's:
- npm installatie build:
commando's:
- npm run bouwen
artefacten:
baseDirectory: bouwen
bestanden:
-
cache:
paden:
- node_modules
Daarnaast onder de
**geavanceerde instellingen** schakelen, kunt u omgevingsvariabelen en een op maat gemaakte container instellen.
Klik tenslotte, na het bekijken van de instellingen voor uw toepassing, op
**Opslaan en implementeren **en **AWS begint met het configureren en implementeren van uw applicatie. Wanneer AWS klaar is met implementeren, kunt u naar de startpagina van Amplify gaan en uw nieuw geïmplementeerde applicatie bekijken. AWS begint met het configureren en implementeren van uw applicatie. Wanneer AWS klaar is met implementeren, kunt u naar de startpagina van Amplify gaan en uw nieuw geïmplementeerde applicatie bekijken.
Laten we nu de URL aanpassen met
**AWS Versterk domeinbeheer
== Een aangepast domein toevoegen ==
Om te beginnen met het toevoegen van een aangepast domein, navigeert u naar de linkerzijbalk en selecteert u
**domeinbeheer
**domeinbeheer**instelling.
Selecteer vervolgens
**domein toevoegen **domein configureren **voer uw domeinnaam in (zoals hieronder weergegeven) en klik**voer uw domeinnaam in (zoals hieronder weergegeven) en klik op 
Hierna kunt u eventuele omleidingen instellen die nodig zijn voor uw domein. In het volgende voorbeeld maak ik bijvoorbeeld een omleiding van httpsdan-murphy.com naar httpswww.dan-murphy.com.
Ten slotte, nadat uw aangepaste domein correct is geconfigureerd, zal AWS u voorzien van een
**Validatiecertificaat U kunt dit certificaat ook bekijken in de AWS Certificate Manager-console.
== Een CNAME-record toevoegen ==
De laatste stap bij het configureren van uw aangepaste domein is het toevoegen van een CNAME-record. In het volgende voorbeeld gebruik ik Google Domains, maar de fundamentele concepten blijven hetzelfde voor de verschillende domeinregistreerders.
Scrol eerst naar beneden naar
**Aangepaste bronrecords** in Google Domains. Maak een *CNAME *record dat alle subdomeinen naar het AWS Amplify-domein verwijst: Naam: voer de naam van het subdomein in. Als het subdomein www.domain.com is, voert u in. Als het www app.domain.com is, voert u app in. Gegevens: Klik op de domeinbeheerpagina op Acties en selecteer vervolgens DNS-records bekijken. Voer vervolgens het beschikbare AWS Amplify-domein in onder DNS-provider configureren. 
**Domeinbeheer**pagina, selecteer **Acties **DNS-records bekijken**
Alles bij elkaar ziet de aangepaste resourcerecord er als volgt uit:
Voeg er vervolgens nog een toe
*CNAME*-record dat verwijst naar de AWS Certificate Manager-validatieserver. De gevalideerde AWS Certificate Manager verwerkt TLS voor uw toepassing: Naam: voer het subdomein van de validatieserver in. Als het DNS-record voor het verifiëren van het eigendom van uw domein _1234.example.com is, voert u alleen _1234 in. Gegevens: voer het ACM validatiecertificaat in. Als de validatieserver _1234.abcdefg.acm-validations.aws. is, voert u _1234.abcdefg.acm-validations.aws in.
Alle informatie voor uw validatiecertificaten is te vinden in de AWS Certificate Manager-console. Na de tweede
*CNAME* is toegevoegd, uw aangepaste records zouden er als volgt uit moeten zien: 
Laten we tot slot een
**Synthetisch record** om een subdomein door te sturen: Subdomein: voer de domein-URL in: www. 
= Inpakken =
Over het algemeen hebben we in dit artikel geleerd hoe we React-applicaties kunnen structureren en implementeren met AWS Amplify. Eerst bespraken we hoe een react-applicatie kan worden gemodulariseerd in
*componenten* *pagina's* mappen. Vervolgens leerden we over **AWS Amplify** en hoe we hiermee statische en datagestuurde applicaties kunnen implementeren. Ten slotte leerden we over het gebruik van **AWS Amplify Domain Management** en **Google Domains **om het domein van onze applicatie aan te passen. **en en
Als je vragen, opmerkingen of feedback hebt over dit artikel of mijn portfoliosite, kun je reageren of me een e-mail sturen op
*
[email protected]*. Bedankt voor het lezen!
