Хостинг функции безсерверного API Gatsby в Docker с использованием Nginx

Вопрос или проблема

http://localhost/api/function

FROM node:22.9.0 AS base
ONBUILD RUN npm install -g gatsby-cli
ONBUILD WORKDIR /app
ONBUILD ADD . ./
ONBUILD RUN npm install --legacy-peer-deps

FROM base AS build
WORKDIR /app
RUN npm run build

FROM nginx:alpine AS final
COPY --from=build /app/public /pub
RUN apk --update add nginx bash && \
    rm -fR /var/cache/apk/*

COPY src/api/ ./api

EXPOSE 80

CMD ["nginx -g 'daemon off;'"]

[...]

 # Проксировать API-запросы к бэкенду Node.js
location /api/ {
        proxy_pass http://localhost:4000/api;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}
[...]

Ответ или решение

Для того чтобы интегрировать вашу сервернуюless функцию в контейнер Docker, содержащий сайт на Gatsby, и настроить Nginx для их совместной работы, нам нужно внести несколько изменений в ваш Dockerfile и конфигурацию Nginx.

Шаги для настройки

1. Обновите Dockerfile: Наша цель заранее скопировать и подготовить вашу API-функцию в контейнере и убедиться, что серверная часть приложения работает. Мы будем использовать Node.js, чтобы запускать нашу функцию.

# Используем базовый образ Node.js для сборки
FROM node:22.9.0 AS base
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install --legacy-peer-deps

# Сборка приложения
COPY . ./
RUN npm run build

# Подготавливаем образ Nginx
FROM nginx:alpine AS final
COPY --from=base /app/public /usr/share/nginx/html

# Устанавливаем Nginx и Node.js для работы с API
RUN apk add --no-cache nodejs npm

# Копируем API-функцию
COPY src/api/ /app/api/

# Устанавливаем зависимости для API
WORKDIR /app/api
RUN npm install --legacy-peer-deps

EXPOSE 80

# Копируем Nginx конфигурацию
COPY nginx.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

2. Создайте или обновите конфигурацию Nginx: Ваша конфигурация Nginx должна быть изменена для работы с API-функциями.

Пример настройки nginx.conf:

server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:3000/api/; # Порт, на котором будет служить API
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

3. Настройка запуска API в контейнере: Чтобы запустить API, мы можем использовать Node.js, создавая отдельный Docker контейнер для вашей API-функции, или можно просто запустить его в фоне при запуске основной установки. Для этого можно создать сценарий, который запускает и Nginx, и API.

Скрипт для запуска

Создайте файл start.sh:

#!/bin/sh

# Запуск API-сервера
node /app/api/index.js &

# Запуск Nginx
nginx -g 'daemon off;'

Финальные шаги

1. Убедитесь, что у вас есть точка входа для API, как указано в /app/api/index.js.
2. Обновите ваш Dockerfile, чтобы скопировать и сделать start.sh исполняемым:

COPY start.sh /start.sh
RUN chmod +x /start.sh
CMD ["/start.sh"]

Запуск контейнера

Теперь вы готовы собрать и запустить ваш контейнер:

docker build -t my-gatsby-app .
docker run -p 80:80 my-gatsby-app

После этого вы должны иметь возможность получить доступ к вашему сайту на Gatsby и к API-функции по пути http://localhost/api/function.

Заключение

Таким образом, мы настроили контейнер Docker с использованием Nginx для размещения сайта на Gatsby и сервернойless API-функции. Вы можете протестировать и адаптировать конфигурации под ваши нужды. Если у вас возникли дополнительные вопросы, не стесняйтесь задавать!