Создание сервисной контактной формы для статических сайтов

Автор оригинала: Faizan Bashir.

Вступление

Несколько лет назад AWS запустил Static Hosting Service S3, которая была смещением парадигмы для хостинга статических сайтов. Технология была понятна кристально, все статические активы (HTML, CSS и JS) будут находиться в ведре S3 для проведения вашего впечатляющего веб-сайта. Довольно прохладная идея, которую я лично понравился, правда. Если бы не было для этого супер важной контактной формы, хостинга на S3, была бы прохлада, но ваша контактная форма будет шуткой, если у вас не было другого сервера для обслуживания запросов AJAX из этой формы. В тот момент, когда у вас был этот сервис готов, решение S3 вообще не появится так привлекательно.

В эпоху передовых технологий всегда есть инновации по удалению челюсти за углом. Одно из потрясающих технологических инноваций происходит без промежуточностей. Не то, чтобы не было вовлеченных серверов, но вы можете не заботиться о них сейчас. Безвесочный может быть правильным и жизнеспособным решением для многих проблем, это самое совершенное решение для вашей статической размещенной контактной формы. Продолжайте чтение к концу этого поста, вы сможете обрабатывать свои формы сайта в самых недорогих и простейших возможных способов.

Бесплатные рамки

Швейцарский армейский нож безмерных технологий. Serverless Framework – это бесплатная веб-структура с открытым исходным кодом, написанным в Node.js. Смертный был первой основой, которая будет разработана для создания приложений исключительно на AWS Lambda, компьютерной вычислительной платформе, предоставленной Amazon Web Services. В настоящее время приложения, разработанные с помощью Serverless Framework, могут быть развернуты для других поставщиков услуг FAAS. Вот список облачных сервисов без сервеса, поддерживаемых безвесовой структурой:

• AWS LAMBDA
• Функции Google Cloud
• Функции Azure
• IBM Openwhisk
• AUTH0 WEBTASK
• Oracle FN Project
• Точка зрения
• Поперечный

Начало работы с Serverless Framework

Очевидно, что вы довольно рады начать работу с Serverless Framework, давайте вырезать на погоню и начните с установки сервера.

Настройка Serverless проста. Вам нужно установить его через NPM и связать его на свою учетную запись AWS.

1. Установка серверусных во всем мире

Время, чтобы получить практические вещи без сердца.

$ npm install serverless -g

Эта команда устанавливает серверу во всем мире на локальной машине. Команды через серверы теперь доступны вам от вашего терминала.

Примечание: Запуск Linux, вы можете захотеть запустить команду выше как sudo.

2. Создайте пользователь IAM в консоли AWS

Перейти к себе AWS Console Вы найдете IAM SERVICE Перечисленные ниже группы «Безопасность, идентичность и соответствие». Внутри приборной панели IAM Нажмите на вкладку «Пользователи» и нажмите кнопку «Добавить пользователя».

Создайте нового пользователя и разрешите пользователю Программный доступ Нажав на программный флажок доступа. Далее в разделе «Разрешения» необходимо добавить набор разрешений для пользователя. Из списка доступных вариантов под «Прикрепите существующие политики напрямую» проверьте АдминистраторКакСекс Отказ

После создания пользователя у вас будет доступ к пользователям Доступ к ключу ID и Секретный ключ доступа Отказ Вам потребуется использовать эти ключи на следующем шаге.

Слово осторожности: Это такие полномочия, которые вы не хотите терять даже по ошибке, помните, что вы предоставили АдминистраторКакСекс этому пользователю. Пользователь с АдминистраторКакСекс может сделать в значительной степени все с вашей учетной записью AWS.

3. Настройка серверу, чтобы использовать учетные данные IAM

Большой! С помощью клавиш вы можете настроить беспроводную структуру для доступа к учетной записи AWS. Переключитесь на свой терминал и используйте эту команду для настройки серверу:

$ sls config credentials --provider aws --key xxxxxxxxxxxxxx --secret xxxxxxxxxxxxxx --profile 

Теперь ваша неверная установка знает, какая учетная запись AWS для подключения.

Примечание: SLS псевдоним для Смертный команда. Вы можете использовать как к тому же эффекту. Но SLS это довольно круто.

4. Создание услуги

С помощью Serverless Framework подключена к вашей учетной записи AWS, вы можете настроить проект без промедления через Jiffy. Выпустите терминал и выпустите следующую команду:

$ sls create --template aws-python --path 

--template Флаг используется для указания предустановленного шаблона с заданными настройками. В приведенной выше команде шаблон AWS-Python Установит проект, настроенный для использования AWS в качестве провайдера и Python в качестве времени выполнения. Команда будет автоматически генерировать Serverless.yml , Handler.py и .gitignore Файл с предустановленными значениями.

Конфигурация определена в Serverless.yml файл. Этот файл является наиболее важным файлом в рамках без сервеса. Это почти волшебно, учитывая, как он может раскрутить инфраструктуру, которую вы определили в нем. Содержимое автогенерируемого Serverless.yml Файл будет выглядеть что-то вроде этого:

service: 
  
provider:  
  name: aws  
  runtime: python2.7
    
functions:  
  hello:    
    handler: handler.hello

провайдер Раздел определяет все, что связано с поставщиком услуг, есть гораздо больше свойств, чтобы настроить его дальше, вы можете взглянуть на них здесь Отказ В автогенерируемых Serverless.yml Файл, нужно добавить два важных тега под провайдер Раздел, который выглядит следующим образом:

region: 
profile: 

Функции Собственность используется для объявления функций без сервеса, вы можете объявить несколько функций в этом свойстве. Приведенный выше пример объявляет функцию под названием Привет присутствует в Handler.py файл. Просматривать Handler.py Файл, и вы найдете что-то вроде этого:

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

Приложение без сердца

Наше решение без сервеса использует инфраструктуру AWS, состоит из API Gateway, функций лямбда, Dynamodb и простого обслуживания электронной почты (SES). Для достижения этого конечного результата мы будем использовать ранее представленные безмерные рамки.

• Статический сайт – Amazon S3 предоставляет надежный и простой веб-сервер. Все статические файлы HTML, CSS и JS для вашего приложения могут быть поданы с S3. Контактная форма на нашем статическом веб-сайте представлена с помощью AJAX.
• API Gateway – Gateway API – это источник события для приложения, он действует как мост между нашей контактной формой и функцией Lambda Serverless. Он направляет запрос от контактной формы в функцию лямбда. Gateway API также выполняет такие задачи, как контроль доступа, мониторинг, управление версией API и управление трафиком.
• AWS LAMBDA – AWS Lambda – это место, где происходит действие. Функции лямбда бегут в нерестовые контейнеры, которые представляют собой, управляемые событиями, управляемыми и эфемеральными. В нашем примере мы используем функцию лямбда для отправки электронного письма с использованием SES и хранить содержимое запроса в базе данных Dynamodb NoSQL.
• Простая электронная почта (SES) – Облачная отправка электронного письма от Amazon. Масштабируемая электронная почта, вы можете отправлять маркетинговые и транзакционные электронные письма с использованием SES. В нашем примере мы используем SES для отправки электронных писем, используя подтвержденный адрес электронной почты.
• Динамодб – Dynamodb предоставляет масштабируемую, последовательную, полностью управляемую и не реляционную базу данных от Amazon. В нашем примере мы используем dynamodb для хранения и извлечения сообщений, полученных из статической контактной формы.

Вы можете найти исходный код для демонстрационного приложения здесь. Идите вперед и клонировать это!

Файзанбашир/Python-Ses-Dynamodb-ContactForm Python-SES-Dynamodb-contactForm – Framework SES SES и FOCKING FORMOCKB FORM github.com.

Приложение прохождение

Давайте прогуливаемся через демонстрацию, прежде чем мы фактически развернули его на AWS.

1. Демистификация файла Serverless.yml

Serverless.yml Файл определяет службы, которое приложение необходимо использовать и взаимодействовать с. Ресурсы и действия, которые могут выполняться безвесочные функции, перечислены под iamrolestatements имущество. Он перечисляет действия и ресурсы.

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}"

В Serverless.yml Мы позволяем функциям безвесочных использовать SES: Sendemail и Dynamodb: PutiteM Действия многих других, определенных выше.

Поскольку лямбда запускает безвесочных функций в облаке, нам нужно где-то определить функции. Функции определены с использованием Функции имущество. В нашем примере приложение мы определили их события к ним.

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": "'*'"

Еще одна отличная функция Serverless Framework заключается в том, что она создаст API в Gateway AWS API и связывает его с соответствующей функцией лямбда. Это делается с использованием http Свойство определено в События имущество.

2. Создание ресурсов

С помощью Serverless Framework вы создаете ресурсы, такие как таблица DynamOdb, как мы уже сделали здесь. Этот фрагмент кода отвечает за создание таблицы Dynamodb с данной конфигурацией.

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. Заглянуть в функции без сервеса

Демо-приложение написано в Python он использует Boto3 AWS SDK для отправки электронных писем с использованием SES и для выполнения операций чтения/записи на Dynamodb.

sendmail Функция срабатывает, когда Пост Запрос получен от контактной формы на /sendmail дорожка. Список Функция вызвана Получить Запрос на /Список путь определен в Serverless.yml файл.

Создание заявки

Теперь, когда вы настроили и настроили Servelless Framework на вашем компьютере, пришло время добиться прокатки.

1. клонировать приложение

Давайте начнем с помощью клонирования приложения из GitHub.

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

2. Проверьте адрес электронной почты с помощью SES

Передовите, чтобы проверить электронное письмо, которое вы намерены отправить электронную почту от SES. Все, что вам нужно сделать, это добавить адрес электронной почты, AWS отправит вам подтверждение со ссылкой на проверку адреса электронной почты.

После проверки адреса электронной почты «Состояние проверки» для электронной почты появится как «Vervificed».

3. Настройка приложения

Вам нужно настроить Serverless.yml С вашей учетной записью конкретные детали, чтобы она работала. Заменить регион , Профиль и Sender_email Недвижимость в Serverless.yml Как видно здесь:

provider:  
  name: aws  
  runtime: python2.7  
  region:   
  profile:   
  ...
environment:  
  SENDER_EMAIL: 

Потрясающие! С помощью конфигурации вы можете обратить ваше внимание на развертывание приложения.

4. Развертывание AWS

Все на месте Теперь вы можете развернуть приложение с одной командой, не так супер крутой.

$ sls deploy -v

Это займет минуту или два, чтобы выполнить, если вы религиозно следовали этому руководству, в конце концов он предоставит вам список конечных точек для использования наших функций. Это будет выглядеть что-то подобное:

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

5. Тестирование конечных точек

Теперь, когда у нас есть конечные точки, давайте тестируем приложение, чтобы увидеть, работает ли он или нет. /sendmail Конечная точка ожидает ввода в формате 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

Если электронное письмо отправляется и запись, написанная на Dynamodb, запрос выйдет с таким ответом.

> "Email Sent!"

Теперь давайте проверим /Список конечная точка таким же образом с Получить Конечная точка вы получили после развертывания приложения.

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

/Список Ответ конечной точки будет выглядеть что-то подобное:

> {"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. Контактная форма

С помощью функций без промежуток времени работают правильно, мы можем продолжать и интегрировать его в нашу статическую контактную форму. Статический код формы находится в публичный папка.

Открыть index.html Файл в вашей любимой IDE и обновите URL Переменная с /sendmail Конечная точка, и вы хороши, чтобы пойти.

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

Перейдите к странице, используя Файл:///<путь>//<папка>/index.html В браузере или загрузите его на ведро S3 и включите статический хостинг.

$ aws s3 sync public s3://your-bucket-name

Побалуйте себя капучино, латте или . Вы только что реализовали прохладный способ сохранить ваш сайт на статическом хостинге с обработкой ваших форм благодаря серверу.

Последующие

Serverless, безусловно, путь вперед, а не только для статических контактов мира. Serverless открыл вселенную возможности для вас, контактная форма была только для начала. Как насчет использования Wersless для аналитики вашего сайта, счетчик посетителей или, возможно, нажмите «Отслеживание»?

Бесконечные возможности ждут вас. Начните для вашего следующего проекта в Serverless, это будет удивительное путешествие.

Первоначально опубликовано в www.serverlessops.io Отказ