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à.

# Crea un backend per un'app di prima generazione
<a name="build-backend-Gen1"></a>

In questo tutorial, configurerai un CI/CD flusso di lavoro completo con Amplify. Distribuirai un'app frontend su Amplify Hosting. Quindi creerai un backend usando Amplify Studio. Infine, collegherai il backend cloud all'app frontend.

## Prerequisiti
<a name="fullstack-sample-prerequisites"></a>

Prima di iniziare questo tutorial, completa i seguenti prerequisiti.

**Registrati per un Account AWS**  
Se non sei già un AWS cliente, devi [crearne uno Account AWS](https://portal.aws.amazon.com/billing/signup#/start/email) seguendo le istruzioni online. La registrazione ti consente di accedere ad Amplify e AWS ad altri servizi che puoi utilizzare con la tua applicazione.

**Crea un repository Git**  
Amplify GitHub supporta, GitLab Bitbucket e. AWS CodeCommit Invia la tua applicazione al tuo repository Git.

**Installazione dell'interfaccia a riga di comando (CLI) Amplify**  
*Per istruzioni, consulta [Installare la CLI Amplify nella documentazione di Amplify](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli) Framework.*

## Fase 1: Implementazione di un frontend
<a name="step-1-deploy-frontend"></a>

Se hai un'app frontend esistente in un repository git che desideri utilizzare per questo esempio, puoi procedere con le istruzioni per la distribuzione di un'app frontend.

*Se devi creare una nuova app frontend da utilizzare per questo esempio, puoi seguire le istruzioni Create React App nella documentazione di [Create React App](https://create-react-app.dev/docs/getting-started).*

**Per distribuire un'app frontend**

1. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/)

1. Nella pagina **Tutte le app**, scegli **Nuova app**, quindi **Ospita app web** nell'angolo in alto a destra.

1. **Seleziona il tuo fornitore GitHub, Bitbucket o di AWS CodeCommit repository GitLab, quindi scegli Continua.**

1. Amplify autorizza l'accesso al tuo repository git. Per gli GitHub archivi, Amplify ora utilizza la funzione Apps per autorizzare GitHub l'accesso ad Amplify. 

   Per ulteriori informazioni sull'installazione e l'autorizzazione dell'App, consulta. GitHub [Configurazione dell'accesso Amplify ai repository GitHub](setting-up-GitHub-access.md)

1. Nella pagina **Aggiungi ramo del repository**, procedi come segue:

   1. Nell'elenco dei **repository aggiornati di recente**, seleziona il nome del repository da connettere.

   1. Nell'elenco **Branch**, seleziona il nome del ramo del repository da connettere.

   1. Scegli **Next (Successivo)**.

1. Nella pagina **Configura le impostazioni di build**, scegli **Avanti**.

1. Nella pagina **Revisione**, scegli **Salva e distribuisci.** Una volta completata la distribuzione, puoi visualizzare l'app nel dominio `amplifyapp.com` predefinito.

**Nota**  
[Per aumentare la sicurezza delle tue applicazioni Amplify, il dominio amplifyapp.com è registrato *nella Public* Suffix List (PSL).](https://publicsuffix.org/) Per una maggiore sicurezza, ti consigliamo di utilizzare i cookie con un `__Host-` prefisso se hai bisogno di impostare cookie sensibili nel nome di dominio predefinito per le tue applicazioni Amplify. Questa pratica ti aiuterà a difendere il tuo dominio dai tentativi CSRF (cross-site request forgery). Per ulteriori informazioni, consulta la pagina [Impostazione cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes) nella pagina Mozilla Developer Network.

## Fase 2: Creare un backend
<a name="step-2-create-backend"></a>

Ora che hai distribuito un'app frontend su Amplify Hosting, puoi creare un backend. Utilizza le seguenti istruzioni per creare un backend con un database semplice e un endpoint API GraphQL.

**Per creare un backend**

1. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/)

1. Nella pagina **Tutte le app**, seleziona l'app che hai creato nel *passaggio* 1.

1. Nella home page dell'app, scegli la scheda **Ambienti di backend**, quindi scegli **Inizia**. Questo avvia il processo di configurazione per un ambiente di **staging** predefinito.

1. Al termine della configurazione, scegli **Launch Studio** per accedere all'ambiente di backend **di staging** in Amplify Studio.

Amplify Studio è un'interfaccia visiva per creare e gestire il backend e accelerare lo sviluppo dell'interfaccia utente frontend. Per ulteriori informazioni su Amplify Studio, consulta la documentazione di [Amplify](https://docs.amplify.aws/gen1/react/tools/console/) Studio.

Usa le seguenti istruzioni per creare un database semplice utilizzando l'interfaccia visual backend builder di Amplify Studio.

**Crea un modello di dati**

1. Nella home page dell'ambiente di **staging** dell'app, scegli **Crea modello di dati**. Verrà aperto il designer del modello di dati.

1. Nella pagina di **modellazione dei dati**, scegli **Aggiungi modello**.

1. Per il titolo, inserisci**Todo**.

1. Scegli **Aggiungi un campo**.

1. Per **Nome campo**, inserisci**Description**.

   La schermata seguente è un esempio di come apparirà il modello di dati nel designer.  
![L'interfaccia utente di Amplify Studio per la creazione di un modello di dati.](http://docs.aws.amazon.com/it_it/amplify/latest/userguide/images/amplify-deploy-backend-1.png)

1. Scegli **Salva e distribuisci.**

1. Torna alla console Amplify Hosting e **la distribuzione dell'**ambiente di staging sarà in corso.

Durante l'implementazione, Amplify Studio crea tutte le risorse AWS necessarie nel backend, tra cui un'API AWS AppSync GraphQL per accedere ai dati e una tabella Amazon DynamoDB per ospitare gli elementi Todo. Amplify CloudFormation utilizza per implementare il backend, il che consente di archiviare la definizione del backend come. infrastructure-as-code

## Passaggio 3: Connect il backend al frontend
<a name="step-3-connect-backend-to-frontend"></a>

Ora che hai distribuito un frontend e creato un backend cloud che contiene un modello di dati, devi connetterli. Usa le seguenti istruzioni per trasferire la definizione del backend al tuo progetto di app locale con la CLI Amplify.

**Per connettere un backend cloud a un frontend locale**

1. Apri una finestra di terminale e vai alla directory principale del tuo progetto locale.

1. Esegui il seguente comando nella finestra del terminale, sostituendo il testo rosso con l'ID univoco dell'app e il nome dell'ambiente di backend per il tuo progetto.

   ```
   amplify pull --appId {{abcd1234}} --envName {{staging}}
   ```

1. Segui le istruzioni nella finestra del terminale per completare la configurazione del progetto.

Ora puoi configurare il processo di compilazione per aggiungere il backend al flusso di lavoro di distribuzione continua. Usa le seguenti istruzioni per connettere un ramo frontend con un backend nella console Amplify Hosting.

**Per connettere un ramo di app frontend e un backend cloud**

1. Nella home page dell'app, scegli la scheda **Ambienti di hosting.**

1. Individua il ramo **principale** e scegli **Modifica**.  
![La posizione del link Modifica per un ramo nella console Amplify.](http://docs.aws.amazon.com/it_it/amplify/latest/userguide/images/amplify_edit_backend_alternate.png)

1. Nella finestra **Modifica backend di destinazione**, per **Ambiente**, seleziona il nome del backend da connettere. *In questo esempio, scegli il backend di **staging** che hai creato nel passaggio 2.* 

   Per impostazione predefinita, lo stack completo CI/CD è abilitato. Deseleziona questa opzione per disattivare lo stack completo CI/CD per questo backend. *La disattivazione del full-stack CI/CD fa sì che l'app venga eseguita in modalità pull only.* In fase di compilazione, Amplify genererà automaticamente solo `aws-exports.js` il file, senza modificare l'ambiente di backend.

1. Successivamente, devi impostare un ruolo di servizio per concedere ad Amplify le autorizzazioni necessarie per apportare modifiche al backend dell'app. Puoi utilizzare un ruolo di servizio esistente o crearne uno nuovo. Per istruzioni, consulta [Aggiungere un ruolo di servizio con autorizzazioni per distribuire risorse di backend](amplify-service-role.md).

1. Dopo aver aggiunto un ruolo di servizio, torna alla finestra **Modifica backend di destinazione** e scegli **Salva**.

1. Per completare la connessione del backend **di staging** al ramo **principale** dell'app frontend, esegui una nuova build del progetto.

   Esegui una delle seguenti operazioni:
   + Dal tuo repository git, invia del codice per avviare una build nella console Amplify.
   + Nella console Amplify, vai alla pagina dei dettagli della build dell'app e **scegli** Redeploy this version.

## Fasi successive
<a name="next-steps-set-up-feature-branch-deployments"></a>

### Configura le distribuzioni delle feature branch
<a name="set-up-feature-branch-deployments"></a>

Segui il nostro flusso di lavoro consigliato per [configurare implementazioni di feature branch con più ambienti di backend.](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments)

### Crea un'interfaccia utente frontend in Amplify Studio
<a name="create-studio-ui-components"></a>

Usa Studio per creare l'interfaccia utente di frontend con un set di componenti dell' ready-to-useinterfaccia utente, quindi collegala al backend dell'app. *Per ulteriori informazioni e tutorial, consulta la guida per l'utente di Amplify [Studio nella documentazione di Amplify Framework](https://docs.amplify.aws/gen1/react/tools/console/).*