Bereitstellen einer Webanwendung auf Amazon Amplify
LEITFADEN FÜR DIE ERSTEN SCHRITTE
Modul 1: Erstellen eines neuen Amplify-Projekts
In diesem Modul werden Sie eine neue Webanwendung erstellen und Amplify konfigurieren
Einführung
In diesem Modul erstellen Sie eine neue Webanwendung mit React, einer JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, und lernen, wie Sie AWS Amplify für Ihr erstes Projekt konfigurieren.
Das werden Sie lernen
- Erstellen einer neuen Webanwendung
- Amplify für Ihr Projekt einrichten
Benötigte Zeit
5 Minuten
Voraussetzungen für das Modul
- AWS-Konto mit Administratorzugriff**
- Empfohlener Browser: aktuelle Version von Chrome oder Firefox
[**] Innerhalb der letzten 24 Stunden erstellte Konten haben möglicherweise noch keinen Zugriff auf alle für dieses Tutorial erforderlichen Services.
Implementierung
Umgebung überprüfen
Stellen Sie sicher, dass Sie mindestens Node.js Version 12.x und npm Version 6.x oder höher verwenden, indem Sie node -v und npm -v in einem Terminal oder einem Konsolenfenster ausführen. Falls nicht, besuchen Sie bitte die nodejs- und npm-Website für weitere Informationen.
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.6Die Amplify-Befehlszeilenschnittstelle (CLI) ist eine einheitliche Toolchain zur Erstellung von AWS-Cloud-Services für Ihre Anwendung. Lassen Sie uns fortfahren und den Amplify-CLI installieren.
npm install -g @aws-amplify/cliHinweis: Da wir die Amplify CLI global installieren, müssen Sie den obigen Befehl, abhängig von Ihren Systemrichtlinien, möglicherweise mit sudo ausführen.
Sobald die Installation abgeschlossen ist, konfigurieren Sie Amplify, indem Sie den folgenden Befehl ausführen:
amplify configureamplify configure öffnet einen Browser und fordert Sie auf, sich bei der AWS-Konsole anzumelden.
Sobald Sie angemeldet sind, werden Sie vom Amplify-CLI aufgefordert, einen IAM-Benutzer zu erstellen.
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 consoleErstellen Sie einen Benutzer mit AdministratorZugang für Ihr Konto, um AWS-Ressourcen wie AppSync, Cognito usw. für Sie bereitzustellen.
Sobald der Benutzer erstellt ist, werden Sie von Amplify CLI aufgefordert, die accessKeyId und den secretAccessKey anzugeben, um Amplify CLI mit Ihrem neu erstellten IAM-Benutzer zu verbinden.
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.React-App erstellen
Um eine neue React-Anwendung zu erstellen, verwenden Sie create-react-app , eine Werkzeugpalette, die Ihnen den Einstieg erleichtert, ohne dass eine Konfiguration erforderlich ist.
Erstellen Sie eine Anwendung namens amplify-app und initialisieren Sie sie mit amplify init:
# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify initWenn Sie amplify init ausführen, werden Sie nach Informationen über die Anwendung gefragt. Verwenden Sie die unten angegebenen Werte:
? 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 amplifySobald Sie die letzte Eingabeaufforderung beantwortet haben, wird die von Ihnen benötigte Infrastruktur erstellt, und die Ausgabe sieht in etwa so aus:
⠼ 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 everythingWas haben Sie gerade geschaffen?
Wenn Sie amplify init ausführen, um ein neues Projekt zu initialisieren, wird Amplify:
- Ihr Projekt analysieren und die obigen Projekteinstellungen bestätigen, einschließlich des AWS-Profils, das für die Bereitstellung der für Ihre Anwendung erforderlichen Cloud-Ressourcen verwendet werden soll.
- Einen Ordner namens amplify im Verzeichnis Ihres Projekts erstellen. Dieser Ordner enthält die Backend-Konfiguration Ihrer Anwendung.
- Eine Datei namens src/aws-exports.js im Verzeichnis Ihres Projekts erstellen. Diese Datei enthält die Konfiguration für die Dienste, die Amplify bereitstellt, wenn Sie Ihrer Anwendung weitere Funktionen hinzufügen.
- Es wird ein Cloud-Projekt für Ihre Anwendung in der AWS-Amplify-Konsole erstellen, in dem Sie Ihre Amplify-Projekte anzeigen und verwalten können.
Zusammenfassung
In diesem Modul haben Sie gelernt, wie Sie eine React-Frontend-Anwendung erstellen und diese mit Amplify initialisieren, um sie in Ihrem AWS-Konto bereitzustellen. Im nächsten Modul lernen Sie, wie Sie mit GraphQL eine API zu Ihrer Front-End-Anwendung hinzufügen.
Nächstes Thema: API verbinden