Полный стек с функциями Netlify, React и Go

Недавно я переносил веб-сайт с Digital Ocean на Netlify. Я хотел использовать Netlify, так как я мог использовать полный стек бесплатно!

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

Я также не смог найти ни одного примера проекта, использующего Go в качестве бэкэнда, поэтому этот пост для этого.

Если вы хотите перейти к коду, будьте моим гостем и проверьте его здесь.

Это довольно мило, когда все работает. С помощью всего одной команды — netlify dev — вы можете запустить интерфейс и серверную часть. Кроме того, у вас есть преимущества монорепозитория; весь ваш код в одном месте.

Если немного подробнее, вот как все это связано:

Интерфейс вашего приложения React

Эта сторона вещей довольно проста. Я использую только стандартный шаблон create-react-app.

В моем файле src/App.js я могу вызвать бэкэнд следующим образом:

  async function callLambdaFunc() {
    const apiResponse = await fetch("/api/v1");
    const responseText = await apiResponse.text();
    setResponse(responseText);
  }

На самом деле это зависит от нескольких вещей, которые я настроил в своем netlify.toml, который находится в корне проекта:

[build]
  command = "npm run build"
  publish = "build"
  functions = "functions"

[[redirects]]
  from = "/api/v1/*"
  to = "/.netlify/functions/v1"
  status = 200

Раздел [[redirects]] направляет все, что идет в /api/v1/*, к одной функции, которая у меня есть в каталоге functions. Я использовал код состояния 200, так как не хочу, чтобы внешний интерфейс думал, что он должен вызывать netlify/functions, что подразумевало бы код 30x. О нет, я хочу, чтобы мы притворились, что у нас есть полнофункциональный бэкэнд в api/v1/*, а не какая-то странная бессерверная функция 👿

Затем раздел [build] предназначен для создания и развертывания приложения React, а также для указания Netlify искать в каталоге functions вашу — как вы уже догадались — функцию.

Бэкенд

Этот момент может немного сбить с толку, если вы раньше не работали с функциями AWS Lambda.

По сути, Netlify развертывает лямбда-функцию AWS под капотом, когда вы используете их функции. Что довольно круто для небольшого проекта, над которым я работал, поскольку это намного меньше работы, чем запуск и запуск лямбда-функции. Кроме того, у AWS нет бесплатного уровня, как у Netlify 😢

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

functions/
  v1/  # v1 will be the name of the function
  -main.go
  -go.mod
  -go.sum

Это макет проекта в каталоге functions. Поскольку код main.go, в котором находится функция Lambda, находится в каталоге с именем v1, чтобы вызвать функцию из внешнего интерфейса, вы должны сделать запрос к /api/v1.

То, что находится в файле main.go, очень просто — оно выглядит так:

package main

import (
  "fmt"
  "github.com/aws/aws-lambda-go/events"
  "github.com/aws/aws-lambda-go/lambda"
)

// Because it's an AWS Lambad function, it has to have this function
// called handler. This is what all your frontend requests will hit.
func handler(request events.APIGatewayProxyRequest) (*events.APIGatewayProxyResponse, error) {

  urlPath := request.Path
  return &events.APIGatewayProxyResponse{
    StatusCode:        200,
    Body:              fmt.Sprintf("URL path should be %s", urlPath),
  }, nil
}

func main() {
  lambda.Start(handler)
}

Как только я немного поработаю над этим проектом, я, вероятно, напишу оператор switch внутри функции handler, который отправляет обратно разные ответы на основе значения urlPath.

То, как я настроил это на данный момент, если я запрошу api/v1/health и api/v1/search из внешнего интерфейса, то они оба вызовут эту функцию. Я хотел этого, поскольку это означает, что будет только одна функция Netlify.

Это кажется мне проще и, надеюсь, позволит мне оставаться на уровне бесплатного пользования, поскольку это должно быть дешевле, чем несколько функций Netlify, которые на самом деле являются функциями AWS Lambda… Верно 😅?

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.