Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Implementa un'applicazione a pagina singola basata su React su Amazon S3 e CloudFront
Creato da Jean-Baptiste Guillois () AWS
Riepilogo
Un'applicazione a pagina singola (SPA) è un sito Web o un'applicazione Web che aggiorna dinamicamente il contenuto di una pagina Web visualizzata utilizzando. JavaScript APIs Questo approccio migliora l'esperienza utente e le prestazioni di un sito Web poiché aggiorna solo i nuovi dati anziché ricaricare l'intera pagina Web dal server.
Questo modello fornisce un step-by-step approccio alla codifica e all'hosting ed è scritto in React su Amazon Simple Storage Service (Amazon S3) e Amazon. SPA CloudFront SPAIn questo modello utilizza un REST API file configurato in Amazon API Gateway ed esposto tramite una CloudFront distribuzione Amazon per semplificare la gestione della condivisione delle risorse tra le origini (CORS).
Prerequisiti e limitazioni
Prerequisiti
Un attivo Account AWS.
Node.js e
npm, installato e configurato. Per ulteriori informazioni, consulta la sezione Downloaddella documentazione di Node.js. Yarn, installato e configurato. Per ulteriori informazioni, consulta la documentazione di Yarn.
Git, installato e configurato. Per ulteriori informazioni, consulta la documentazione di Git
.
Architettura
Questa architettura viene implementata automaticamente utilizzando AWS CloudFormation (infrastruttura come codice). Utilizza servizi regionali come Amazon S3 per archiviare gli asset statici e Amazon con CloudFront Amazon API Gateway per esporre gli endpoint Regional API ()REST. I log delle applicazioni vengono raccolti utilizzando Amazon CloudWatch. Tutte le AWS API chiamate vengono controllate. AWS CloudTrail Tutte le configurazioni di sicurezza (ad esempio, identità e autorizzazioni) sono gestite in AWS Identity and Access Management (). IAM I contenuti statici vengono distribuiti tramite Amazon CloudFront Content Delivery Network (CDN) e DNS le query vengono gestite da Amazon Route 53.
Strumenti
Servizi AWS
Amazon API Gateway ti aiuta a creare, pubblicare, gestire RESTHTTP, monitorare e proteggere WebSocket APIs su qualsiasi scala.
AWS CloudFormationti aiuta a configurare AWS le risorse, fornirle in modo rapido e coerente e gestirle durante tutto il loro ciclo di vita in tutte Account AWS le regioni.
Amazon CloudFront accelera la distribuzione dei tuoi contenuti web distribuendoli attraverso una rete mondiale di data center, che riduce la latenza e migliora le prestazioni.
AWS CloudTrailti aiuta a controllare la governance, la conformità e il rischio operativo del tuo. Account AWS
Amazon ti CloudWatch aiuta a monitorare i parametri delle tue AWS risorse e delle applicazioni su cui esegui AWS in tempo reale.
AWS Identity and Access Management (IAM) ti aiuta a gestire in modo sicuro l'accesso alle tue AWS risorse controllando chi è autenticato e autorizzato a utilizzarle.
Amazon Route 53 è un servizio DNS Web altamente disponibile e scalabile.
Amazon Simple Storage Service (Amazon S3) è un servizio di archiviazione degli oggetti basato sul cloud che consente di archiviare, proteggere e recuperare qualsiasi quantità di dati.
Codice
Il codice applicativo di esempio di questo modello è disponibile nell'archivio di applicazioni a pagina CORSsingola GitHub basato su React
Best practice
Utilizzando lo storage di oggetti Amazon S3, puoi archiviare gli asset statici dell'applicazione in modo sicuro, altamente resiliente, performante ed economico. Non è necessario utilizzare un contenitore dedicato o un'istanza Amazon Elastic Compute Cloud (AmazonEC2) per questa attività.
Utilizzando la rete di distribuzione di CloudFront contenuti Amazon, puoi ridurre la latenza che i tuoi utenti potrebbero riscontrare quando accedono alla tua applicazione. Puoi anche collegare un firewall per applicazioni Web (AWS WAF) per proteggere le tue risorse da attacchi dannosi.
Epiche
| Attività | Descrizione | Competenze richieste |
|---|---|---|
Clonare il repository. | Eseguite il comando seguente per clonare il repository dell'applicazione di esempio:
| Sviluppatore di app, AWS DevOps |
Distribuisci l'applicazione localmente. |
| Sviluppatore di app, AWS DevOps |
Accedi localmente all'applicazione. | Apri una finestra del browser e inserisci | Sviluppatore di app, AWS DevOps |
| Attività | Descrizione | Competenze richieste |
|---|---|---|
Implementa il AWS CloudFormation modello. |
| Sviluppatore di app, AWS DevOps |
Personalizza i file sorgente dell'applicazione. |
| Sviluppatore di app |
Compila il pacchetto applicativo. | Nella directory del progetto, esegui il | Sviluppatore di app |
Distribuisci il pacchetto dell'applicazione. |
| Sviluppatore di app, AWS DevOps |
| Attività | Descrizione | Competenze richieste |
|---|---|---|
Accedere e testare l'applicazione. | Apri una finestra del browser, quindi incolla il dominio di CloudFront distribuzione (l' | Sviluppatore di app, AWS DevOps |
| Attività | Descrizione | Competenze richieste |
|---|---|---|
Elimina il contenuto del bucket S3. |
| AWS DevOps, Sviluppatore di app |
Elimina lo AWS CloudFormation stack. |
| AWS DevOps, Sviluppatore di app |
Risorse correlate
Per distribuire e ospitare la tua applicazione web, puoi anche utilizzare AWS Amplify Hosting, che fornisce un flusso di lavoro basato su Git per ospitare app web serverless complete con distribuzione continua. Amplify Hosting fa parte AWS Amplifydi, che fornisce una serie di strumenti e funzionalità appositamente progettati che consentono agli sviluppatori web e mobili frontend di creare rapidamente e facilmente applicazioni complete su. AWS
Informazioni aggiuntive
Per gestire le URLs richieste non valide dell'utente che potrebbero generare errori 403, una pagina di errore personalizzata configurata nella CloudFront distribuzione rileva gli errori 403 e li reindirizza al punto di ingresso dell'applicazione (). index.html
Per semplificare la gestione diCORS, viene esposto tramite una distribuzione. REST API CloudFront
