React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa
Rakentakaa React-sovellus, ladatkaa se S3:een ja määrittäkää CloudFront-jakelu sekä välimuistin mitätöinti.
React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
S3:n staattisen isännöinnin yleiskatsaus
AWS S3 voi tarjota staattisia tiedostoja (HTML, JS, CSS ja kuvat) verkkosivustona. Yhdessä CloudFrontin (CDN) kanssa saatte React SPA:lle maailmanlaajuisen jakelun, HTTPS:n ja pienen viiveen.
SPA:n koonti
Kootkaa React-sovelluksenne staattiseksi tuloshakemistoksi.
# Vite:
npm run build # outputs to dist/
# Create React App:
npm run build # outputs to build/
# Next.js static export:
next build && next export # outputs to out/S3-säilön luominen ja määrittäminen
Luokaa S3-säilö, ottakaa staattisten verkkosivustojen isännöinti käyttöön ja määrittäkää aloitus- ja virhedokumentit.
# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com
# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)Koontitiedostojen lataaminen
Synkronoikaa koonnin tulokset S3:een. Määrittäkää tiivistettyä nimeämistä käyttäville resursseille pitkät välimuistiotsakkeet ja index.html-tiedostolle no-cache.
# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
--exclude index.html \
--cache-control "max-age=31536000,immutable"
# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
--cache-control "no-cache,no-store"CloudFront-jakelun luominen
Luokaa CloudFront-jakelu, joka osoittaa S3-säilöön. Käyttäkää S3:n verkkosivuston päätepistettä (REST-päätepisteen sijaan), jotta SPA-reititys toimii.
# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routingSPA-reitityksen korjaus
CloudFront palauttaa 403-virheen tuntemattomista poluista (S3 ei tunne React-reittejä). Määrittäkää mukautettu virhevastaus: 403 → /index.html ja tilakoodiksi 200.
Mukautettu verkkotunnus ja SSL
Pyytäkää verkkotunnuksellenne ACM-varmenne alueella us-east-1 (CloudFrontin vaatimus). Liittäkää se jakeluun ja lisätkää CNAME-DNS-tietue, joka osoittaa CloudFront-verkkotunnukseen.
Välimuistin mitätöinti käyttöönoton yhteydessä
Kun uudet tiedostot on otettu käyttöön, mitätöikää CloudFrontin välimuisti tiedostolle index.html (S3:ssa se käyttää no-cache-asetusta, mutta CloudFront on saattanut tallentaa sen välimuistiin).
aws cloudfront create-invalidation \
--distribution-id EXXXXXXXXXXXXX \
--paths "/*"Käyttöönotto GitHub Actionsilla
Automatisoikaa käyttöönoton työnkulku CI:ssä: kootkaa sovellus → synkronoikaa se S3:een → mitätöikää CloudFrontin välimuisti.
- name: Deploy to S3
run: aws s3 sync dist/ s3://my-react-app.com/ --delete
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}
- name: Invalidate CloudFront
run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"S3-säilön käytäntö
Estäkää säilön julkinen käyttö ja käyttäkää Origin Access Control (OAC) -käytäntöä, jotta vain CloudFront voi lukea säilöä. Tämä on turvallisempaa kuin julkinen säilöisännöinti.
Kustannusarvio
S3:n staattinen isännöinti on erittäin edullista: noin 0,023 $/Gt tallennustilaa ja noin 0,0004 $/1 000 pyyntöä. CloudFrontin kustannukset vaihtelevat alueen ja tiedonsiirron mukaan, mutta ilmaisen käyttökiintiön puitteissa ensimmäinen 1 Tt kuukaudessa on maksuton.
Pikatarkistus
Miksi S3:n virhedokumentiksi kannattaa määrittää index.html React SPA:ta isännöitäessä?
Kertaus
Koontakaa SPA, synkronoikaa se S3:een eriytetyillä välimuistiasetuksilla (pitkä välimuisti tiivistettyä nimeämistä käyttäville resursseille ja no-cache index.html-tiedostolle) ja tarjoilkaa se CloudFrontin kautta. Korjatkaa SPA-reititys ohjaamalla 403-virheet tiedostoon /index.html. Automatisoikaa käyttöönotto GitHub Actionsilla ja mitätöikää CloudFrontin välimuisti jokaisen käyttöönoton yhteydessä.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa” ilmainen?
Kyllä – oppitunnin ”React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa”?
Rakentakaa React-sovellus, ladatkaa se S3:een ja määrittäkää CloudFront-jakelu sekä välimuistin mitätöinti. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Julkaiseminen Verceliin: nollamääritykset ja preview-URL-osoitteet
- React-SPA:n hostaus AWS S3:ssa ja CloudFrontissa
- React/Next.js-sovelluksen Dockerisointi
- GitHub Actionsin CI/CD Reactille