Tutorial: Erstellen Sie eine Zielseite ohne Server

Serverlose Komponenten sind eine neue Art, kleinere Funktionalitäten zu größeren Anwendungen zusammenzufügen.

Notiz: Wenn Sie noch nicht mit Serverless Components vertraut sind, Hier ist eine schnelle Erklärung.

Geschrieben von David Wells. 30. April 2018

In diesem Tutorial werden wir durch die Erstellung einer Zielseite mit den serverlosen Netlify- und Lambda-Komponenten gehen.

Die drei Komponenten, die wir verwenden, sind:

  1. Die Netlify-Site-Komponente
  2. Die AWS Lambda-Komponente, die mit der Mailchimp-API kommuniziert
  3. Die Rest-API-Komponente, die API Gateway im Hintergrund verwendet

Lassen Sie uns eintauchen und abdecken:

Einstieg

  1. Zuerst müssen Sie die Serverless Components über die installieren npm Paket:

    $ npm i serverless-components
    
  2. Legen Sie Ihre AWS-Anmeldeinformationen in Ihren ENV-Variablen fest:

    $ export AWS_ACCESS_KEY_ID=my_access_key_id
    $ export AWS_SECRET_ACCESS_KEY=my_secret_access_key
    

Notiz: Stellen Sie sicher, dass Sie über Node.js 8+ verfügen und npm auf Ihrem Rechner installiert.

Komponieren von Komponenten

Diese App besteht aus 3 Teilen: aws-lambda, rest-api, netlify-site.

Setzen wir sie zusammen.

1. Netlify-Site hinzufügen

Wir verwenden Netlify, um unsere erstellte Landing Page zu veröffentlichen create-react-app.

Ich habe Netlify gegenüber S3 für statisches Hosting gewählt, weil es:

  • Baut auf Github-Repo-Ereignissen auf (CI/CD-Fluss)
  • Verfügt über automatische Zweigvorschauen auf PRs
  • Behandelt Umleitungen standardmäßig über _redirects Datei 👌
  • Verarbeitet Proxy-URLs – dies gibt uns Ausstiegsluken für dynamische Seiten/Inhalte
  • Ist wahnsinnig günstig
  • Hat erstaunliche Unterstützung zu booten

Okay, lassen Sie uns die Komponente einrichten.

Im serverless.yml Wir müssen die Komponenten definieren, die wir unter verwenden components Schlüssel.

Die Eingänge der netlify-site Komponente benötigt ist hier zu sehen.

type: landing-page

components:
  myNetlifySite:
    type: netlify-site
    inputs:
      netlifyApiToken: abc
      githubApiToken: 123
      siteName: my-awesome-site-lol-lol.netlify.com
      siteDomain: testing-lol-lol-lol.com
      siteRepo: 
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

Lassen Sie uns das aufschlüsseln.

netlifyApiToken wird von Ihrem Netlify-Konto unter „Persönliche Zugriffstoken“ abgerufen. Ersetzen abc mit Ihrem gültigen Netlify-Token.

Bild


githubApiToken wird in github unter “Personal access tokens” eingerichtet. Der Token muss vorhanden sein admin:repo_hook und repo Zugang. Ersetzen 123 mit Ihrem gültigen Github-Token.

Bild


siteName ist die Netlify-Domain, die Sie für Ihre Website verwenden werden. Jede Site auf Netlify lebt auf einer eindeutigen Netlify-Subdomain, bis Sie sie mit Ihrem benutzerdefinierten Domainnamen maskieren. Veränderung my-awesome-site-lol-lol.netlify.com an eine eindeutige Adresse für Ihr Projekt.


siteDomain ist der eigentliche Domainname Ihrer Website. Sie müssen einen CNAME konfigurieren, der auf Netlify zeigt. Wenn Sie diesem Beispiel Ihre eigene Domäne hinzufügen möchten, folgen Sie den Anweisungen Anweisungen für benutzerdefinierte Domänen.


siteRepo ist, wo Ihr Site-Code lebt, und dieser ist wichtig. Sie können jede Art von Site/App, die Sie möchten, in Ihrem Repo verwenden, solange Sie Netlify den Build-Befehl geben und wo die erstellte Site ausgegeben wird. Wir werden verwenden create-react-app um eine Landingpage zu erstellen.

Unser Zielseitencode + Repo ist zu sehen hier.


siteBuildCommand ist der Build-Befehl für create-react-app. Es wird unsere React-App kompilieren und Dateien in die ausgeben build Verzeichnis für uns. Dieser Befehl ändert sich je nach Erstellungsprozess Ihrer Website/Apps.


siteBuildDirectory für uns ist die /build Verzeichnis. Dies ist das Standardverhalten von create-react-app.


siteRepoBranch wird der Zweig sein, der einen Neuaufbau unserer Website auslöst. Aka, wenn eine Änderung in die zusammengeführt wird master Branch wird Netlify unsere Live-Site automatisch neu erstellen und aktualisieren.


Sie können dies so bereitstellen, wie es jetzt ist, mit:

$ components deploy

Wenn Sie zu Netlify gehen und auf die neu erstellte Website klicken, sollten Sie die URL der Live-Zielseite sehen:

Bild

2. Hinzufügen der Lambda-Funktion für die Anmeldung

Jetzt müssen wir eine Lambda-Funktion hinzufügen, um unsere Formularübermittlungen zu verarbeiten.

Im serverless.ymlErgänzen Sie die aws-lambda Komponente zum components Block:

components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction

Erstellen Sie dann den Code für die Lambda-Funktion in a code Verzeichnis:

mkdir code
touch handler.js

Innen handler.js, fügen Sie Ihren Lambda-Code hinzu. Das code/handler.landingPageFunction verweist auf die hander.js Datei mit der exportierten landingPageFunction Funktion:

const request = require('request')

const mailChimpAPI = process.env.MAILCHIMP_API_KEY
const mailChimpListID = process.env.MAILCHIMP_LIST_ID
const mcRegion = process.env.MAILCHIMP_REGION

module.exports.landingPageFunction = (event, context, callback) => {
  console.log('Function ran!')
  const formData = JSON.parse(event.body)
  const email = formData.email

  if (!formData) {
    console.log('No form data supplied')
    return callback('fail')
  }

  if (!email) {
    console.log('No EMAIL supplied')
    return callback('fail')
  }

  if (!mailChimpListID) {
    console.log('No LIST_ID supplied')
    return callback('fail')
  }

  const data = {
    email_address: email,
    status: 'subscribed',
    merge_fields: {}
  }

  const subscriber = JSON.stringify(data)
  console.log('start to mailchimp', subscriber)

  request({
    method: 'POST',
    url: `https://${mcRegion}.api.mailchimp.com/3.0/lists/${mailChimpListID}/members`,
    body: subscriber,
    headers: {
      Authorization: `apikey ${mailChimpAPI}`,
      'Content-Type': 'application/json'
    }
  }, (error, response, body) => {
    if (error) {
      return callback(error, null)
    }
    const bodyObj = JSON.parse(body)

    if (response.statusCode < 300 || (bodyObj.status === 400 && bodyObj.title === 'Member Exists')) {
      console.log('success added to list in mailchimp')
      return callback(null, {
        statusCode: 201,
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Credentials': true
        },
        body: JSON.stringify({
          status: 'saved email ⊂◉‿◉つ'
        })
      })
    }

    console.log('error from mailchimp', response.body.detail)
    return callback('fail')
  })
}

Jetzt müssen wir die freilegen env Variablen, die die Funktion konsumieren soll.

Sie können Ihre Mailchimp-API-Schlüssel unter “Konto > Extras” abrufen:

Bild

Bild

Ihre Mailchimp-Listen-ID finden Sie unter Ihren Listeneinstellungen:

Bild

Die Region befindet sich oben in der URL Ihres Browsers. In unserem Fall ist es us11.

Fügen wir diese zur Funktion hinzu:

components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction
      env:
        MAILCHIMP_API_KEY: xyzabc123456-us11
        MAILCHIMP_LIST_ID: f95d7512fd
        MAILCHIMP_REGION: us11

Dein voller serverless.yml sollte an dieser Stelle so aussehen:

type: landing-page

components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction
      env:
        MAILCHIMP_API_KEY: xyzabc123456-us11
        MAILCHIMP_LIST_ID: f95d7512fd
        MAILCHIMP_REGION: us11
  myNetlifySite:
    type: netlify-site
    inputs:
      netlifyApiToken: abc
      githubApiToken: 123
      siteName: my-awesome-site-lol-lol.netlify.com
      siteDomain: testing-lol-lol-lol.com
      siteRepo: 
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

3. Hinzufügen der Rest-API, um die Lambda-Funktion verfügbar zu machen

Bisher haben wir eine Zielseite und eine Funktion. Sie sind in keiner Weise verbunden.

Wir müssen einen Live-Endpunkt für die Zielseite bereitstellen, um Formularübermittlungen zu pingen.

Machen wir das mit dem rest-api Komponente.

Fügen Sie die REST-API-Komponente zu der hinzu components Block aus serverless.yml:

components:
  apiEndpoint:
    type: rest-api
    inputs:
      gateway: aws-apigateway
      routes:
        /sign-up:
          post:
            function: ${landingPageFunction}
            cors: true

Lassen Sie uns das aufschlüsseln.

Die Eingänge für die rest-api Komponente nehmen a gateway und routes.

gateway ist das API-Gateway, das Sie verwenden möchten. In diesem Fall verwenden wir die aws-apigateway Komponente.

routes sind die URL-Pfade und die Funktionen, die ausgelöst werden, wenn sie getroffen werden. Ein größeres REST-API-Beispiel finden Sie in der /examples/retail-app hier.

${landingPageFunction} verwiesen wird in der /sign-up route bezieht sich auf die zuvor definierte Funktion. Wir übergeben also eine direkte Referenz der Funktion an die rest-api-Komponente. Aka, Zusammensetzbarkeit.

An diesem Punkt sind Sie voll serverless.yml sollte so aussehen:

type: landing-page

components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction
      env:
        MAILCHIMP_API_KEY: xyzabc123456-us11
        MAILCHIMP_LIST_ID: f95d7512fd
        MAILCHIMP_REGION: us11
  apiEndpoint:
    type: rest-api
    inputs:
      gateway: aws-apigateway
      routes:
        /sign-up:
          post:
            function: ${landingPageFunction}
            cors: true
  myNetlifySite:
    type: netlify-site
    inputs:
      netlifyApiToken: abc
      githubApiToken: 123
      siteName: my-awesome-site-lol-lol.netlify.com
      siteDomain: testing-lol-lol-lol.com
      siteForceSSL: true 
      siteRepo: 
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

4. Machen Sie den API-Endpunkt für die Netlify-Site verfügbar

Großartige Neuigkeiten! Wir haben alle Teile, die wir für die gewünschte Funktionalität benötigen.

Es gibt einen letzten Schritt, den wir erledigen müssen. Wir müssen dem Frontend die Live-URL mitteilen, damit es weiß, wohin es die Formulardaten tatsächlich senden soll.

Wir werden den Live-Endpunkt während des Site-Builds als Umgebungsvariable an das Frontend liefern.

Da Komponenten Ausgänge haben, können wir Werte von einer Komponente an eine andere weitergeben.

Also müssen wir die verwenden siteEnvVars Eingabe für die netlify-site Komponente und übergeben Sie es die url Ausgabe von der rest-api Komponente.

Wir machen das so:

type: landing-page

components:
  landingPageFunction:
    type: aws-lambda
    ...
  apiEndpoint:
    type: rest-api
    ...
  myNetlifySite:
    type: netlify-site
    inputs:
      netlifyApiToken: abc
      githubApiToken: 123
      siteName: my-awesome-site-lol-lol.netlify.com
      ...
      siteEnvVars:
        REACT_APP_SIGNUP_API: ${apiEndpoint.url}sign-up

${apiEndpoint.url} bezieht sich auf apiEndpoint rest-api-Komponente und ihr ausgegebener Wert von url.

So ${apiEndpoint.url}sign-up wird zu so etwas wie lösen https://3m0ylzhbxk.execute-api.us-east-1.amazonaws.com/dev/sign-up.

Wir übergeben diesen Wert an die Netlify-Site-Build-Umgebungsvariablen mit dem create-react-app Konventionen REACT_APP_${YOUR KEY}.

Auf diese Weise können wir verwenden process.env.REACT_APP_SIGNUP_API im Code unserer React-App:

const formAPI = process.env.REACT_APP_SIGNUP_API

function formHandler(email) {
  const data = {
    email: email
  }
  return axios({
    method: 'post',
    url: formAPI,
    data: data,
  })
}

Sie können dies in Aktion in unserem sehen Zielseiten-Repo.

Dein voller serverless.yml Sollte aussehen, wie:

type: landing-page

components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction
      env:
        MAILCHIMP_API_KEY: xyz-us11
        MAILCHIMP_LIST_ID: lol-id-here
        MAILCHIMP_REGION: us11
  apiEndpoint:
    type: rest-api
    inputs:
      gateway: aws-apigateway
      routes:
        /sign-up:
          post:
            function: ${landingPageFunction}
            cors: true
  myNetlifySite:
    type: netlify-site
    inputs:
      netlifyApiToken: xxxx
      githubApiToken: yyyy
      siteName: serverless-components.netlify.com
      siteDomain: components.serverless.com
      siteForceSSL: true 
      siteRepo: 
      siteBuildCommand: npm run build
      siteBuildDirectory: build
s:
        REACT_APP_SIGNUP_API: ${apiEndpoint.url}sign-up

Einsetzen!

Wir haben unsere Landingpage erstellt. Es ist Zeit für den endgültigen Einsatz.

In Ihrem Terminal ausführen:

../../bin/components deploy

Zusammenfassung

Wie Sie sehen können, können Sie mit nur ein paar Komponenten im Handumdrehen eine Zielseite erstellen und ausführen.

Was werden Sie mit Komponenten bauen?

Mehr zu Komponenten

Similar Posts

Leave a Reply

Your email address will not be published.