AWS Amplify explained

In den letzten Wochen haben wir von Raffi, Ricky und Tom jede Menge zum Thema Angular, React, VueJS und Headless CMS gehört. Ich will heute darauf eingehen, wie man all diese Projekte sehr elegant in AWS builden und deployen kann. Es gibt hierbei natürlich mehrere Ansätze und Wege. Ein sehr einfacher ist AWS Amplify.

AWS Amplify ist eine JavaScript-Library für Frontend- und Mobile-Entwickler, welche Cloud-fähige Applikationen entwickeln wollen. Man kann dabei seiner Frontend-Applikation verschiedene Backend-Funktionalitäten zur Verfügung stellen. Ich will euch Amplify heute in einer sehr praxisnahen Form präsentieren. Als Ausgangslage nehme ich dabei die altbekannte ToDo-Liste, welche uns Tom im Februar auf Angular präsentiert hat.

Initialisierung von Amplify

Als erstes clonen wir uns das Angular Projekt. Dies können wir einfach mit dem folgenden Befehl erreichen. Da ich nur die nötigste Funktionalität für mein Beispiel brauche, checke ich einen ganz bestimmten Commit aus.

1
2
3

$ git clone https://github.com/b-nova/b-nova-todo-list.git
$ cd b-nova-todo-list
$ git checkout 1b5932a5e89c8cbfb5c6b9e6e2cb88f40787487a

Amplify CLI

Jetzt installiere ich die amplify-cli. Mit dieser können wir einfach AWS Cloud Services zu unserer Applikation hinzufügen. Um diese zu initialisieren können wir innerhalb der Applikation folgende Befehle ausführen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$ npm install -g @aws-amplify/cli
$ amplify configure
$ amplify init
 
Output:                                                                                                                                                                                                                            07:55:50
Scanning for plugins...
Plugin scan successful
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project bnovatodolist
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using angular
? Source Directory Path:  src
? Distribution Directory Path: dist/b-nova-todo-list
? Build Command:  npm run-script build
? Start Command: ng serve
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use admin
Adding backend environment dev to AWS Amplify Console app: d3qlc2o47gqcym
⠧ Initializing project in the cloud...

In unserer AWS Console sollte es jetzt eine neue App geben.

Schauen wir uns die App nun genauer an. Wir sehen hier, dass es aktuell ein Backend “dev” gibt, wie wir es bei der Initialisierung angelegt haben.

Unter General sehen wir, dass es bereits eine Url gibt, mit der wir auf unserer Applikation zugreifen können. Beim Klick fällt dann aber auf, dass die Applikation nicht wie gewünscht verfügbar ist. Wollen wir das im nächsten Schritt ändern.

Hosting

Um unsere Applikation nun unter dem oben gezeigten Link verfügbar zu machen, fügen wir unserem Projekt eine neue Kategorie “hosting” hinzu. Dies geht sehr einfach mit dem folgenden Befehl. Wir nutzen zum Hosting die Amplify Console und nutzen erstmal manuelle Deployments zum Ausspielen von neuen Features. Wir sehen später noch, wie man auch automatisierte Deployments erstellen kann.

1
2
3
4
5
6
7
8
9

$ amplify hosting add

Output: 
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish

Nun können wir in der CLI den folgenden Befehl ausführen, um unserer Applikation unter dem angegebenen Link in der Amplify Console, erreichbar zu machen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

$ amplify publish

Output: 
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠹ Updating resources in the cloud. This may take a few minutes...
...
Build at: 2021-03-21T07:11:13.905Z - Hash: af04a58b9eeae670885d - Time: 22872ms
✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.d3qlc2o47gqcym.amplifyapp.com

Wir sehen das zum Anlegen der entsprechenden Ressourcen cloudformation genutzt wird. Der Link zum Anschauen der Applikation wird am Ende dann ausgegeben. Wenn wir dem Link folgen, kommen wir nun auf unsere ToDo Liste.

Integration in Angular

Bevor wir jetzt in unserer Angular App mit Amplify arbeiten können, müssen wir erstmal die Amplify Bibliotheken installieren. NPM bietet uns hier ein Modul.

1

npm install --save @aws-amplify/ui-angular

Nachdem das Modul heruntergeladen wurden, müssen wir dieses nur noch in unserer Angular Applikation importieren.

In der app.module.ts fügen wir folgendes hinzu.

1
2
3
4
5
6
7
8
9

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

@NgModule({
  ...,
  imports: [
    ..., 
    AmplifyUIAngularModule
  ]
})

Wir können nun weitere Backend Services in unsere Applikation einbauen. Ich will Ihnen heute zeigen, wie man eine einfach Benutzer Authentifizierung mittels Amazon Cognito realisieren kann.

Authentication

Applikation vorbereiten

Amplify bietet hierfür eine Backend-Funktionalität an, welche wir einfach in unserer Angular App integrieren können. Zur Authentifizierung der Benutzer nutzen wir Amazon Cognito, ein Webservice zur Benutzerverwaltung.

In dem Root-Verzeichnis unserer Applikation führen wir nun den folgenden Befehl aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ amplify add auth

Output: 
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
Successfully added auth resource bnovatodolist22083445 locally

Um die lokalen Backend Resources jetzt zu builden und diese in Amplify zu provisionieren, führen wir anschliessend den folgenden Befehl aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

$ amplify push

Output: 
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name         | Operation | Provider plugin   |
| -------- | --------------------- | --------- | ----------------- |
| Auth     | bnovatodolist22083445 | Create    | awscloudformation |
| Hosting  | amplifyhosting        | No Change | awscloudformation |
? Are you sure you want to continue? Yes
⠦ Updating resources in the cloud. This may take a few minutes...

Nach ein paar Minuten wurden per CloudFormation alle erforderlichen Resourcen erstellt und wir können mit der Authentifizierung fortfahren. Gleichzeitig wurde eine Datei aws-export.js in unserem Source Folder erstellt, welche wir jetzt noch benötigen, damit unsere Angular korrekt konfiguriert wird. Wir installieren uns erstmal eine neue Library “aws-amplify”

1

npm install --save aws-amplify

Danach können wir in der Datei app.module.ts Amplify folgendermassen konfigurieren.

1
2
3
4
5
6
7

import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
import Amplify from 'aws-amplify';

import awsmobile from '../aws-exports';

/* Configure Amplify resources */
Amplify.configure(awsmobile)

Amplify bietet uns eine Angular Komponente, die dafür sorgt, dass ein Benutzer authentifiziert sein muss bevor er die Applikation nutzen darf. Wir wrappen nun unseren eigenen Code in der app.component.html mit der “amplify-authenticator” Komponente. Diese sorgt dafür, dass der Code innerhalb der Komponente nur ausgeführt werden darf, wenn man authentifiziert ist.

1
2
3
4
5
6
7

<amplify-authenticator>
  <main>
    <div class="content">
      <app-to-dos></app-to-dos>
    </div>
  </main>
</amplify-authenticator>

Nun können wir einen ersten Test starten. Wir können die Applikation nun lokal wie gewohnt starten.

1

npm run start

Es sollte nun folgendes Fenster erscheinen:

Wenn jemand in der Browserkonsole den folgenden Fehler erhält Uncaught ReferenceError: global is not defined muss er in der index.html einfach das folgende Snippet im head einfügen

1
2
3

<script>  
var global = global || window;  
</script>

Benutzer anlegen

Wollen wir uns nun noch einen Benutzer im AWS Cognito anlegen, um unser Setup testen zu können. In der Cognito Konsole erstmal “Verwalten von Benutzerpools” auswählen.

Wir sehen nun den Benutzerpool, welcher durch amplify für uns hinzugefügt wurde.

Mit einem Klick auf den Pool, können wir diesen nun konfigurieren und Benutzer und Gruppen hinzufügen.

Unter Benutzer und Gruppen können wir nun einen neuen Benutzer erstellen.

Nun können wir versuchen uns mit dem neuen Benutzer anzumelden.

Wenn alles funktioniert, sehen wir noch ein Fenster zum Ändern des Passworts und anschliessend werden wir auf unsere Seite weitergeleitet.

Zusammenfassung

AWS Amplify ist ein sehr nützliches Tool zur schnellen Bereitstellung von Frontend-Applikationen mit Backend-Funktionalitäten.

Hier und da gibt es aber wohl noch ein paar Bugs. In meinem Test konnte ich beispielsweise auf keine Repositories von Github zugreifen. Auch die Integration in Angular ist noch nicht ausreichend dokumentiert (Siehe Fehler: Uncaught ReferenceError: global is not defined).