{"id":72468,"date":"2023-08-21T13:00:06","date_gmt":"2023-08-21T12:00:06","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=72468&preview=true&preview_id=72468"},"modified":"2023-08-31T09:22:46","modified_gmt":"2023-08-31T08:22:46","slug":"continuous-deployment-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/continuous-deployment-react\/","title":{"rendered":"Distribuzione continua di applicazioni React con CircleCI e Kinsta API"},"content":{"rendered":"

La Continuous Delivery (distribuzione continua) \u00e8 diventata fondamentale nel panorama in rapida evoluzione dello sviluppo software<\/a>. Promette cicli di rilascio pi\u00f9 rapidi, riduzione degli errori umani e, in ultima analisi, una migliore esperienza utente.<\/p>\n

Lo sviluppo del software consiste nel risolvere i problemi del mondo reale con il codice. Il viaggio del software dalla creazione al cliente prevede numerose fasi, che richiedono velocit\u00e0, sicurezza e affidabilit\u00e0. \u00c8 qui che la distribuzione continua d\u00e0 il meglio di s\u00e9.<\/p>\n

Questo articolo spiega come integrare la piattaforma CircleCI<\/a> per creare un flusso di lavoro di integrazione continua e consegna\/deployment continuo, continuous Integration\/Continuous Delivery \u2013 (CI\/CD<\/a>), sfruttando al contempo la potenza dell’API Kinsta<\/a> per il deployment continuo delle applicazioni, come nel nostro esempio React. Questa combinazione pu\u00f2 aprire un percorso agevole dallo sviluppo alla produzione.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Capire la Continuous Delivery<\/h2>\n

Continuous Delivery \u00e8 molto pi\u00f9 di una parola d’ordine: \u00e8 un cambiamento di paradigma nello sviluppo del software. Si tratta di automatizzare il processo di creazione, test e distribuzione delle modifiche al codice sui server di produzione.<\/p>\n

La pipeline CI\/CD<\/a>, un componente fondamentale della distribuzione continua, orchestra l’intero processo. Include il controllo delle versioni, i test automatici e la distribuzione automatica. Ogni fase \u00e8 fondamentale per garantire che solo il codice affidabile e testato raggiunga la produzione.<\/p>\n

Cos’\u00e8 CircleCI?<\/h2>\n

CircleCI \u00e8 uno strumento molto diffuso per implementare il CI\/CD. Si integra con sistemi di controllo di versione come GitHub<\/a>, GitLab<\/a> e Bitbucket<\/a>, permettendo agli sviluppatori di automatizzare l’intera pipeline CI\/CD. La sua scalabilit\u00e0, l’estensibilit\u00e0 e il supporto a diversi linguaggi di programmazione<\/a> lo rendono uno strumento versatile per progetti di tutte le dimensioni.<\/p>\n

Gli sviluppatori<\/a> di CircleCI definiscono flussi di lavoro che si attivano automaticamente al momento del commit del codice. In questo modo si avviano i processi di compilazione e di test e, una volta completati con successo, si distribuisce il codice nell’ambiente di destinazione. Questo approccio non solo fa risparmiare tempo, ma riduce anche il rischio di errori umani durante la distribuzione.<\/p>\n

Capire l’API di Kinsta<\/h2>\n

L’API di Kinsta<\/a> vi permette di interagire con i servizi ospitati da Kinsta in modo programmatico e la distribuzione delle applicazioni fa parte delle sue funzionalit\u00e0. Quando lavorate con i flussi di lavoro CI\/CD, userete il comando cURL per interagire con l’API Kinsta dal flusso di lavoro.<\/p>\n

Per usare l’API, dovete avere un account con almeno un sito WordPress<\/a>, un\u2019applicazione<\/a> o un database<\/a> in MyKinsta. Potrete quindi generare una chiave API per autenticare il vostro accesso all’API.<\/p>\n

Per generare una chiave API seguite questi passaggi:<\/p>\n

    \n
  1. Aprire la bacheca di MyKinsta.<\/li>\n
  2. Andare alla pagina delle chiavi API<\/strong> (Il tuo nome<\/strong> > Impostazioni dell’azienda<\/strong> > Chiavi API<\/strong>).<\/li>\n
  3. Fare clic su Crea chiave API<\/strong>.<\/li>\n
  4. Scegliere una scadenza o impostare una data di inizio personalizzata e un numero di ore di scadenza della chiave.<\/li>\n
  5. Assegnare alla chiave un nome univoco.<\/li>\n
  6. Fare clic su Genera<\/strong>.<\/li>\n<\/ol>\n

    Dopo aver creato una chiave API, copiatela e conservatela in un luogo sicuro (vi consigliamo di usare un gestore di password<\/a>), poich\u00e9 viene rivelata all’interno di MyKinsta solo una volta<\/strong>.<\/p>\n

    Come attivare la distribuzione con l’API di Kinsta<\/h3>\n

    Per attivare il deployment di un’applicazione su Kinsta tramite l’API, vi servono l’ID dell’applicazione e il nome del branch distribuibile nel repository Git. Potete recuperare l’ID della vostra applicazione recuperando prima l’elenco delle vostre applicazioni<\/a>, che vi fornir\u00e0 i dettagli di ogni applicazione, compreso il suo ID.<\/p>\n

    Potete quindi fare una richiesta POST<\/a> all’endpoint dell’API \/applications\/deployments<\/a><\/code> con un comando cURL:<\/p>\n

    curl -i -X POST\n  https:\/\/api.kinsta.com\/v2\/applications\/deployments\n  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>'\n  -H 'Content-Type: application\/json'\n  -d '{\n    \"app_id\": \"<YOUR_APP_ID>\",\n    \"branch\": \"main\"\n  }'<\/code><\/pre>\n
    Questo comando cURL verr\u00e0 utilizzato nel flusso di lavoro.<\/p>\n
    Primi passi con CircleCI<\/h2>\n
    Per iniziare a lavorare con CircleCI, dovete disporre di un codice sorgente ospitato sul vostro provider Git preferito. Per questo tutorial, useremo l\u2019applicazione site builder<\/a> sviluppata per il tutorial su come creare un sito WordPress con l\u2019API di Kinsta<\/a>. Potete usare il repository navigando su GitHub e selezionando: Use this template<\/strong> > Create a new repository<\/strong>.<\/p>\n
    Nell’applicazione React<\/a> vengono creati dei test unitari per verificare ogni componente. Viene utilizzato anche ESLint<\/a> per imporre una sintassi e una formattazione del codice perfette. Impostiamo un flusso di lavoro CI\/CD che costruisce, testa, assicura che la sintassi del codice sia corretta e infine esegue il deploy su Kinsta utilizzando l’API.<\/p>\n
    Per iniziare, esploriamo alcuni concetti chiave:<\/p>\n
      \n
    1. Workflow:<\/strong> CircleCI si basa sui workflow, i flussi di lavoro: sequenze definite di lavori che delineano le fasi della pipeline CI\/CD. I flussi di lavoro possono includere varie fasi come la creazione, il test, il deploy e altro ancora.<\/li>\n
    2. Job:<\/strong> I job sono singole unit\u00e0 di lavoro all’interno di un flusso di lavoro. Ogni job esegue un’attivit\u00e0 specifica, come la compilazione del codice, l’esecuzione di test o il deploy su un server. Questi job possono anche includere varie fasi che vengono eseguite in sequenza (esecuzione parallela) in modo che quando una di esse non va a buon fine, l’intero lavoro fallisce.<\/li>\n<\/ol>\n
      Passo 1: Creare un account CircleCI<\/h3>\n
      Visitate il sito web di CircleCI e create un account se non ne avete gi\u00e0 uno. Potete registrarvi utilizzando il vostro provider Git preferito. In questo modo sar\u00e0 pi\u00f9 facile accedere ai vostri repository senza ulteriori configurazioni.<\/p>\n
      Passo 2: Creare il file di configurazione<\/h3>\n
      Nella cartella principale del vostro progetto, create una cartella .circleci<\/strong> se non esiste, e all’interno di essa create un file config.yml<\/strong>. Questo file conterr\u00e0 la configurazione del vostro flusso di lavoro.<\/p>\n
      Passo 3: Configurare il repository<\/h3>\n
      Una volta effettuato l’accesso, accedete alla vostra dashboard CircleCI<\/a>, fate clic su Projects<\/strong> nella barra laterale di sinistra per visualizzare l’elenco dei repository e poi sul pulsante Set Up Project<\/strong> per il repository che desiderate configurare.<\/p>\n
      \"Configurare
      Configurare il repository.<\/figcaption><\/figure>\n
      Si aprir\u00e0 una finestra di dialogo in cui CircleCI rilever\u00e0 automaticamente il vostro file di configurazione. Quindi, fate clic sul pulsante Set Up Project<\/strong>. CircleCI pu\u00f2 ora accedere alla vostra base di codice ed eseguire i flussi di lavoro definiti in caso di modifiche al codice.<\/p>\n
      Passo 4: Definire il job del flusso di lavoro<\/h3>\n
      Il cuore dell’impostazione della pipeline di CircleCI \u00e8 costituito da questo passaggio cruciale: la definizione del flusso di lavoro nel file config.yml<\/strong>. \u00c8 qui che orchestrerete la sequenza di azioni che la vostra pipeline eseguir\u00e0. \u00c8 come delineare il progetto del vostro viaggio dallo sviluppo alla produzione.<\/p>\n
      Si inizia definendo la versione di CircleCI, che attualmente \u00e8 2.1<\/code>:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Avrete bisogno di un job build<\/code> per ogni progetto React. Questo job affronta le attivit\u00e0 fondamentali che prepara il vostro codice per la distribuzione. Queste attivit\u00e0 comprendono l’installazione delle dipendenze necessarie, la compilazione del codice, l’esecuzione di test per assicurarsi che tutto funzioni correttamente, la verifica della qualit\u00e0 del codice e infine l’invio del codice a destinazione.<\/p>\n
      Poich\u00e9 i progetti React hanno spesso bisogno di strumenti come Node.js<\/a> per portare a termine il lavoro, CircleCI semplifica l’accesso a questi strumenti offrendoli come immagini preconfezionate<\/a>. In questo tutorial, specificate la versione di Node.js che volete usare. Useremo Node.js v20<\/a>.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Questo lavoro eseguir\u00e0 diversi passaggi, quindi creiamoli. Il primo passo \u00e8 checkout<\/code>, che recupera l’ultima versione del codice dal repository in modo che tutte le azioni successive funzionino con il codice pi\u00f9 recente.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Ora passiamo alla parte pi\u00f9 importante del lavoro: fare le cose per bene. I passaggi che seguono checkout<\/code> coprono le attivit\u00e0 principali: l’installazione delle dipendenze, la compilazione del codice sorgente, l’esecuzione dei test unitari e l’utilizzo di ESLint per controllare il codice alla ricerca di eventuali campanelli d’allarme.<\/p>\n
      steps:\n  - checkout\n  - run:\n      name: Install Dependencies\n      command: npm install\n  - run:\n      name: Compile Source Code\n      command: npm run build\n  - run:\n      name: Run Unit Tests\n      command: npm test\n  - run:\n      name: Run ESLint\n      command: npm run lint<\/code><\/pre>\n
      Ogni passaggio, come i cartelli della segnaletica stradale, ha un nome che vi aiuta a capire cosa succede quando il flusso di lavoro \u00e8 in pieno svolgimento. Questa chiarezza facilita la risoluzione dei problemi e garantisce che tutto sia in linea con il flusso di lavoro.<\/p>\n
      Attivare la distribuzione continua su Kinsta<\/h4>\n
      Il passo finale del job di build<\/code> consiste nell’avviare il deployment su Kinsta tramite l’API. Questo richiede due valori: la vostra chiave API<\/strong> e l’App ID<\/strong>, che non devono essere pubblici. Questi valori saranno conservati come variabili d’ambiente<\/a> in CircleCI. Per ora, definiamo la fase di distribuzione nel flusso di lavoro:<\/p>\n
      - run:\n    name: Deploy to Kinsta\n    command: |\n      curl -i -X POST\n        https:\/\/api.kinsta.com\/v2\/applications\/deployments\n    \t-H \"Authorization: Bearer $API_KEY\"\n    \t-H \"Content-Type: application\/json\"\n    \t-d '{\n          \"app_id\": \"'\"$APP_ID\"'\",\n       \t  \"branch\": \"main\"\n    \t}'<\/code><\/pre>\n
      Nel codice fornito, eseguite il comando cURL per attivare la distribuzione utilizzando l’ID dell’applicazione memorizzato nelle variabili d’ambiente. Ricordate che le variabili d’ambiente sono accessibili con la sintassi:<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Memorizzare le variabili d’ambiente con CircleCI<\/h4>\n
      Le variabili d’ambiente sono fondamentali per mantenere la sicurezza e la flessibilit\u00e0 dei vostri flussi di lavoro di integrazione e distribuzione continua. Per memorizzare le variabili d’ambiente in CircleCI, seguite questi passaggi:<\/p>\n
        \n
      1. Aprite il vostro progetto per vedere tutti i dettagli della pipeline e fate clic sul pulsante Project Settings<\/strong>.<\/li>\n
      2. Fate clic sulla scheda Environment Variables<\/strong> nella barra laterale e aggiungete le vostre variabili d’ambiente.<\/li>\n<\/ol>\n
        \"Schermata
        Memorizzare le variabili d’ambiente.<\/figcaption><\/figure>\n
        Passo 5: Configurazione del flusso di lavoro<\/h3>\n
        Dopo aver impostato i job e averli strutturati in fasi organizzate, la fase successiva prevede la configurazione del flusso di lavoro<\/a>. Il flusso di lavoro agisce come un orchestratore, guidando la sequenza dei job e incorporando filtri e regole specifiche<\/a> per determinare le modalit\u00e0 di esecuzione dei job.<\/p>\n
        In questo tutorial, creeremo un flusso di lavoro che attiva il processo di compilazione esclusivamente quando c’\u00e8 un push o una modifica del codice nel branch main<\/code> del repository:<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n\tjobs:\n  \t- build:\n      \t    filters:\n              branches:\n          \tonly:\n            \t  - main<\/code><\/pre>\n
        Questa configurazione si ottiene usando dei filtri, che vi permettono di controllare quando un job viene eseguito in base a determinate condizioni. Potete anche incorporare dei trigger per programmare quando il flusso di lavoro deve essere eseguito (per esempio: ogni giorno alle 12.00 UTC):<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n      \t  filters:\n            branches:\n              only:\n            \t- main\n    triggers:\n      - schedule:\n          cron: \"0 0 * * *\"<\/code><\/pre>\n
        Il flusso di lavoro sopra riportato presenta un trigger<\/code> definito con la parola chiave schedule<\/code>. L’espressione cron \"0 0 * * *\"<\/code> corrisponde alla programmazione del flusso di lavoro alla mezzanotte UTC di ogni giorno.<\/p>\n
        In un’espressione cron ci sono cinque campi separati da spazi, ognuno dei quali rappresenta una diversa unit\u00e0 di tempo:<\/p>\n
          \n
        1. Minuto (0-59):<\/strong> Il primo campo rappresenta il minuto dell’ora, impostato su 0<\/code> per attivarsi all’inizio dell’ora.<\/li>\n
        2. Ora (0-23):<\/strong> Il secondo campo indica l’ora del giorno, impostata su 0<\/code> per la mezzanotte.<\/li>\n
        3. Giorno del mese (1-31):<\/strong> Il terzo campo indica il giorno, indicato da un asterisco (*<\/code>) per qualsiasi giorno.<\/li>\n
        4. Mese (1-12):<\/strong> Il quarto campo rappresenta il mese, indicato con un asterisco (*<\/code>) per qualsiasi mese.<\/li>\n
        5. Giorno della settimana (0-6, dove 0 \u00e8 domenica):<\/strong> Il quinto campo indica il giorno della settimana, anch’esso contrassegnato da un asterisco (*<\/code>) per qualsiasi giorno.<\/li>\n<\/ol>\n
          Con questa configurazione del flusso di lavoro, potete gestire efficacemente quando e in quali condizioni vengono eseguiti i lavori definiti, mantenendo una pipeline CI\/CD efficiente e snella.<\/p>\n
          Passo 6: Eseguire il commit e osservare<\/h3>\n
          Una volta configurato il flusso di lavoro, eseguite il commit delle modifiche nel vostro repository di controllo della versione. CircleCI rilever\u00e0 automaticamente la presenza del file di configurazione e attiver\u00e0 i flussi di lavoro definiti in caso di modifiche al codice.<\/p>\n
          \"Bacheca
          Dettagli del job CircleCI.<\/figcaption><\/figure>\n
          Fate clic sul job di compilazione per esaminarne i dettagli. Se avete pi\u00f9 di un job, saranno tutti elencati. Quando fate clic su un job, la scheda STEPS<\/strong> mostra tutti i passaggi eseguiti dal job e se sono andati a buon fine o meno.<\/p>\n
          \"Bacheca
          Step del job.<\/figcaption><\/figure>\n
          Potete anche fare clic su ogni step per vedere maggiori dettagli. Quando fate clic sul passaggio Deploy to Kinsta<\/strong>, vedrete maggiori dettagli sulla richiesta API e saprete se \u00e8 andata a buon fine:<\/p>\n
          \"Informazioni
          Informazioni sullo step.<\/figcaption><\/figure>\n