Рубрики
Без рубрики

Учебник: Создать страницу посадки без сервера

В этом уроке мы собираемся пройтись построению посадочной страницы с помощью бессмертных NetLify и лямбда.

Автор оригинала: Joel Serino.

Бесплатные компоненты являются новым способом составления совместных меньших битов функциональности в более крупные приложения.

Примечание: Если вы еще не знакомы с серверусными компонентами, Вот быстрое объяснение Отказ

Написано Дэвидом Уэллсом. 30 апреля 2018 года

В этом уроке мы собираемся пройтись построению посадочной страницы с помощью бессмертных NetLify и лямбда.

Три компонента, которые мы используем:

  1. Компонент сайта NetLify
  2. AWS Lambda Component разговаривает с API MailChimp
  3. Компонент API отдыха, который использует шлюз API под капотом

Давайте погрузимся в него и покрыть:

  • Сочинение компонентов
    • Добавление сайта NetLify
    • Добавление функции лямбда для регистрации
    • Добавление остальных API для выставления функции лямбда
    • Разоблачить конечную точку API на сайт NetLify
  • Развертывать
  • Резюме

Начиная

  1. Сначала вам нужно будет установить компоненты без сервера через NPM Пакет :

    2.  
  2. Установите свои учетные данные AWS в ваших вариантах ENV:
     
 
Примечание: Убедитесь, что у вас есть Node.js 8+ и NPM Установлен на вашу машину.
 
Сочинение компонентов
 
Это приложение состоит из 3 частей: AWS-Lambda , REST-API , NetLify-сайт Отказ
 
Давайте поставим их вместе.
 
1. Добавление сайта NetLify
 
Мы используем NetLify, чтобы опубликовать нашу посадочную страницу, построенную с Create-React-App Отказ
 
Я выбрал NetLify на S3 для статического хостинга, потому что это:
 
  • Создание событий Repo GitHub (поток CI/CD)
    •  
  • Имеет автоматическую ветви превью на PRS
    •  
  • Ручки перенаправляются из коробки через _redirets Файл 👌.
    •  
  • Ручки проксированные URL-адреса – это дает нам удачные люки для динамических страниц/контента
    •  
  • Безумно дешево
    •  
  • Имеет удивительную поддержку для загрузки
 
Хорошо, давайте настроим компонент.
 
В Serverless.yml Нам нужно определить компоненты, которые мы используем под Компоненты ключ.
 
Входы NetLify-сайт Компонент нужен можно увидеть здесь Отказ
 
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: https://github.com/serverless/netlify-landing-page
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

 
Давайте сломаем это.
 
NetLifyapitoken Сворается из вашей учетной записи NetLify в https://app.netlify.com/account/applications, под “личными токенами доступа”. Заменить ABC с вашим действительным токеном NetLify.
 
изображение
 
Githubapitoken Настройка в Github в https://github.com/settings/tokens, под “личным доступом токена”. Токен должен иметь admin: repo_hook и репо доступ. Заменить 123 с вашим действительным токеном GitHub.
 
изображение
 
Стетень Домен NetLify, который вы будете использовать для своего сайта. Каждый сайт в NetLify живет в уникальном поддомене NetLify, пока вы не замаскируете его с вашим пользовательским доменом. Изменить my-awesome-site-lol-lol.netlife.com к уникальному адресу для вашего проекта.
 
sitedomain это фактическое доменное имя вашего сайта. Вам нужно будет настроить CNAME, чтобы указать на NetLify. Если вы хотите прикрепить свой собственный домен на этот пример, следуйте за помощью Пользовательские инструкции домена Отказ
 
Siterepo Где ваш код сайта живет, а Это важно Отказ Вы можете использовать любой тип сайта/приложения, который вы хотите в вашем репо, до тех пор, пока вы даете NetLify команду сборки и где выводится встроенный сайт. Мы собираемся использовать Create-React-App создать целевую страницу.
 
Наша страница посадки + REPO можно увидеть здесь Отказ
 
SiteBuildCommand Команда сборки для Create-React-App Отказ Он будет скомпилировать наше приложение raction и выходные файлы в построить каталог для нас. Эта команда изменится на основе процесса сборки вашего сайта/приложений.
 
SiteBuildDirectory Для нас это /построить каталог. Это поведение по умолчанию Create-React-App Отказ
 
SiterePobranch Будет ветвь, которая вызывает восстановление нашего сайта. Ака, когда изменение сливается в Мастер Филиал, NetLify будет автоматически восстановить и обновлять наш живой сайт.
 
Вы можете развернуть это, как сейчас, с:
 
$ components deploy

 
Если вы заходите в NetLify и нажимаете на недавно созданный сайт, вы должны увидеть URL-адрес страницы Live Single:
 
изображение
 
2. Добавление функции лямбда для регистрации
 
Теперь нам нужно добавить функцию лямбда для обработки наших представлений формы.
 
В Serverless.yml Добавьте AWS-Lambda Компонент к Компоненты блокировать:
 
components:
  landingPageFunction:
    type: aws-lambda
    inputs:
      memory: 512
      timeout: 10
      handler: code/handler.landingPageFunction

 
Затем создайте код для функции лямбда в Код Каталог:
 
mkdir code
touch handler.js

 
Внутри Handler.js Добавьте свой лямбда код. Код/Handler.landingPageFunction Ссылки . Hander.js Файл с экспортированным LandingPageFunction Функция:
 
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')
  })
}

 
Теперь нам нужно разоблачить env Переменные для функции для потребления.
 
Вы можете захватить ваши ключи API MailChimp под «Учетной записью> Дополнительно»:
 
изображение
 
изображение
 
Ваш идентификатор списка MailChimp можно найти в вашем списке настроек:
 
изображение
 
Регион в URL вашего браузера. В нашем случае это US11 Отказ
 
Давайте добавим их в функцию:
 
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

 
Ваш полный Serverless.yml На этом этапе должны выглядеть как:
 
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: https://github.com/serverless/netlify-landing-page
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

 
3. Добавление API для отдыха для выставления функции Lambda
 
До сих пор у нас есть посадка и функция. Они никак не связаны.
 
Нам нужно разоблачить текущую конечную точку для посадочной страницы для пинга на представлениях формы.
 
Давайте сделаем это с REST-API составная часть.
 
Добавьте компонент API отдыха на Компоненты блок Serverless.yml :
 
components:
  apiEndpoint:
    type: rest-api
    inputs:
      gateway: aws-apigateway
      routes:
        /sign-up:
          post:
            function: ${landingPageFunction}
            cors: true

 
Давайте сломаемся.
 
Входы для REST-API Компонент берет Шлюз и маршруты Отказ
 
Шлюз Это шлюз API, который вы хотите использовать. В этом случае мы используем AWS-APPIGAY составная часть.
 
маршруты являются дорожками URL и функции, которые срабатывают, когда они попадают. Для более широкого примера API для отдыха см., См. /Примеры/Retail-App здесь Отказ
 
$ {landingpagefunction} Быть ссыловаться в /регистрация Маршрут относится к функции, которую мы ранее определили. Таким образом, мы передаем прямую ссылку на функцию в компонент REST-API. Ака, Композитария Отказ
 
На данный момент ваш полный Serverless.yml должен выглядеть так:
 
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 # not in use
      siteRepo: https://github.com/serverless/netlify-landing-page
      siteBuildCommand: npm run build
      siteBuildDirectory: build
      siteRepoBranch: master
      siteRepoAllowedBranches:
          - master

 
4. Выкрывайте конечную точку API на сайт NetLify
 
Отличные новости! У нас есть все куски, которые нам нужны для функциональности, которые мы после.
 
Есть один последний шаг, который нам нужно справиться. Нам нужно дать Live URL для Frontend, чтобы узнать, где на самом деле отправить данные формы.
 
Мы собираемся предоставить конечную точку Live на Frontend во время сборки сайта в качестве переменной среды.
 
Поскольку компоненты имеют выходы, мы можем пропускать значения из одного компонента к другому.
 
Поэтому нам нужно использовать Siteenvvars вход для NetLify-сайт Компонент и пропустите его URL вывод из REST-API составная часть.
 
Мы так понравятся так:
 
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

 
$ {papiendpoint.url} относится к ApiendPoint Компонент REST-API и выводимое значение URL Отказ
 
Итак, $ {papiendpoint.url} регистрация будет решать что-то вроде https://3m0ylzhbxk.execute-api.us-east-1.amazonaws.com/dev/sign-up Отказ
 
Мы передаем эту ценность в переменные среды создания сайта NetLify Site с Create-React-App Конвенции Rage_app _ $ {Ваш ключ} Отказ
 
Таким образом, мы можем использовать process.env.reaCt_app_signup_api В нашем коде APC APP:
 
const formAPI = process.env.REACT_APP_SIGNUP_API

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

 
Вы можете увидеть это в действии в нашем Посадка страницы репо Отказ
 
Ваш полный Serverless.yml должен выглядеть как:
 
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 # not in use
      siteRepo: https://github.com/serverless/netlify-landing-page
      siteBuildCommand: npm run build
      siteBuildDirectory: build
s:
        REACT_APP_SIGNUP_API: ${apiEndpoint.url}sign-up

 
Развертывать!
 
Мы создали нашу посадочную страницу. Пришло время для последнего развертывания.
 
В вашем терминале запущен:
 
../../bin/components deploy

 
Резюме
 
Как видите, с несколькими компонентами вы можете получить посадочную страницу и запустить в кратчайшие сроки.
 
Что вы будете строить с компонентами?
 
Больше на компонентах
 



Читайте ещё по теме: