Applicazione web senza server e API con Code Engine

Questa esercitazione può comportare degli addebiti. Utilizzate l'Estimatore di costi per generare una stima dei costi in base all'utilizzo previsto.

In questa esercitazione, creerai un'applicazione web senza server utilizzando un bucket in Object Storage e implementando il backend dell'applicazione utilizzando IBM Cloud Code Engine e IBM Cloudant come database del documento JSON.

I siti web statici sono ottimi per prestazioni e sicurezza. Il loro modello architettonico viene talvolta definito Jamstack in riferimento a JavaScript, API e Markup. In questa esercitazione, creerai un sito web statico ospitato su Object Storage. Il sito web dispone di un guestbook che utilizza JavaScript per accedere a un'API per richiamare le voci o per aggiungerne una nuova. L'API per l'interazione con il database di supporto è implementata utilizzando un approccio senza server. Viene distribuito come applicazione di backend o microservizio a IBM Cloud Code Engine. Il backend viene eseguito solo quando richiesto e quindi si verifica un addebito quando in uso.

Obiettivi

  • Distribuire un backend senza server e un database
  • Esponi un'API REST come applicazione senza server
  • Ospitare un sito web statico

L'applicazione mostrata in questa esercitazione è un semplice sito web per guestbook in cui gli utenti possono pubblicare i messaggi.

dell'architettura del

  1. L'utente accede all'applicazione ospitata sul bucket in Object Storage
  2. L'applicazione web richiama un'API di backend.
  3. L'applicazione con l'API di backend viene distribuita a Code Engine.
  4. Il backend utilizza IBM Cloudant per archiviare e recuperare voci del guestbook.

Crea il database Guestbook

Iniziamo creando un'istanza del servizio IBM Cloudant. IBM Cloudant è un database di documenti JSON completamente gestito. È basato e compatibile con Apache CouchDB.

  1. Nel Catalogo, alla voce Servizi, andare alla categoria Banche dati. Fai clic sul tile IBM Cloudant. Nella nuova finestra di dialogo:

    1. In Multitenant seleziona una regione.

    2. In Configura istanza Cloudant scegliere un nome univoco per il servizio, ad esempio <yourinitials>-guestbook-db.

    3. Seleziona un gruppo di risorse.

    4. Seleziona IAM come metodo di autenticazione.

    5. Seleziona il piano Lite. Se nel vostro account è già presente un piano Lite, selezionate un altro piano di servizio.

    6. Fai clic su Crea.

  2. Tornando al sito IBM Cloud Elenco delle risorse, sotto Servizi, fare clic sull'istanza IBM Cloudant creata per aprire la pagina dei dettagli completi dell'istanza. Nota: potrebbe essere necessario attendere che lo stato del servizio venga modificato in Active.
  3. Fai clic su Launch Dashboard per aprire il dashboard in una nuova scheda del browser.
  4. In alto a destra, fai clic su Create Database. Inserite guestbook come nome e selezionate Non partizionato in Partizionamento. Fai clic su Create per creare il database.

Crea backend senza server

In questa sezione, creerai un'applicazione di backend senza server con Code Engine. Le applicazioni senza server devono pagare solo per il tempo di esecuzione, che è ideale per le soluzioni a cui si accede raramente come un guestbook.

Creare un progetto Code Engine

  1. Passa alla pagina IBM Cloud Code Engine Overview.
  2. Nel riquadro di sinistra, fare clic su Progetti e poi su Crea,
    • Seleziona un'ubicazione.
    • Utilizzare <yourinitials>-guestbook come nome progetto e selezionare lo stesso gruppo di risorse di prima.
    • Fai clic su Create.
    • Attendere che il progetto status cambi in Attivo.
  3. Fare clic sul nome del progetto per immettere il dashboard del progetto.

Crea e distribuisci l'app di back - end

  1. Nel dashboard del progetto, fare clic su Applicazioni, quindi su Crea.
  2. Nella nuova finestra di dialogo, immettere guestbook-backend come nome.
  3. Lascia selezionata l'immagine contenitore e utilizza icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest come riferimento immagine. Utilizza un'immagine del contenitore già esistente.
  4. In Risorse istanza, selezionare 0.25 vCPU / 0.5 GB per CPU e memoria. Non sono necessarie molte risorse per questo tipo di app.
  5. Aumentare il Numero minimo di istanze a 1 e ridurre Numero massimo di istanze a 2. Il minimo di uno rende l'app più reattiva durante i test iniziali. È possibile ridurlo di nuovo a zero.
  6. Fai clic su Crea per distribuire la nuova app di backend per il guestbook. Si noti che senza il passo successivo di creazione di un bind del servizio la distribuzione avrà esito negativo con un errore di codice.
  7. Creare un bind del servizio al database.
    1. Fare clic sulla scheda Bind servizio.
    2. Fai clic su Crea.
    3. Fai clic su Istanza del servizioIBM Cloud e scegli il tuo database dall'elenco a discesa.
    4. Lasciare Ruolo come Scrittore.
    5. Fai clic su Aggiungi.
  8. Attendere che il provisioning venga riportato come verde e pronto. Fare clic su Applicazione di prova, quindi su URL dell'applicazione. L'applicazione di backend deve caricare e restituire una pagina che dice healthy. Ricordare o copiare l' URL dell'applicazione perché è necessario per la parte successiva.

Invece di utilizzare l'immagine del contenitore precostruito, puoi creare l'immagine da solo. Questa operazione può essere eseguita all'esterno di o con l'aiuto di Code Engine. Se non si utilizza l'immagine del contenitore precompilata e se utilizza un registro del contenitore privato, potrebbero essere necessari ulteriori passi. È possibile trovare l'origine all'indirizzo https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

Distribuisci l'applicazione web

Crea un bucket Object Storage configurato con l'hosting del sito web statico contenente i file per l'applicazione JavaScript del guestbook che utilizza il database IBM Cloudant.

Creare un'istanza Object Storage:

  1. Seleziona Object Storage dal catalogo.
  2. Seleziona IBM Cloud per l'infrastruttura e Standard per il piano.
  3. Inserire un nome di servizio unico per l'istanza, ad esempio <yourinitials>-guestbook-cos.
  4. Seleziona un gruppo di risorse.
  5. Fai clic su Create

Crea un bucket configurato per l'hosting del sito web statico:

  1. Fai clic su Create a bucket.
  2. Fare clic su Personalizza il bucket.
  3. Immettere un nome bucket univoco tra tutti gli account IBM. Provare <yourinitials>-guestbook.
  4. Selezionare la resilienza come Regionale.
  5. Seleziona un' Ubicazione congruente con l'istanza IBM Cloudant.
  6. Mantenere il valore predefinito Classe di memoria
  7. Scorri verso il basso fino a Static website hosting e fai clic su Add +.
  8. Mantenere le regole di instradamento (singole) selezionate e aggiungere il documento Indice index.html.
  9. Fare clic su Accesso pubblico a Su
  10. Fai clic su Save
  11. Scorrere fino in fondo e fare clic su Crea secchio

Copiare i file nella directory docs di https://github.com/IBM-Cloud/serverless-guestbook/tree/ce nel bucket:

  1. Aprire https://github.com/IBM-Cloud/serverless-guestbook/tree/ce in una nuova scheda.

  2. Scaricare un file zip facendo clic su Codice quindi su Scarica ZIP.

  3. Decomprimere il file e passare alla directory docs del file decompresso.

  4. Modificare guestbook.js- sostituire il valore di apiUrl con l' URL dell'applicazione della sezione precedente.

    Assicurarsi che l'URI non termini con una barra (/). Altrimenti l'app non funzionerà.

  5. Apri la vista Objects del bucket e trascina e rilascia i file guestbook.js e index.html nel bucket COS.

  6. Passa al separatore Configurazione per il bucket. Nella sezione Endpoint, individuare la sezione Endpoint di hosting del sito Web statico. Copia l'endpoint pubblico in una scheda del browser.

  7. Dovresti vedere la pagina del guestbook.

  8. Aggiungere nuove voci al guestbook.

Screenshot Guestbook
Screenshot Guestbook

Rimuovi le risorse

Per eliminare il bucket creato e il servizio Object Storage:

  1. Passa agli oggetti bucket Object Storage
  2. Selezionare la casella nella riga del titolo per selezionare tutti gli oggetti nel bucket
  3. Fare clic su Elimina oggetti
  4. In alto a destra del menu Azioni della pagina dell'oggetto bucket, seleziona Delete bucket
  5. Nella parte superiore destra del menù Azioni dell'istanza Object Storage selezionare Elimina istanza

Per eliminare il servizio IBM Cloudant creato.

  1. Passare a elenco risorse
  2. In Database, fare clic sul menu delle azioni accanto al servizio <yourinitials>-guestbook-db
  3. Fai clic su Delete

Per eliminare l'applicazione e il progetto Code Engine,

  1. Passa alla pagina di destinazione Code Engine.
  2. Nel riquadro di sinistra, fare clic su Progetti.
  3. Nell'elenco dei progetti, controllare il progetto guestbook, quindi fare clic su Elimina.

A seconda della risorsa potrebbe non essere eliminata immediatamente, ma conservata (per impostazione predefinita per 7 giorni). È possibile recuperare la risorsa eliminandola in modo permanente o ripristinarla entro il periodo di conservazione. Consultare questo documento su come utilizzare il recupero delle risorse.

Contenuto correlato