Deploy con Vercel e gestione del progetto | AI

In questa lezione vedremo come avviene il deploy sulla piattaforma Vercel. Con Vercel, il deploy non è un processo macchinoso come spesso accade in ambienti tradizionali. Non dobbiamo preoccuparci di configurare server, gestire pipeline complesse o scrivere script CI/CD intricati. Tutto è pensato per essere automatico, fluido e collegato direttamente al nostro repository Git. La prima volta che ci troviamo davanti alla dashboard di Vercel, ci rendiamo subito conto di quanto l’approccio sia moderno e orientato alla produttività.

Iniziare il deploy con Vercel: connessione del repository

Per distribuire la nostra applicazione, abbiamo visto dalla prima lezione come sia essenziale collegare il nostro reporitory GitHub, GitLab o Bitbucket alla piattaforma. Dopo aver autorizzato l’accesso a Vercel, possiamo selezionare il progetto che vogliamo distribuire.

Vercel riconosce automaticamente il framework utilizzato, che si tratti di Next.js, Nuxt, Astro, SvelteKit o altro ancora. Dopo aver collegato il nostro repository, infatti, quello che vedremo sarà una schermata simile a questa:

A sinistra vedremo i progetti presenti sul nostro Git repository. Quello che dovremmo fare è semplicemente cliccare su “Import” per importarlo. La schermata che comparirà sarà simile a questa:

Questa schermata rappresenta il passaggio in cui stiamo creando un nuovo progetto su Vercel importando il codice da un repository GitHub. In alto viene mostrato il ramo del repository (main) da cui verrà effettuato il deploy, con l’indicazione che la sorgente è GitHub. Possiamo scegliere il team Vercel in cui pubblicare il progetto (in questo caso “try”, con piano Hobby) e assegnargli un nome personalizzato, che viene inizialmente generato automaticamente come “nextjs-boilerplate-t4zv”.

Vercel riconosce automaticamente il framework utilizzato nel progetto, che in questo esempio è Next.js, e imposta i parametri predefiniti di build per quel framework. La root directory è impostata su ./, cioè la cartella principale del repository. Può essere però modificata cliccando su “Edit” nel caso in cui il codice sorgente si trovi in una sottocartella.

Sono presenti anche due sezioni comprimibili. “Build and Output Settings” consente di configurare manualmente comandi di build e directory di output. “Environment Variables” permette di aggiungere variabili d’ambiente utili per la configurazione dell’applicazione nei vari ambienti (sviluppo, preview e produzione). In basso, il pulsante “Deploy” avvia l’intero processo: Vercel clonerà il repository, eseguirà la build secondo il preset del framework e pubblicherà immediatamente il progetto online, generando un URL pubblico per l’anteprima o la produzione. E’ sufficiente cliccare su “Deploy” per avviare il processo. In pochi minuti, senza configurazioni particolari, la nostra applicazione è online con un URL pubblico.

Deploy automatici: produzione e anteprime

Ogni volta che lavoriamo al nostro progetto, vogliamo assicurarci che le modifiche siano distribuite in modo affidabile e controllato. Vercel gestisce in maniera trasparente sia l’ambiente di produzione sia quelli di anteprima. Quando effettuiamo una modifica sul branch principale – di solito main o master – Vercel avvia automaticamente un nuovo deploy in produzione.

Questo significa che ogni aggiornamento è online senza che dobbiamo intervenire manualmente. Ancora più potente è però la gestione dei deploy di anteprima. Infatti, ogni pull request genera un deploy isolato con il proprio URL. Questo ambiente ci consente di verificare il comportamento dell’applicazione, testare le modifiche in modo sicuro e ricevere feedback prima della pubblicazione ufficiale.

Controllo del processo di build con Vercel

Anche se Vercel automatizza tutto, abbiamo pieno controllo sul processo di build. Possiamo accedere alle impostazioni del progetto e definire comandi specifici per la compilazione, indicare la cartella di output, o modificare le configurazioni per adattarle alle esigenze del nostro progetto. Questo è particolarmente utile se utilizziamo framework personalizzati, strumenti di build meno comuni, oppure se vogliamo integrare script o step aggiuntivi. La flessibilità è totale, ma senza mai compromettere la semplicità di utilizzo.

Per capire meglio come possiamo intervenire nel processo di build su Vercel, immaginiamo di avere un progetto basato su Next.js, ma che utilizza anche uno script di pre-elaborazione personalizzato. Ad esempio una generazione automatica di file statici o la compilazione di contenuti Markdown prima che parta la vera build. In questi casi, la configurazione predefinita di Vercel potrebbe non essere sufficiente.

Accedendo alle impostazioni del progetto come mostrato in figura

possiamo modificare il comando di build predefinito (next build) con un comando personalizzato. Ad esempio npm run prebuild && next build. In questo modo, Vercel eseguirà prima lo script prebuild definito nel nostro package.json, che potrebbe contenere istruzioni per generare i file necessari (come node scripts/generate-static.js), e solo dopo procederà alla compilazione dell’applicazione.

Questo ci consente di automatizzare logiche personalizzate prima del deploy vero e proprio, mantenendo il controllo completo su come viene costruita la nostra applicazione. Inoltre, sempre dalla stessa sezione, possiamo indicare una directory di output diversa dalla classica .next se stiamo utilizzando framework alternativi o una struttura custom. In sintesi, anche se Vercel automatizza la maggior parte delle operazioni, offre tutto lo spazio necessario per intervenire quando abbiamo esigenze fuori dallo standard.

Gestione delle variabili d’ambiente

Ogni progetto moderno ha bisogno di variabili d’ambiente. Queste ci permettono di gestire in modo sicuro API key, endpoint esterni, token di accesso e altre informazioni sensibili. Vercel ci consente di definire variabili per tre ambienti distinti: sviluppo, anteprima e produzione. Possiamo modificarle direttamente dalla dashboard o da riga di comando. In ogni caso, le variabili sono criptate e protette e cambiare una configurazione non richiede la ricostruzione dell’intero progetto: basta avviare un nuovo deploy con i valori aggiornati.

Per fare un esempio concreto, supponiamo di avere un progetto Next.js che si connette a un’API esterna protetta da una chiave segreta, come ad esempio OpenAI o Stripe. Invece di inserire direttamente questa chiave nel codice sorgente, pratica fortemente sconsigliata per ragioni di sicurezza, possiamo configurare la variabile d’ambiente STRIPE_SECRET_KEY direttamente dalla dashboard di Vercel.

Andando nella sezione “Environment Variables” del progetto, possiamo creare questa variabile e assegnarle il valore reale della chiave, scegliendo se renderla disponibile in fase di sviluppo, anteprima o produzione. Nella figura in basso vediamo questa schermata:

Ad esempio, potremmo avere tre chiavi diverse per ciascun ambiente: una test per il preview, una dev per lo sviluppo locale, e una chiave live per la produzione. Nel codice, ci basterà richiamarla con process.env.STRIPE_SECRET_KEY senza mai esporne il valore direttamente. Questo meccanismo non solo ci protegge da possibili perdite accidentali di credenziali, ma ci consente anche di lavorare con ambienti separati e sicuri, mantenendo tutto sotto controllo in un’unica interfaccia.

Nel pratico, per aggiungere una variabile vediamo che nel listbox “Environments”, possiamo specificare se la variabile deve essere attiva in tutti gli ambienti o solo in uno specifico, come ad esempio il deployment di Preview o Production. È anche possibile scegliere un ramo Git personalizzato per l’ambiente di anteprima.

Più in basso si trova il campo dove possiamo definire una nuova variabile: inseriamo il nome della chiave (ad esempio CLIENT_KEY) e il relativo valore. Possiamo aggiungere altre variabili cliccando su “Add Another” o importarle in blocco da un file .env locale usando il pulsante “Import .env”. In alternativa, possiamo incollare direttamente il contenuto del file .env nel riquadro testuale.

Infine, c’è un’opzione abilitata per impostazione predefinita: “Automatically expose System Environment Variables”. Essa permette a Vercel di esporre automaticamente le variabili di sistema predefinite, utili ad esempio per accedere a valori forniti direttamente dalla piattaforma (come l’URL del deployment corrente). Una volta configurate tutte le variabili, basta cliccare su “Save” per renderle effettive nel progetto.

Conclusioni

Questa lezione ci ha mostrato quanto sia facile e potente gestire il deploy con Vercel. In pochi passaggi abbiamo collegato un repository e messo online un progetto. Tutto questo senza preoccuparci della configurazione dell’infrastruttura o di complicazioni tecniche. Il deploy diventa così un’estensione naturale del nostro flusso di lavoro, e non un ostacolo. Nel prossimo capitolo affronteremo un tema altrettanto importante: la gestione dei dati e dello storage.