Implementazione di un'applicazione Web su Amazon Amplify

GUIDA ALLE OPERAZIONI DI BASE

Modulo 1: creazione di un nuovo progetto Amplify

In questo modulo, creerai una nuova applicazione Web e configurerai Amplify

Introduzione

In questo modulo, creerai una nuova applicazione Web utilizzando React, una libreria JavaScript per costruire interfacce utente, e imparerai a configurare AWS Amplify per il tuo primo progetto.

Argomenti affrontati

  • Creazione di una nuova applicazione Web
  • Impostazione di Amplify nel tuo progetto

 Tempo richiesto per il completamento

5 minuti

 Prerequisiti del modulo

  • Account AWS con accesso da amministratore**
  • Browser consigliato: l'ultima versione di Chrome o Firefox

[**]Gli account creati nelle ultime 24 ore potrebbero non avere ancora accesso a tutti servizi richiesti per questo tutorial.

Implementazione

Controllo dell'ambiente

Verifica di usare almeno la versione 12.x di Node.js e la versione 6.x di npm o successive eseguendo node -v e npm -v in una finestra del terminale/della console. Altrimenti visita il sito Web di nodejs e npm per avere maggiori informazioni.

node -v

# Your output may differ based on the version installed.
12.1.1

npm -v

# Your output may differ based on the version installed.
6.14.6

L'interfaccia a riga di comando (CLI) di Amplify è una toolchain unificata per creare servizi AWS Cloud per la tua app. Procediamo con l'installazione della CLI di Amplify.

npm install -g @aws-amplify/cli

Nota: poiché stiamo installando la CLI di Amplify a livello globale, potrebbe essere necessario eseguire il precedente comando con sudo a seconda delle tue policy di sistema.

Una volta completata l'installazione, configura Amplify eseguendo il seguente comando:

amplify configure

amplify configure aprirà un browser e ti chiederà di accedere alla console AWS.

Una volta effettuato l'accesso, la CLI di Amplify ti chiederà di creare un utente IAM.

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

Crea un utente con AdministratorAccess per il tuo account in modo da effettuare il provisioning delle risorse AWS necessarie, come AppSync, Cognito, eccetera.

gsg-build-amplify-4

Una volta creato l'utente, la CLI di Amplify ti chiederà di fornire l'accessKeyId e la secretAccessKey per collegare la CLI di Amplify all'utente IAM appena creato.

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

Creazione dell'app React

Per creare una nuova applicazione React, userai create-react-app, una toolchain che aiuta a cominciare senza la necessità di configurazione.

Crea un'applicazione denominata amplify-app, quindi inizializzala con amplify init:

# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init

Quando eseguirai amplify init, ti verranno chieste informazioni sull'app. Usa i valori riportati di seguito:

? Enter a name for the project amplifyapp

? Enter a name for the environment dev

? Choose your default editor: None

? Choose the type of app that you're building javascript

Please tell us about your project
? What javascript framework are you using react

? Source Directory Path:  src

? Distribution Directory Path: build

? Build Command:  npm run-script build

? Start Command: npm run-script start

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use amplify

Una volta risposto all'ultima richiesta, verrà creata l'infrastruttura necessaria e il risultato sarà simile a questo:

⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated             
⠼ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
⠸ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time) 
⠴ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

Che cosa hai appena creato?

Quando eseguirai amplify init per inizializzare un nuovo progetto, Amplify:

  • Analizzerà il progetto e verificherà le impostazioni di progetto riportate sopra, tra cui quale profilo AWS sarà usato per effettuare il provisioning delle risorse cloud necessarie per la tua applicazione.
  • Creerà una cartella denominata amplify all'interno della directory del progetto. La cartella conterrà la configurazione back-end della tua applicazione.
  • Creerà un file denominato src/aws-exports.js all'interno della directory del progetto. Il file conterrà la configurazione dei servizi di cui Amplify effettuerà il provisioning man mano che aggiungerai più funzionalità all'applicazione.
  • Creerà un progetto cloud per la tua applicazione nella AWS Amplify Console, dove potrai visualizzare e gestire i tuoi progetti Amplify.
gsg-build-amplify-1

Conclusione

In questo modulo hai imparato a creare un'applicazione front-end React e a inizializzarla con Amplify in preparazione per l'implementazione nel tuo account AWS. Nel prossimo modulo imparerai ad aggiungere un'API alla tua applicazione front-end usando GraphQL.

A seguire: collegamento dell'API

Facci sapere com'è andata.

Grazie per il tuo feedback
Siamo contenti che questa pagina ti sia stata d’aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi
Grazie per il tuo feedback
Ci dispiace che questa pagina non ti sia stata d'aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi