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à. # Guida introduttiva alla distribuzione di un'app su Amplify Hosting Per aiutarti a capire come funziona Amplify Hosting, i seguenti tutorial ti guidano attraverso la creazione e la distribuzione di applicazioni create utilizzando i comuni framework SSR supportati da Amplify. **Topics** + [Distribuisci un'app Next.js](getting-started-next.md) + [Distribuisci un'app Nuxt.js](get-started-nuxt.md) + [Distribuisci un'app Astro.js](get-started-astro.md) + [Implementa un'app SvelteKit](get-started-sveltekit.md) # Distribuisci un'app Next.js su Amplify Hosting Questo tutorial illustra la creazione e la distribuzione di un'applicazione Next.js da un repository Git. 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. **Creazione di un'applicazione** Crea un'applicazione Next.js di base da utilizzare per questo tutorial, utilizzando le [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)istruzioni nella documentazione di *Next.js*. **Crea un repository Git** Amplify GitHub supporta, GitLab Bitbucket e. AWS CodeCommit Invia la tua `create-next-app` applicazione al tuo repository Git. ## Passaggio 1: Connect un repository Git In questo passaggio, connetti la tua applicazione Next.js in un repository Git ad Amplify Hosting. **Per connettere un'app in un repository Git** 1. Apri la console [Amplify](https://console.aws.amazon.com/amplify/). 1. Se stai distribuendo la tua prima app nella regione corrente, per impostazione predefinita inizierai dalla pagina del **AWS Amplify**servizio. Scegli **Distribuisci un'app** nella parte superiore della pagina. 1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.** Per gli GitHub archivi, Amplify utilizza la funzione App 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) **Nota** *Dopo aver autorizzato la console Amplify con Bitbucket GitLab, AWS CodeCommit oppure, Amplify recupera un token di accesso dal provider del repository, ma non lo archivia sui server.* AWS Amplify accede al repository utilizzando chiavi di distribuzione installate solo in uno specifico repository. 1. **Nella pagina Aggiungi ramo del repository, procedi come segue:** 1. Seleziona il nome del repository da connettere. 1. Seleziona il nome del ramo del repository da connettere. 1. Scegli **Next (Successivo)**. ## Passaggio 2: Conferma le impostazioni di build Amplify rileva automaticamente la sequenza di comandi di compilazione da eseguire per il ramo che stai distribuendo. In questo passaggio rivedi e confermi le impostazioni di build. **Per confermare le impostazioni di build per un'app** 1. Nella pagina **delle impostazioni dell'app**, individua la sezione **Impostazioni di creazione**. Verifica che il **comando Frontend build** e la **directory di output Build** siano corretti. Per questa app di esempio Next.js, la **directory di output Build** è impostata su. `.next` 1. La procedura per aggiungere un ruolo di servizio varia a seconda che si desideri creare un nuovo ruolo o utilizzarne uno esistente. + Per creare un nuovo ruolo: 1. Scegliere **Crea e utilizza un nuovo ruolo di servizio**. + Per utilizzare un ruolo esistente: 1. Scegli **Usa un ruolo esistente**. 1. Nell'elenco dei ruoli di servizio, seleziona il ruolo da utilizzare. 1. Scegli **Next (Successivo)**. ## Fase 3: Distribuire l'applicazione In questa fase distribuisci la tua app nella rete AWS globale di distribuzione dei contenuti (CDN). **Per salvare e distribuire un'app** 1. Nella pagina di **revisione**, verifica che i dettagli del repository e le impostazioni dell'app siano corretti. 1. Scegliere **Save and deploy (Salva e distribuisci)**. La creazione del front-end richiede in genere da 1 a 2 minuti, ma può variare in base alle dimensioni dell'app. 1. Una volta completata la distribuzione, puoi visualizzare l'app utilizzando il link al 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 4: (Facoltativo) pulire le risorse Se non ti serve più l'app che hai distribuito per il tutorial, puoi eliminarla. In questo modo hai la certezza che non ti vengano addebitati costi per risorse che non stai utilizzando. **Per eliminare un'app** 1. Dal menu **delle impostazioni dell'app** nel riquadro di navigazione, scegli **Impostazioni generali**. 1. Nella pagina **delle impostazioni generali**, scegli **Elimina app**. 1. Nella finestra di conferma, inserisci**delete**. Quindi scegli **Elimina app**. ## Aggiungi funzionalità alla tua app Ora che hai un'app distribuita su Amplify, puoi esplorare alcune delle seguenti funzionalità disponibili per la tua applicazione ospitata. **Variabili di ambiente** Le applicazioni spesso richiedono informazioni di configurazione in fase di esecuzione. Queste configurazioni possono essere dettagli di connessione al database, chiavi API o parametri. Le variabili di ambiente forniscono un modo per esporre queste configurazioni in fase di compilazione. Per ulteriori informazioni, consulta [Variabili di ambiente](environment-variables.md). **Domini personalizzati** In questo tutorial, Amplify ospita la tua app per te sul dominio `amplifyapp.com` predefinito con un URL come. `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` Quando colleghi la tua app a un dominio personalizzato, gli utenti vedono che la tua app è ospitata su un URL personalizzato, ad esempio. `https://www.example.com` Per ulteriori informazioni, consulta [Configurazione di domini personalizzati](custom-domains.md). **Anteprime delle pull request** Le anteprime delle richieste pull web offrono ai team un modo per visualizzare in anteprima le modifiche apportate alle pull request (PRs) prima di unire il codice a un ramo di produzione o di integrazione. Per ulteriori informazioni, vedete [Anteprime Web per](pr-previews.md) le richieste pull. **Gestione di più ambienti** Per scoprire come Amplify funziona con feature branch GitFlow e flussi di lavoro per supportare più implementazioni, [consulta](multi-environments.md) Distribuzioni di feature branch e flussi di lavoro di team. # Distribuisci un'app Nuxt.js su Amplify Hosting Utilizza le seguenti istruzioni per distribuire un'applicazione Nuxt.js su Amplify Hosting. Nuxt ha implementato un adattatore preimpostato utilizzando il server Nitro. Ciò consente di implementare un progetto Nuxt senza alcuna configurazione aggiuntiva. **Per distribuire un'app Nuxt su Amplify Hosting** 1. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/) 1. Nella pagina **Tutte le app**, scegli **Crea nuova** app. 1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.** 1. Nella pagina **Aggiungi ramo del repository**, procedi come segue: 1. Seleziona il nome del repository da connettere. 1. Seleziona il nome del ramo del repository da connettere. 1. Scegli **Next (Successivo)**. 1. Se desideri che Amplify sia in grado di inviare i log delle app ad CloudWatch Amazon Logs, devi abilitarlo esplicitamente nella console. Apri la sezione **Impostazioni avanzate**, quindi scegli **Abilita i log delle app SSR nella sezione Distribuzione **Server-Side** Rendering** (SSR). 1. Scegli **Next (Successivo)**. 1. **Nella pagina di **revisione, scegli Salva** e distribuisci.** # Distribuisci un'app Astro.js su Amplify Hosting Utilizza le seguenti istruzioni per distribuire un'applicazione Astro.js su Amplify Hosting. È possibile utilizzare un'applicazione esistente o creare un'applicazione iniziale utilizzando uno degli esempi ufficiali forniti da Astro. *Per creare un'applicazione iniziale, consulta [Utilizzare un tema o un modello di avvio nella documentazione](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template) di Astro.* Per implementare un sito Astro con SSR su Amplify Hosting, devi aggiungere un adattatore alla tua applicazione. Non gestiamo un adattatore di proprietà di Amplify per il framework Astro. Questo tutorial utilizza l'`astro-aws-amplify`adattatore creato da un membro della community. Questo adattatore è disponibile su [github. com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) sul sito web. GitHub AWS non mantiene questo adattatore. **Per distribuire un'app Astro su Amplify Hosting** 1. Sul tuo computer locale, vai all'applicazione Astro per distribuirla. 1. Per installare l'adattatore, apri una finestra di terminale ed esegui il seguente comando. Questo esempio utilizza il community adapter disponibile su [github. com/alexnguyennz/astro-aws-amplify.](https://github.com/alexnguyennz/astro-aws-amplify) Puoi sostituirlo *astro-aws-amplify* con il nome dell'adattatore che stai utilizzando. ``` npm install astro-aws-amplify ``` 1. Nella cartella del progetto dell'app Astro, apri il `astro.config.mjs` file. Aggiorna il file per aggiungere l'adattatore. Il file dovrebbe avere il seguente aspetto. ``` import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; import awsAmplify from 'astro-aws-amplify'; import sitemap from '@astrojs/sitemap'; // https://astro.build/config export default defineConfig({ site: 'https://example.com', integrations: [mdx(), sitemap()], adapter: awsAmplify(), output: 'server', }); ``` 1. Conferma la modifica e invia il progetto al tuo repository Git. Ora sei pronto per distribuire la tua app Astro su Amplify. 1. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/) 1. Nella pagina **Tutte le app**, scegli **Crea nuova** app. 1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.** 1. Nella pagina **Aggiungi ramo del repository**, procedi come segue: 1. Seleziona il nome del repository da connettere. 1. Seleziona il nome del ramo del repository da connettere. 1. Scegli **Next (Successivo)**. 1. Nella pagina delle **impostazioni dell'app**, individua la sezione **Impostazioni di creazione**. Per la **directory di output di Build**, immettete**.amplify-hosting**. 1. È inoltre necessario aggiornare i comandi di compilazione del frontend dell'app nelle specifiche di build. Per aprire le specifiche di build, scegliete **Modifica file YML.** 1. Nel `amplify.yml` file, individua la sezione dei comandi di compilazione del frontend. Inserisci **mv node\$1modules ./.amplify-hosting/compute/default** Il file delle impostazioni di build dovrebbe avere l'aspetto seguente. ``` version: 1 frontend: phases: preBuild: commands: - 'npm ci --cache .npm --prefer-offline' build: commands: - 'npm run build' - 'mv node_modules ./.amplify-hosting/compute/default' artifacts: baseDirectory: .amplify-hosting files: - '**/*' cache: paths: - '.npm/**/*' ``` 1. Scegli **Save** (Salva). 1. Se desideri che Amplify sia in grado di inviare i log delle app ad CloudWatch Amazon Logs, devi abilitarlo esplicitamente nella console. Apri la sezione **Impostazioni avanzate**, quindi scegli **Abilita i log delle app SSR nella sezione Distribuzione **Server-Side** Rendering** (SSR). 1. Scegli **Next (Successivo)**. 1. **Nella pagina di **revisione, scegli Salva** e distribuisci.** # Distribuisci un' SvelteKit app su Amplify Hosting Utilizza le seguenti istruzioni per distribuire un' SvelteKit applicazione su Amplify Hosting. Puoi usare la tua applicazione o creare un'app iniziale. Per ulteriori informazioni, consulta [Creazione di un progetto](https://kit.svelte.dev/docs/creating-a-project) nella *SvelteKit documentazione*. Per distribuire un' SvelteKit app con SSR su Amplify Hosting, devi aggiungere un adattatore al tuo progetto. Non gestiamo un adattatore di proprietà di Amplify per il framework. SvelteKit In questo esempio, utilizziamo il file `amplify-adapter` creato da un membro della community. L'adattatore è disponibile su [github. com/gzimbron/amplify-adapter sul sito](https://github.com/gzimbron/amplify-adapter) web. GitHub AWS non mantiene questo adattatore. **Per distribuire un' SvelteKit app su Amplify Hosting** 1. Sul tuo computer locale, vai all' SvelteKit applicazione da distribuire. 1. Per installare l'adattatore, aprite una finestra di terminale ed eseguite il seguente comando. Questo esempio utilizza il community adapter disponibile su [github. com/gzimbron/amplify-adattatore.](https://github.com/gzimbron/amplify-adapter) Se utilizzi un adattatore comunitario diverso, sostituiscilo *amplify-adapter* con il nome dell'adattatore. ``` npm install amplify-adapter ``` 1. Nella cartella del progetto SvelteKit dell'app, apri il `svelte.config.js` file. Modifica il file per utilizzare `amplify-adapter` o sostituirlo *'amplify-adapter'* con il nome dell'adattatore. Il file dovrebbe avere l'aspetto seguente. ``` import adapter from 'amplify-adapter'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors preprocess: vitePreprocess(), kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported, or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter() } }; export default config; ``` 1. Conferma la modifica e invia l'applicazione al tuo repository Git. 1. Ora sei pronto per distribuire la tua SvelteKit app su Amplify. Accedi Console di gestione AWS e apri la console [Amplify.](https://console.aws.amazon.com/amplify/) 1. Nella pagina **Tutte le app**, scegli **Crea nuova** app. 1. **Nella pagina **Inizia a creare con Amplify**, scegli il tuo provider di repository Git, quindi scegli Avanti.** 1. Nella pagina **Aggiungi ramo del repository**, procedi come segue: 1. Seleziona il nome del repository da connettere. 1. Seleziona il nome del ramo del repository da connettere. 1. Scegli **Next (Successivo)**. 1. Nella pagina delle **impostazioni dell'app**, individua la sezione **Impostazioni di creazione**. Per la **directory di output di Build**, immettete**build**. 1. È inoltre necessario aggiornare i comandi di compilazione del frontend dell'app nelle specifiche di build. Per aprire le specifiche di build, scegliete **Modifica file YML.** 1. Nel `amplify.yml` file, individua la sezione dei comandi di compilazione del frontend. Inserisci **- cd build/compute/default/** e. **- npm i --production** Il file delle impostazioni di build dovrebbe avere l'aspetto seguente. ``` version: 1 frontend: phases: preBuild: commands: - 'npm ci --cache .npm --prefer-offline' build: commands: - 'npm run build' - 'cd build/compute/default/' - 'npm i --production' artifacts: baseDirectory: build files: - '**/*' cache: paths: - '.npm/**/*' ``` 1. Scegli **Save** (Salva). 1. Se desideri che Amplify sia in grado di inviare i log delle app ad CloudWatch Amazon Logs, devi abilitarlo esplicitamente nella console. Apri la sezione **Impostazioni avanzate**, quindi scegli **Abilita i log delle app SSR nella sezione Distribuzione **Server-Side** Rendering** (SSR). 1. Scegli **Next (Successivo)**. 1. **Nella pagina di **revisione, scegli Salva** e distribuisci.**