= Hur man använder AWS Amplify för att distribuera en React Application =
== En guide för att distribuera React-applikationer med AWS Amplify ==
Sedan jag började konsultera som mjukvaruingenjör har jag velat sätta ihop en portföljwebbplats som visar upp
personliga och professionella projekt jag har arbetat med. Det här vinteruppehållet tillbringade jag tid med att designa, utveckla och distribuera min portföljwebbplats, och i den här artikeln kommer jag att gå igenom hur jag distribuerade den med AWS Amplify. Du kan se webbplatsen på dan-murphy.com och koden på GitHub.
= En kort bakgrund =
Det mesta av mitt professionella arbete innebär att bygga datadrivna applikationer och effektivisera datapipelines. För att utföra dessa uppgifter använder jag regelbundet Python och Ruby och införlivar JavaScript för alla frontend-arbeten. I ett försök att bli mer bekväm med React bestämde jag mig för att använda ramverket för att bygga min portföljwebbplats.
= Konfigurera applikationen =
Det första steget jag tog var att bestämma mig för hur jag skulle strukturera applikationen. jag använde
create-react-app som basmall för mina kataloger, och strukturerade sedan om applikationen med några ytterligare mappar. Den färdiga installationen ser ut så här:
src
komponenter
âÃÂÃÂarkiv
âÃÂÃÂextra
âÃÂÃÂdata
âÃÂÃÂimgs
sidor
âÃÂÃÂinnehåll
âÃÂÃÂdata
stilar
tester
inventarier
Några av de anmärkningsvärda förändringarna är
**komponenter**
, och
**sidor**
kataloger.
**stilar**
,
: Det är här jag lagrar alla komponenter för applikationen. Genom att lagra komponenterna i en centraliserad mapp är det lättare att återanvända och omstrukturera min kod och mer intuitivt för andra att förstå. Några av komponenterna som utgör min portföljwebbplats är
komponenter
Rubrik,
Sidfot, och
ProjectSidebar.
: Det är här jag bygger de distinkta sidorna för applikationen. Jag importerar de nödvändiga komponenterna från
sidor
mapp och sedan samla dem för att designa sidan. Här är ett exempel på hur jag gjorde detta för
komponenters hemsida:
: Det är här jag definierar globala CSS-stilar för applikationen. Jag älskar att använda
stilar
styled-components för enskilda komponenter, men jag har också funnit det användbart att bygga globala stilar som är tillgängliga för varje sida.
Slutligen, för att mappa förfrågningar till rätt sidor använder vi
reagera-router-dom. Rutterna definieras i
App.js-fil enligt nedan:
Detta kommer att kartläggas
Hemsida,
/projekt förfrågningar till
Projektsida,
/om förfrågningar till
AboutPage, och
/bokhylla begär till
Boksida. Nu när utvecklingen av applikationen är klar måste vi distribuera den så att andra kan använda den!
/begär till
= Implementera med AWS Amplify =
== Översikt ==
Det finns flera sätt att distribuera en React-webbplats, men jag har funnit att ett av de enklaste är att använda
**AWS Amplify Amplify beskrivs som det snabbaste och enklaste sättet att bygga mobil- och webbappar som skalas. AWS extrapolerar alla komplikationer med att sätta upp en server, installera beroenden och skapa en produktionsuppbyggnad av din webbplats, så att du enbart kan fokusera på att bygga en intuitiv UX. För att lära dig mer om vad AWS Amplify erbjuder för datadrivna applikationer (specifikt webbplatser med **frontend** och **backend, kolla in deras dokumentation.
== Ansluta ditt arkiv ==
För att vara värd för din webbapp på AWS Amplify måste du först ansluta arkivet som innehåller din källkod. För att göra detta kan du navigera till
*AWS Amplify* *Komma igång* **Host My Web App och klicka på **Connect app repo *page, scroll to* page, scroll to 
Sedan kommer du att omdirigeras till en separat sida där du kan ansluta arkivet som innehåller din källkod. För det här exemplet kommer jag att välja GitHub, men AWS Amplify stöder också BitBucket, GitLab, AWS CodeCommit och till och med driftsättning utan en Git-leverantör.
Efter framgångsrik auktorisering kan du välja vilket arkiv du vill distribuera och välja grenen AWS Amplify ska använda för produktionsbyggnationer.
Efter det klickar du
**Next** och AWS kommer att be dig att konfigurera dina *build* och *test* inställningar. Basmallen som AWS tillhandahåller visas nedan.
version: 1
frontend:
faser:
preBuild:
kommandon:
- npm installation build:
kommandon:
- npm kör bygg
artefakter:
baseDirectory: bygg
filer:
-
cache:
vägar:
- node_modules
Dessutom, under
**avancerade inställningar** växlar, du kan ställa in miljövariabler och en anpassad byggbehållare.
Slutligen, efter att ha granskat inställningarna för din applikation, klicka
**Spara och distribuera **och **AWS börjar konfigurera och distribuera din applikation. När AWS är klar med implementeringen kan du navigera till Amplifys hemsida och se att din nyligen distribuerade applikation AWS börjar konfigurera och distribuera din applikation. När AWS är klar med implementeringen kan du navigera till Amplifys hemsida och se din nyligen distribuerade applikation.
Nu, låt oss anpassa URL:en med hjälp av
**AWS Förstärk domänhantering
== Lägga till en anpassad domän ==
För att komma igång med att lägga till en anpassad domän, navigera till det vänstra sidofältet och välj
**domänhantering 
**domänhantering**inställning.
Välj sedan
**lägg till domän **konfigurera domän **ange ditt domännamn (som visas nedan), och klicka**ange ditt domännamn (som visas nedan), och klicka på 
Efter detta kan du ställa in alla omdirigeringar som är nödvändiga för din domän. Till exempel, i följande exempel skapar jag en omdirigering från httpsdan-murphy.com till httpswww.dan-murphy.com.
Slutligen, efter att din anpassade domän är korrekt konfigurerad, kommer AWS att förse dig med en
**Valideringscertifikat Du kan också se detta certifikat i AWS Certificate Manager-konsolen.
== Lägga till en CNAME-post ==
Det sista steget i att konfigurera din anpassade domän är att lägga till en CNAME-post. I följande exempel använder jag Google Domains, men de grundläggande koncepten förblir desamma för olika domänregistratorer.
Bläddra först ner till
**Custom Resource Records** i Google Domains. Skapa en *CNAME *post som pekar alla underdomäner till AWS Amplify-domänen: Namn: ange underdomännamnet. Om underdomänen är www.domain.com anger du . Om det är www app.domain.com, ange app. Data: På domänhanteringssidan klickar du på Åtgärder och väljer sedan Visa DNS-poster. Ange sedan AWS Amplify-domänen som är tillgänglig under Konfigurera DNS-leverantör. 
**Domänhantering**sida, välj **Åtgärder **Visa DNS-poster**
Sammantaget kommer den anpassade resursposten att se ut så här:
Lägg sedan till en till
*CNAME*-post som pekar på AWS Certificate Manager-valideringsservern. Den validerade AWS Certificate Manager hanterar TLS för din applikation: Namn: ange valideringsserverns underdomän. Om DNS-posten för att verifiera äganderätten till din domän är _1234.example.com anger du endast _1234. Data: ange ACM-valideringscertifikatet. Om valideringsservern är _1234.abcdefg.acm-validations.aws. anger du _1234.abcdefg.acm-validations.aws.
All information om dina valideringscertifikat finns i AWS Certificate Manager-konsolen. Efter den andra
*CNAME* har lagts till, dina anpassade poster bör se ut så här: 
Slutligen, låt oss lägga till en
**Synthetic Record** för att skapa en underdomän vidarebefordra: Underdomän: ange Domän-URL: www. 
= Avslutning =
Sammantaget lärde vi oss i den här artikeln hur man strukturerar React-applikationer och distribuerar dem med AWS Amplify. Först diskuterade vi hur man modulariserar en reaktionsapplikation till
*komponenter* *sidor* mappar. Sedan lärde vi oss om **AWS Amplify** och hur man distribuerar statiska och datadrivna applikationer med det. Slutligen lärde vi oss hur vi använder **AWS Amplify Domain Management** och **Google Domains **för att anpassa domänen för vår applikation. **och och
Om du har några frågor, funderingar eller feedback om den här artikeln eller min portföljwebbplats får du gärna kommentera eller mejla mig på
*
[email protected]*. Tack för att du läser!
