Construirea unui formular de contact fara server pentru site uri statice
Fotografie de Caleb George pe Unsplash

Introducere

Acum câțiva ani, AWS a lansat serviciul de găzduire statică S3, care a reprezentat o schimbare de paradigmă pentru găzduirea site-urilor web statice. Tehnologia era clară, toate activele statice (HTML, CSS și JS) ar locui într-o bucket S3 pentru a găzdui site-ul dvs. impresionant. O idee destul de mi-a plăcut personal, într-adevăr. Dacă nu ar fi fost acel formular de contact foarte important care găzduia pe S3, ar fi fost grozav, dar formularul dvs. de contact ar fi o glumă, cu excepția cazului în care ați avea un alt server pentru a răspunde cererilor AJAX din acel formular. În momentul în care ai avea serviciul pregătit, soluția S3 nu ar părea deloc atât de atractivă.

În epoca tehnologiei de ultimă oră, există întotdeauna inovații inovatoare la colț. Una dintre inovațiile tehnologice minunate se întâmplă să fie fără server. Nu că nu există servere implicate, dar acum îți poate păsa mai puțin de ele. Serverless poate fi o soluție adecvată și viabilă pentru o mulțime de probleme, este cea mai perfectă soluție pentru formularul dvs. de contact găzduit static. Continuați să citiți până la sfârșitul acestei postări, veți putea gestiona formularele site-ului dvs. web în cel mai ieftin și cel mai simplu mod posibil.


Cadrul fără server

Construirea unui formular de contact fara server pentru site uri statice
Sursă: https://serverless.com/

Serverless este setul dvs. de instrumente pentru implementarea și operarea arhitecturilor fără server. Concentrați-vă pe aplicație, nu pe infrastructură.

Serverless.com

Cuțitul elvețian al tehnologiilor fără server. Serverless Framework este un cadru web gratuit și open-source scris în Node.js. Serverless a fost primul cadru dezvoltat pentru construirea de aplicații exclusiv pe AWS Lambda, platforma de calcul fără server furnizată de Amazon Web Services. În prezent, aplicațiile dezvoltate cu Serverless Framework pot fi implementate către alți furnizori de servicii FaaS. Iată lista serviciilor cloud Serverless acceptate de Serverless Framework:


Noțiuni introductive despre Serverless Framework

Evident, sunteți destul de încântați să începeți cu Serverless Framework, haideți să urmărim și să începem prin instalarea Serverless.

Configurarea Serverless este simplă. Trebuie să-l instalați prin npm și să îl conectați la contul dvs. AWS.

1. Instalarea fără server la nivel global

E timpul să obțineți lucruri practice fără server.

$ npm install serverless -g

Această comandă instalează Serverless la nivel global pe mașina dvs. locală. Comenzile fără server sunt acum disponibile de la terminalul dvs.

Notă: Rulând Linux, poate doriți să rulați comanda de mai sus ca sudo.

2. Creați un utilizator IAM în AWS Console

Du-te la Consola AWS, veți găsi Serviciul IAM listate mai jos grupul „Securitate, identitate și conformitate”. În interiorul tabloului de bord IAM, faceți clic pe fila Utilizatori și faceți clic pe butonul „Adăugați utilizator”.

1611498912 932 Construirea unui formular de contact fara server pentru site uri statice
Fila utilizator AWS IAM Dashboard

Creați un utilizator nou și permiteți-i utilizatorului acces programatic dând clic pe caseta de selectare Acces programatic. Apoi, în secțiunea de permisiuni, trebuie să adăugați un set de permisiuni utilizatorului. Din lista de opțiuni disponibile din „Atașați direct politicile existente” verificați AdministratorAccess.

1611498913 802 Construirea unui formular de contact fara server pentru site uri statice

După ce utilizatorul este creat, veți avea acces la utilizatori ID cheie de acces șiCheie de acces secret. Vi se va cere să utilizați aceste taste în pasul următor.

1611498914 550 Construirea unui formular de contact fara server pentru site uri statice

Cuvânt de avertizare: Acestea sunt genul de acreditări pe care nu doriți să le pierdeți din greșeală, nu uitați că le-ați furnizat AdministratorAccess către acest utilizator. Utilizatorul cu AdministratorAccess pot face aproape totul cu contul dvs. AWS.

3. Configurarea Serverless pentru a utiliza acreditările IAM

Grozav! Cu tastele, puteți configura Serverless Framework pentru a vă accesa contul AWS. Treceți la terminalul dvs. și utilizați această comandă pentru a configura Serverless:

$ sls config credentials --provider aws --key xxxxxxxxxxxxxx --secret xxxxxxxxxxxxxx --profile <username>

Acum, instalarea dvs. fără server știe ce cont AWS trebuie să vă conectați.

Notă: sls este un alias pentru serverless comanda. Puteți utiliza ambele în același efect. Dar sls este cam mișto.

4. Crearea unui serviciu

Cu Serverless Framework conectat la contul dvs. AWS, puteți configura un proiect Serverless într-o clipită. Porniți terminalul și lansați următoarea comandă:

$ sls create --template aws-python --path <your-folder-path>

--template flag este folosit pentru a specifica un șablon presetat cu setările date. În comanda de mai sus șablonul aws-python va configura proiectul configurat pentru a utiliza AWS ca furnizor și Python ca runtime. Comanda se va genera automat serverless.yml , handler.py și .gitignorefișier cu valori prestabilite.

Configurația este definită în serverless.yml fişier. Acest fișier este cel mai important fișier din Serverless Framework. Este aproape magic, având în vedere modul în care poate învârti infrastructura pe care ați definit-o în ea. Conținutul generării automate serverless.yml fișierul va arăta cam așa:

service: <your-service-name>
  
provider:  
  name: aws  
  runtime: python2.7
    
functions:  
  hello:    
    handler: handler.hello

provider secțiunea definește tot ceea ce este legat de furnizorul de servicii, există mult mai multe proprietăți pentru ao configura în continuare, le puteți arunca o privire aici. În generarea automată serverless.yml fișier, trebuie să adăugați două etichete importante în provider secțiunea, care sunt după cum urmează:

region: <your-aws-region>
profile: <aws-username-with-programmatic-access>

functions proprietatea este utilizată pentru a declara funcțiile fără server, puteți declara mai multe funcții sub această proprietate. Exemplul de mai sus declară o funcție numită hello prezent în handler.py fişier. Navigați la handler.py fișier și veți găsi așa ceva:

import json
def hello(event, context):    
	body = {
    	"message": "Go Serverless v1.0! Your function executed      successfully!",        
        "input": event    
    }
    response = {
    	"statusCode": 200,        
        "body": json.dumps(body)    
    }
    return response

Aplicația fără server

Soluția noastră fără server utilizează infrastructura AWS, constă din API Gateway, Lambda Functions, DynamoDB și Simple Email Service (SES). Pentru a obține acest rezultat final, vom folosi Serverless Framework introdus anterior.

1611498914 127 Construirea unui formular de contact fara server pentru site uri statice
Arhitectura aplicației Serverless
  • Site static –Amazon S3 oferă un server web robust și simplu. Toate fișierele statice HTML, CSS și JS pentru aplicația dvs. pot fi difuzate de la S3. Formularul de contact de pe site-ul nostru static este trimis utilizând AJAX.
  • API Gateway –API Gateway este sursa evenimentului pentru aplicație, acționează ca o punte între formularul nostru de contact și funcția lambda fără server. Trece solicitarea de la formularul de contact la funcția lambda. API Gateway efectuează, de asemenea, sarcini precum controlul accesului, monitorizarea, controlul versiunilor API și gestionarea traficului.
  • AWS Lambda –AWS Lambda este locul în care are loc acțiunea. Funcțiile Lambda rulează în containere de calcul fără stat care sunt declanșate de evenimente, gestionate și efemere. În exemplul nostru, folosim o funcție lambda pentru a trimite e-mailuri utilizând SES și pentru a stoca conținutul cererii în baza de date DynamoDB NoSQL.
  • Serviciu simplu de e-mail (SES) –Serviciul de trimitere de e-mail bazat pe cloud de la Amazon. Serviciu de e-mail scalabil, puteți trimite e-mailuri de marketing și tranzacționale utilizând SES. În exemplul nostru, folosim SES pentru a trimite e-mailuri utilizând o adresă de e-mail verificată.
  • DynamoDB –DynamoDB oferă o bază de date scalabilă, consistentă, gestionată complet și fără relații de la Amazon. În exemplul nostru, folosim DynamoDB pentru a stoca și a prelua mesajele primite din formularul de contact static.

Aici puteți găsi codul sursă pentru aplicația demonstrativă. Continuați și clonați-l!

faizanbashir / python-ses-dynamodb-contactform
python-ses-dynamodb-contactform – Serverless Framework SES și DynamoDB Formular de contactgithub.com


Ghid de aplicare

Să ne plimbăm prin aplicația demonstrativă înainte să o implementăm efectiv pe AWS.

1. Demistificarea fișierului serverless.yml

serverless.yml fișier definește serviciile pe care aplicația trebuie să le folosească și să interacționeze. Resursele și acțiunile pe care funcțiile Serverless le pot efectua sunt enumerate în iamRoleStatements proprietate. Enumeră acțiunile și resursele.

iamRoleStatements:
  - Effect: "Allow"
    Action:
      - ses:SendEmail      
      - ses:SendRawEmail    
    Resource: "*"  
  - Effect: "Allow"    
    Action:      
      - dynamodb:Scan      
      - dynamodb:PutItem    
    Resource: "arn:aws:dynamodb:${opt:region, self:provider.region}:*:table/${self:provider.environment.DYNAMODB_TABLE}"

În serverless.yml permitem utilizarea funcțiilor Serverless ses:SendEmail și dynamoDB:PutItem acțiuni printre multe altele definite mai sus.

Deoarece Lambda rulează funcții fără server în cloud, trebuie să definim funcțiile undeva. Funcțiile sunt definite folosind functions proprietate. În aplicația noastră de exemplu, am definit evenimente atașate acestora.

functions:  
  sendMail:    
    handler: handler.sendMail
    description: Send Email using AWS SES Service
    events:
      - http:          
        path: sendMail          
        method: post          
        integration: lambda          
        cors: true          
        response:            
          headers:              
            "Access-Control-Allow_Origin": "'*'"  
            
  list:    
    handler: handler.list    
    description: List all the contact form submissions    
    events:      
      - http:          
        path: list          
        method: get          
        integration: lambda          
        cors: true          
        response:            
          headers:              
            "Access-Control-Allow_Origin": "'*'"

O altă caracteristică excelentă a Serverless Framework este că va crea un API în AWS API Gateway și îl va lega de funcția Lambda relevantă. Acest lucru se face folosind http proprietate definită în events proprietate.

2. Crearea resurselor

Cu Serverless Framework creați resurse precum un tabel DynamoDB așa cum am făcut aici. Acest fragment de cod este responsabil pentru crearea unui tabel DynamoDB cu configurația dată.

resources:  
  Resources:    
    ContactFormDynamoDbTable:      
      Type: 'AWS::DynamoDB::Table'      
      DeletionPolicy: Retain      
      Properties:        
        AttributeDefinitions:          
          -            
            AttributeName: id            
            AttributeType: S        
        KeySchema:          
          -            
            AttributeName: id            
            KeyType: HASH        
        ProvisionedThroughput:          
          ReadCapacityUnits: 1          
          WriteCapacityUnits: 1        
        TableName: ${self:provider.environment.DYNAMODB_TABLE}

3. Aruncați o privire în funcțiile Serverless

Aplicația demonstrativă este scrisă în piton, folosește boto3 AWS SDK pentru a trimite e-mailuri folosind SES și pentru efectuarea operațiilor de citire / scriere pe DynamoDB.

sendMail funcția este declanșată atunci când a POST solicitarea este primită din formularul de contact de pe /sendMail cale. list funcția este declanșată de un GET solicită să /list calea definită în serverless.yml fişier.


Construirea aplicației

Acum că ați configurat și configurat Serverless Framework în mașina dvs., este timpul să faceți lucrurile să ruleze.

1. Clonați aplicația

Să începem prin clonarea aplicației din Github.

$ git clone https://github.com/faizanbashir/python-ses-dynamodb-contactform
$ cd python-ses-dynamodb-contactform

2. Verificați adresa de e-mail cu SES

Mergeți rapid la verificarea e-mailului pe care intenționați să îl trimiteți de la SES. Tot ce trebuie să faceți este să adăugați o adresă de e-mail, AWS vă va trimite o verificare cu un link pentru a verifica adresa de e-mail.

1611498915 255 Construirea unui formular de contact fara server pentru site uri statice

După verificarea adresei de e-mail, „Starea verificării” pentru e-mail va apărea ca „verificată”.

1611498915 893 Construirea unui formular de contact fara server pentru site uri statice

3. Configurarea aplicației

Trebuie să configurați fișierul serverless.yml cu detalii specifice contului dvs. pentru a-l face să funcționeze. Inlocuieste region, profile și SENDER_EMAIL proprietăți în serverless.yml așa cum se vede aici:

provider:  
  name: aws  
  runtime: python2.7  
  region: <aws-region>  
  profile: <aws-user>  
  ...
environment:  
  SENDER_EMAIL: <verified-email-address>

Minunat! cu configurarea realizată, vă puteți îndrepta atenția asupra implementării aplicației.

4. Implementarea în AWS

Tot ce este în loc acum, puteți implementa aplicația cu o singură comandă, nu este atât de super.

$ sls deploy -v

Va dura un minut sau două pentru a fi executat dacă ați urmat religios acest tutorial, la final vă va oferi o listă de puncte finale pe care să le utilizați pentru apelarea funcțiilor noastre. Va arăta cam așa:

endpoints:
POST - https://xxx.execute-api.xx.amazonaws.com/development/sendMail
GET - https://xxxx.execute-api.xx.amazonaws.com/development/list

5. Testarea punctelor finale

Acum, că avem punctele finale, să testăm aplicația pentru a vedea dacă funcționează sau nu. /sendMail punctul final așteaptă intrarea în format JSON.

$ curl --header "Content-Type: application/json" --request POST --data '{"firstname": "John", "lastname": "Doe", "email": "john@doe.com", "message": "Hi there"}'https://xxx.execute-api.xx.amazonaws.com/development/sendMail

Dacă e-mailul este trimis și intrarea este scrisă pe DynamoDB, cererea va ieși cu un răspuns ca acesta.

> "Email Sent!"

Acum, să testăm /list punctul final în același mod cu GET punctul final pe care l-ați obținut după implementarea aplicației.

$ curl https://xxxx.execute-api.xx.amazonaws.com/development/list

/list răspunsul final va arăta cam așa:

> {"body": [{"firstname": "John", "lastname": "Doe", "email": "john@doe.com", "updatedAt": 1529425349731, "message": "Hi there", "id": "f651c404-73dc-11e8-bf3e-be54be0b5d22", "createdAt": 1529425349731}], "statusCode": 200}

6. Formularul de contact

Cu funcțiile Serverless care funcționează corect, putem continua și o putem integra în formularul nostru de contact static. Codul formularului static este în public pliant.

Deschide index.html în IDE-ul dvs. preferat și actualizați fișierul URL variabilă cu /sendMail punctul final și ești bine să mergi.

//Insert your lambda function URL here
var URL = "https://xxx.execute-api.xx.amazonaws.com/development/sendMail";

Navigați la pagină folosind file:///<path>/<to>/<folder>/index.html în browser sau încărcați-l în cupa S3 și activați găzduirea statică.

$ aws s3 sync public s3://your-bucket-name
1611498916 230 Construirea unui formular de contact fara server pentru site uri statice
Formular de contact fără server

Răsfățați-vă cu un Cappuccino, Latte sau . Tocmai ați implementat un mod interesant de a vă menține site-ul web pe găzduire statică prin gestionarea formularelor dvs., datorită Serverless.


După gânduri

Serverless este cu siguranță calea de urmat, nu doar pentru formularele de contact statice ale lumii. Serverless v-a deschis un univers de oportunități, formularul de contact era doar pentru a începe. Ce zici de utilizarea Serverless pentru analiza site-ului dvs. web, un contor de vizitatori sau poate urmărirea clicurilor?

Oportunități nesfârșite vă așteaptă. Începeți pentru următorul dvs. proiect în Serverless, va fi o călătorie minunată.


Publicat inițial la www.serverlessops.io.