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
*Jean-Baptiste Guillois, Amazon Web Services*
## 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 di una SPA scritto in React su Amazon Simple Storage Service (Amazon S3) e Amazon. CloudFront La SPA in questo modello utilizza un'API REST configurata in Amazon API Gateway ed esposta tramite una CloudFront distribuzione Amazon per semplificare la gestione della [condivisione delle risorse tra le origini (CORS).](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html)
## Prerequisiti e limitazioni
**Prerequisiti**
+ Un attivo. Account AWS
+ Node.js e`npm`, installato e configurato. Per ulteriori informazioni, consulta la sezione [Download](https://nodejs.org/en/download/) della documentazione di Node.js.
+ Yarn, installato e configurato. Per ulteriori informazioni, consulta la documentazione di [Yarn.](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
+ Git, installato e configurato. Per ulteriori informazioni, consulta la [documentazione di Git](https://github.com/git-guides/install-git).
## Architecture
Questa architettura viene implementata automaticamente utilizzando AWS CloudFormation (infrastruttura come codice). Utilizza servizi regionali come Amazon S3 per archiviare gli asset statici e Amazon CloudFront con Amazon API Gateway per esporre gli endpoint API regionali (REST). I log delle applicazioni vengono raccolti utilizzando Amazon CloudWatch. Tutte le chiamate AWS API vengono verificate. 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 le query DNS vengono gestite da Amazon Route 53.
## Tools (Strumenti)
**Servizi AWS**
+ [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) ti aiuta a creare, pubblicare, gestire, monitorare e proteggere REST, HTTP e WebSocket APIs su qualsiasi scala.
+ [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)ti 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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) accelera la distribuzione dei tuoi contenuti web distribuendoli attraverso una rete mondiale di data center, che riduce la latenza e migliora le prestazioni.
+ [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)ti aiuta a controllare la governance, la conformità e il rischio operativo del tuo. Account AWS
+ [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) 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)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) ti aiuta a gestire in modo sicuro l'accesso alle tue AWS risorse controllando chi è autenticato e autorizzato a utilizzarle.
+ [Amazon Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) è un servizio Web DNS altamente scalabile e disponibile.
+ [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) è 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 pattern è disponibile nell'archivio di applicazioni [CORS a pagina singola GitHub basato su React](https://github.com/aws-samples/react-cors-spa).
## 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 (Amazon EC2) 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](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) per proteggere le tue risorse da attacchi dannosi.
## Epiche
### Crea e distribuisci localmente la tua applicazione
| Operazione | Description | Competenze richieste |
| --- | --- | --- |
| Clonare il repository. | Eseguite il comando seguente per clonare il repository dell'applicazione di esempio:git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
| Sviluppatore di app, AWS DevOps |
| Distribuisci l'applicazione localmente. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Sviluppatore di app, AWS DevOps |
| Accedi localmente all'applicazione. | Apri una finestra del browser e inserisci l'`http://localhost:3000`URL per accedere all'applicazione. | Sviluppatore di app, AWS DevOps |
### Distribuzione dell’applicazione
| Operazione | Description | Competenze richieste |
| --- | --- | --- |
| Implementa il AWS CloudFormation modello. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Sviluppatore di app, AWS DevOps |
| Personalizza i file sorgente dell'applicazione. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Sviluppatore di app |
| Compila il pacchetto applicativo. | Nella directory del progetto, esegui il `yarn build` comando per creare il pacchetto dell'applicazione. | Sviluppatore di app |
| Distribuisci il pacchetto dell'applicazione. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Sviluppatore di app, AWS DevOps |
### Eseguire il test dell’applicazione
| Operazione | Description | Competenze richieste |
| --- | --- | --- |
| Accedere e testare l'applicazione. | Apri una finestra del browser, quindi incolla il dominio di CloudFront distribuzione (l'`SPADomain`output CloudFormation dello stack distribuito in precedenza) per accedere all'applicazione. | Sviluppatore di app, AWS DevOps |
### Pulisci le risorse
| Operazione | Description | Competenze richieste |
| --- | --- | --- |
| Elimina il contenuto del bucket S3. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, sviluppatore di app |
| Elimina lo CloudFormation stack. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, sviluppatore di app |
## Risorse correlate
Per distribuire e ospitare la tua applicazione web, puoi anche utilizzare [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html), che fornisce un flusso di lavoro basato su Git per ospitare app web serverless complete con distribuzione continua. Amplify Hosting fa parte [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)di, 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 di CORS, l'API REST viene esposta tramite una distribuzione. CloudFront