Erste Schritte mit Serverless in 5 Minuten

Sofern Sie sich nicht unter einem Felsen versteckt haben, haben Sie wahrscheinlich schon von Serverless gehört. Sie haben die Artikel, Tweets und die endlose Reihe von Konferenzen gesehen, die Serverless so sehr fördern, dass Sie vielleicht anfangen zu denken, dass Serverless eines dieser lästigen Schlagworte ist, mit denen sich Leute schlau machen, klingt wie Quantencomputing, Dark Data, Blockchain-Technologie oder das Treibhauseffekt. Okay, vielleicht nicht der letzte.

Also, was soll die ganze Aufregung?

Technisch gesehen bedeutet serverlos nicht, dass Sie keinen Server haben, sondern dass ein Dienstanbieter den Server für Sie verwaltet. Im Gegenzug halten Sie sich an eine Reihe von Regeln wie die maximale Ausführungsdauer für die Anfrage in 300 Sekunden und die maximale Größe einer komprimierten Lambda-Funktion von 50 MB.

Zugegeben, Sie müssen sich an diese neuen Regeln gewöhnen, aber wenn Sie aufhören, sie als Einschränkungen zu betrachten, und sie als das sehen, was sie wirklich sind, ist dies eine Best-Practice-Empfehlung. Was ich meine ist, dass Sie Lambdas haben könnten, die größer als 50 MB sind, sicher, aber Ihr Code wird schwer zu warten sein. Die Ausführung von Anfragen könnte länger als 5 Minuten dauern, aber das möchten Sie auch auf herkömmlichen Servern wirklich vermeiden, oder?

Wo ist also die Magie?

Die Technologie hinter Serverless ist nichts Neues. Es war viel länger da, als du denkst. Serverless Computing ist ein Cloud-Computing-Ausführungsmodell, bei dem sich der Dienstanbieter um die Infrastruktur kümmert. Der einzige Grund, warum Sie diesen Artikel gerade nicht lesen können, ist, dass Anbieter wie AWS Lambda oder Microsoft Azure (unter anderem) es für jedermann möglich gemacht haben, serverlose Technologie zu nutzen, indem sie ihren Service zu einem mehr als erschwinglichen Preis anbieten.

Ok, gut, aber wie genau funktioniert es?

Sie melden sich bei einem Anbieter an, der FaaS (Functions as a Service) oder PaaS (Platform as a Service) anbietet, und Sie verwenden dessen Infrastruktur, um Ihren Code zum Laufen zu bringen, ohne etwas unter der Haube (dem Server) zu verwalten.

Ja, aber wie?

Nehmen AWS-Lambda, dem derzeit beliebtesten FaaS-Anbieter. Sie erstellen kleine Funktionen, die Sie in Lambdas hochladen. Diese Funktionen verhalten sich wie Microservices. Sie führen ein bisschen Code aus und geben einen Wert zurück oder rufen ein zweites Lambda auf.
Anstatt also einen herkömmlichen Server mit PHP oder NodeJs zu haben, den Sie zum Erstellen eines Microservice verwenden würden, um beispielsweise die Summe zweier Zahlen zurückzugeben, laden Sie diese Logik in ein Lambda hoch und senden eine Anfrage mit den beiden Zahlen.

„Okay, aber wie kommt es, dass unsere alten Server nicht mehr in Ordnung sind?“

Es ist nicht so, dass traditionelle Server nicht in Ordnung sind oder verschwinden werden, tatsächlich möchten Sie möglicherweise nicht einmal Serverless für Ihre App verwenden. Es geht nicht um eine universelle Lösung für alle Probleme der Menschheit.
Davon abgesehen hat Serverless einige Vorteile, die es so beliebt gemacht haben. Es ist in der Tat so beliebt, dass die Adoptionsrate im Jahr 2017 bei etwa 667 % lag.
Es gibt drei Hauptvorteile von Serverless, die meiner Meinung nach hervorstechen: Kosten, Produktionsgeschwindigkeit, Skalierbarkeit. Lassen Sie mich erklären.

1. Kosten

Dies ist eine große Sache. Eine kürzlich durchgeführte Studie hat gezeigt, dass Unternehmen durchschnittlich 24 % sparen, einige haben berichtet, dass sie von einer monatlichen Rechnung von 10.000 $ auf 370 $ steigen (das stimmt. Nein, ich habe keine Null vergessen. Es sind 370 $). Hier ist ein Link zu einem serverlose Fallstudie. Grundsätzlich zahlen Sie bei Diensten wie Lambda oder Azure nur, was Sie nutzen.

2. Entwicklungsgeschwindigkeit

Nach der Umstellung auf Serverless sparen Sie jeden Monat etwa 4 Entwicklerarbeitstage ein. Da Sie sich nicht um das Backend kümmern müssen, können Sie sich auf die App, die Website und vor allem auf die Geschäftslogik konzentrieren. Stellen Sie sich vor, was Sie erreichen können, wenn Ihr Team jeden Monat 4 zusätzliche Tage Zeit hat, um an etwas anderem zu arbeiten.

3. Skalierbarkeit

Ohne zu sehr ins Detail zu gehen, werden Sie sicher zustimmen, dass die Skalierbarkeit auf herkömmlichen Servern ein Problem darstellt. Sie haben viele Beispiele gesehen, bei denen Websites und Apps abstürzen, wenn der Traffic zunimmt. Mit Serverless verschwindet dieses Problem, da Ihr Anbieter sicherstellt, dass die App ordnungsgemäß skaliert wird.

Probieren wir es aus!

Das Erstellen einer Website auf Serverless ist einfach, so einfach, dass Sie es können Starten Sie eine Website in weniger als 15 Minuten. Ich werde Sie nicht mit den Details langweilen, aber ich werde dennoch einen Link für diejenigen teilen, die klein anfangen und langsam aufsteigen wollen.

Ich war zwiegespalten, als ich versuchte, herauszufinden, was das Einzige ist, was jede Website hat, das auf Serverless großartig funktionieren würde, und nach sorgfältiger Überlegung stellte ich fest, dass Kontaktformulare auf etwa 99 % der Websites zu finden sind, die ich in den letzten Jahren besucht habe.

Vor Serverless mussten Sie PHP verwenden, um E-Mails zu senden, zumindest war dies die beliebteste Art, ein Formular zu erstellen, das eine Nachricht sendet. Der Code, der das Formular versendet, sieht etwa so aus:

<?php
$to      = 'nobody@example.com';
$subject="the subject";
$message="hello";
$headers="From: webmaster@example.com" . "\r\n" .
    'Reply-To: webmaster@example.com' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);
?>

Es scheint einfach, oder? Auf dem Papier geht das, aber mit der php mail()-Methode werden Sie unweigerlich auf Probleme stoßen, so dass Sie unangenehm lange beim Debuggen und Ansehen von Protokollen festsitzen. Selbst nachdem Sie es zum ersten Mal zum Laufen gebracht haben, gibt es eine Reihe von Faktoren, die fast immer außerhalb Ihrer Kontrolle liegen und dazu führen, dass Ihr Formular nicht funktioniert, Dinge wie das Schließen oder Ändern von Ports, der Host könnte das E-Mail-System einschränken oder deaktivieren, usw.

Serverless löst diese Probleme mit Ports und vermeidet Hosting-Probleme, indem alles aus der „allmächtigen“ Cloud funktioniert.

Ich gehe davon aus, dass Sie den Knoten bereits installiert haben. Lassen Sie uns Ihr Terminal öffnen und eine einfache Boilerplate-Vorlage installieren: serverless create –template aws-nodejs

Als nächstes bekommen wir alle Pakete, die wir brauchen, installiert. Zuerst generieren wir unsere package.json mit npm init -y und dann installieren wir unsere Abhängigkeiten mit npm i -s body-parser cors express serverless-http aws sdk

Sobald dies abgeschlossen ist, müssen Sie Ihr Projekt in einen Editor laden und Ihre handler.js-Datei öffnen und den SES – Simple Email Service von AWS aufrufen. Das Aufrufen von SES ist recht einfach und sieht in etwa so aus: ses.sendEmail(params,function(err,data){}). Sehen Sie sich ihre Dokumentation an, um mehr zu erfahren:

Was wir tun müssen, ist, uns für AWS SES anzumelden, und Sie tun dies, indem Sie zur AWS-Konsole gehen, auf SES klicken (Sie können die Suchleiste verwenden, um nach SES zu suchen), zur linken Seitenleiste gehen und auf E-Mail-Adresse klicken. Fügen Sie Ihre E-Mail-Adresse hinzu und bestätigen Sie sie. Es ist ein zweiminütiger Prozess.

Kommen wir nun zurück zur Codierung des Kontaktformulars. Erstellen Sie in Ihrem Projektordner einen neuen Ordner mit dem Namen „form“. In diesem Ordner erstellen wir unsere Formular-Assets. Erstellen Sie eine Datei namens script.js und style.css. Wir werden jeden von ihnen einzeln durchgehen.

Unsere script.js sieht so aus:

let name = document.querySelector("#name");
let email = document.querySelector("#email");
let message = document.querySelector("#message");
let error = document.querySelector(".error");
let btn = document.querySelector("button");
let success = document.querySelector(".success");

btn.addEventListener("click", submit);

function submit(e) {
  e.preventDefault();

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "yourendpoint", true);

  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    }
  };
  var data = {
    name: name.value,
    email: email.value,
    message: message.value
  };

  if (name.value && email.value && message.value) {
    success.style.display = "block";
    success.innerHTML = "Thanks for submitting";
    document.querySelector(".all").style.display = "none";
    xhr.send(JSON.stringify(data));

  } else {
      error.style.display = "block";
      error.innerHTML = "Please Fill  All Details";
  }
}

Sie werden hier wahrscheinlich bekannte Dinge sehen, wie Sie sollten. Hier gibt es keine „schwarze Magie“ von Lambda. Wir definieren unsere Parameter, die wir im Formular verwenden werden, erstellen die Submit-Funktion, die unseren Endpunkt aufruft. Ja, am Endpunkt (Zeile 14) liegt die Magie. Notieren Sie sich das, denn wir werden gleich darauf zurückkommen.

Da wir hier sind, erstellen wir auch die .css-Datei, nur um es aus dem Weg zu räumen.

*{
box-sizing: border-box;
padding: 0;
margin: 0
}

body{
    font-family: sans-serif;
}

.items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem;
    font-size: 1.1rem;

    padding: 1rem;
}

input{
    padding: 1rem;
    margin: .8rem;
    width: 25rem;
    height: 3rem;
    font-size: 1.1rem;
    border: 3px solid rgb(31, 121, 255);
    outline: none;
}

textarea{
    width: 25rem;
    height: 10rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
     outline: none;
 border: 3px solid rgb(31, 121, 255);
    font-size: 1.1rem;
}

.area{
    display: flex;
}

.area-label{
    margin-left:-2rem;
}

.txt{
    margin-left:.6rem;
}

button{
padding: 1rem;
width: 10rem;
margin-top: 2rem;
text-align: center;
background-color: rgb(75, 224, 75);
font-size: 1.3rem;
color: rgb(2, 2, 15);
box-shadow: 0 .2rem .2rem black;
}

.success{
   background-color: rgb(75, 214, 224);
   font-size: 1.2rem;
   text-transform: capitalize;
    text-align: center;
    margin-top: 10rem;
    padding: 2rem;
    box-shadow: 0 .2rem .2rem rgb(0, 0, 0);
   display: none;
}

.error{
    display: none;
    animation: move .2s ease-in ;
}
@keyframes move{

    0%{
        opacity: 0;
        transform: translateY(-80%);
    }
    50%{
        opacity: .6;
        transform: translate(-20%);
    }

    70%{
        opacity: .7;
        transform: translate(20%);
    }

    100%{
        opacity: 1;
        transform: translate(0);
    }

}

Ich werde nicht auf der .css-Datei bestehen, aber wenn Sie denken, dass ich etwas erklären muss, hinterlassen Sie bitte einen Kommentar.

Nachdem wir nun unsere Formular-Assets erstellt haben, laden wir sie in eine HTML-Datei. Gehen Sie zum Stammverzeichnis Ihres Projekts und erstellen Sie eine neue Datei namens index.html.
Da der Code einfach ist, fügen Sie einfach das Folgende ein und Sie sind fertig.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name= "viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contact us</title>
    <link rel="stylesheet" href="form/style.css">

</head>
<body>

<div class="all">
  <form action="" class="items">
    <h1>Contact Us</h1>

      <div class="error-items">
<p style="color:red"  class="error"></p>
</div>
<div>
    <label for="name">Name</label>
    <input type="text"  id="name"  required  placeholder="Enter Your Name" class="name" />
</div>

<div>
    <label for="email">Email</label>
<input type="email"  required placeholder="Your Email" id="email"  class="normal" />
</div>

<div class="area">
<label for="message" class="area-label">Message</label>
<textarea type="text" placeholder="Message" required id="message" class="txt"></textarea>
</div>
<button>Send</button>
  </form>
</div>

<p class="success"></p>
    <script src="./form/script.js"></script>
</body>
</html>

Ich weiß, dass Sie sich nach dem Artikel bis jetzt gelangweilt haben, es ist nichts Cooles passiert. Nun, halten Sie sich an Ihrem Platz fest, denn als Nächstes schreiben wir unseren serverlosen Code.

Wir müssen uns zuerst mit der Datei handler.js befassen. Öffnen Sie es im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Code ein:

const serverless = require("serverless-http");
const AWS = require("aws-sdk");
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();

if (!AWS.config.region) {
  AWS.config.update({
    region: "us-east-1"
  });
}

const ses = new AWS.SES();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post("/", (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const message = req.body.message;

  const emailParams = {
    Source: "yourname@mail.com", // Your Verified Email
    Destination: {
      ToAddresses: ["yourname@mail.com"] // Your verfied Email
    },
    ReplyToAddresses: [req.body.email],
    Message: {
      Body: {
        Text: {
          Charset: "UTF-8",
          Data: `${message}  from  ${req.body.email}`
        }
      },
      Subject: {
        Charset: "UTF-8",
        Data: "You Received a Message from www.domainname.com"
      }
    }
  };

  ses.sendEmail(emailParams, (err, data) => {
    if (err) {
      res.status(402).send(`${err} ${err.stack}`);
    }
    if (data) {
      res.send(data);
    }
  });
});

module.exports.form = serverless(app);

Wir haben gerade die Methode erstellt, die SES aufruft und die Nachricht sendet. Ziemlich einfaches Zeug.

Als nächstes werden wir uns die serverlose yml ansehen. Hier wählen wir einfach aus, welche Region wir verwenden, und definieren die eigentliche Funktion, die Lambda ausführt, und die Aktion, die ses:SendEmail ist.

service: contact-form

provider:
  name: aws
  runtime: nodejs8.10
  region: us-east-1
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "ses:SendEmail"
      Resource: "*"

functions:
  app:
    handler: handler.form
    events:
        - http: ANY /
        - http: 'ANY {proxy+}'


Nächste Station: Bereitstellung. Klingt kompliziert, ist aber eigentlich eine einfache Aufgabe. Alles, was Sie tun müssen, ist, Ihr Terminal zu öffnen und auszuführen: sls deploy.

Sie sehen das Protokoll auf dem Bildschirm und wenn es fertig ist, müssen Sie den Endpunkt kopieren und in Ihre script.js-Datei einfügen, die ich zuvor erwähnt habe. Öffnen Sie script.js und ersetzen Sie in Zeile 14 das Wort „IhrEndpunkt“ mit dem bereitgestellten Endpunkt. Das ist es! Öffnen Sie Ihr HTML und testen Sie Ihr Kontaktformular.

Schön gemacht! High-Five rundum! Es war eine ziemliche Reise, aber es lohnt sich. Sie sind stolzer Besitzer einer brandneuen Website.

23yriddx3cajprkhuk95.gif

Herzliche Glückwünsche!

Bevor ich Sie gehen lasse, muss ich Ihnen etwas über die Überwachung Ihrer App erzählen, was sehr wichtig ist, wenn Sie mit Serverless arbeiten. Sie sollten ein Auge auf Gesundheitsprobleme, Anrufzeiten und eventuelle Fehler haben. Wenn Sie Ihre serverlose Anwendung nicht im Auge behalten, kann dies viel kosten, und Startups können sich das nicht leisten. Oder selbst wenn sie sich die Kosten leisten könnten, was sie einfach nicht tun können, ist, dass ihr Dienst unterbrochen wird, weil die Ausführung eines Lambda zu lange dauert, was eine schlechte Erfahrung für ihre Kunden verursacht.

Sie können Ihre App entweder über die AWS-Konsole überprüfen, aber das ist nicht leicht verständlich, oder über einen Drittanbieter wie Dashbird.io, einen Dienst, der Ihr AWS Lambda überwacht und Einblicke in das gibt, was hinter den Kulissen passiert.

Similar Posts

Leave a Reply

Your email address will not be published.