Налаштування деплою сайту на Netlify

Налаштування розгортання сайту на Netlify

Netlify — платформа для JAMstack-додатків: статичні сайти, SPA, Gatsby, Next.js (через Netlify Next.js Runtime). Автоматичні деплої з Git, вбудовані форми, функції, A/B тестування.

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "20"
  NPM_FLAGS = "--prefix=/dev/null"

# SPA: редирект всіх маршрутів на index.html
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Прокси API
[[redirects]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200
  force = true

# Користувацькі заголовки
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Split testing (A/B)
[context.deploy-preview]
  command = "npm run build:preview"

[context.branch-deploy]
  command = "npm run build:staging"

Netlify Functions

// netlify/functions/contact.ts
import type { Handler, HandlerEvent } from '@netlify/functions';

export const handler: Handler = async (event: HandlerEvent) => {
    if (event.httpMethod !== 'POST') {
        return { statusCode: 405, body: 'Method Not Allowed' };
    }

    const { name, email, message } = JSON.parse(event.body || '{}');

    // Отправити через Nodemailer або Resend
    await sendEmail({ name, email, message });

    return {
        statusCode: 200,
        body: JSON.stringify({ success: true }),
        headers: { 'Content-Type': 'application/json' },
    };
};

Вбудовані форми Netlify

<!-- Netlify обробляє форму без Serverless Function -->
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact">
    <p class="hidden">
        <label>Не заповнюйте: <input name="bot-field"></label>
    </p>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Відправити</button>
</form>

Submissions доступні в Netlify Dashboard → Forms. Сповіщення настроюються там же (email, Slack webhook).

GitHub Actions + Netlify CLI

name: Deploy to Netlify

on:
  push:
    branches: [main, develop]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

      - name: Deploy to Netlify
        run: |
          npx netlify-cli deploy \
            --dir=dist \
            --site=${{ secrets.NETLIFY_SITE_ID }} \
            --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} \
            ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

Deploy Contexts

Netlify підтримує різні команди складання для різних контекстів:

# Production: main branch
[context.production.environment]
  API_URL = "https://api.example.com"
  ANALYTICS_ID = "G-PROD123"

# Staging: develop branch
[context.branch-deploy.environment]
  API_URL = "https://api-staging.example.com"
  ANALYTICS_ID = "G-STAGING456"

# Preview: всі PR
[context.deploy-preview.environment]
  API_URL = "https://api-dev.example.com"

Обмеження Netlify

• Functions: timeout 10 секунд (Pro: 26 секунд)
• Безплатний план: 300 build minutes/місяць, 100GB bandwidth
• Не підходить для PHP/Laravel бекенда

Терміни реалізації

Підключення React/Vue/Gatsby-проекту: 4–8 годин.