Utilizziamo i cookie per migliorare la tua esperienza sul sito

Accesso/Registrazione->

Wdrażanie na Vercel, Netlify i innych platformach

Po stworzeniu aplikacji Next.js, kluczowym etapem jest jej wdrożenie do środowiska produkcyjnego. W tym module przyjrzymy się różnym platformom hostingowym, które oferują zoptymalizowane środowisko dla aplikacji Next.js, ze szczególnym uwzględnieniem Vercel - platformy stworzonej przez twórców Next.js.

Wdrażanie na Vercel

Vercel to platforma, która oferuje najlepszą natywną obsługę dla aplikacji Next.js, ponieważ obie technologie są rozwijane przez tę samą firmę. Zapewnia to optymalne wsparcie dla wszystkich funkcji Next.js, zautomatyzowane wdrożenia i globalne CDN.

Przygotowanie projektu

Przed wdrożeniem upewnij się, że twój projekt jest gotowy do produkcji:

Sprawdzenie zmiennych środowiskowych - upewnij się, że wszystkie zmienne środowiskowe są poprawnie skonfigurowane
Optymalizacja wstępna - uruchom
```
next build
```
lokalnie, aby sprawdzić ewentualne błędy
Kontrola wersji - upewnij się, że projekt jest w repozytorium Git (GitHub, GitLab lub Bitbucket)

Krok po kroku: Wdrażanie na Vercel

Utwórz konto na Vercel
- Przejdź do vercel.com i zarejestruj się, najlepiej używając konta GitHub/GitLab/Bitbucket
Zaimportuj projekt
- Po zalogowaniu kliknij "Add New..." > "Project"
- Wybierz swoje repozytorium z listy
Konfiguracja wdrożenia
- Vercel automatycznie wykrywa, że projekt jest aplikacją Next.js
- Możesz dostosować nazwę projektu, gałąź do wdrażania i zmienne środowiskowe
- Dla standardowych projektów Next.js, domyślne ustawienia są zwykle wystarczające
Wdrożenie
- Kliknij "Deploy"
- Vercel zbuduje i wdroży twoją aplikację, optymalizując ją dla produkcji
Weryfikacja wdrożenia
- Po udanym wdrożeniu, otrzymasz unikalny URL
- Sprawdź swoją aplikację i upewnij się, że wszystko działa poprawnie

Konfiguracja domeny własnej

Aby skonfigurować własną domenę dla projektu na Vercel:

Przejdź do panelu projektu
Wybierz zakładkę "Domains"
Kliknij "Add" i wpisz nazwę swojej domeny
Postępuj zgodnie z instrukcjami, aby skonfigurować rekordy DNS:
- Dla domen głównych (np. example.com): Utwórz rekord A wskazujący na IP Vercel
- Dla subdomen (np. www.example.com): Utwórz rekord CNAME wskazujący na domenę Vercel

Automatyczne wdrożenia i previews

Jednym z największych atutów Vercel jest system automatycznych wdrożeń:

Automatyczne wdrożenia produkcyjne
- Każde push do głównej gałęzi (np.
```
main
```
  ) powoduje automatyczne wdrożenie
Wdrożenia podglądowe (Preview Deployments)
- Każdy pull request tworzy automatycznie unikatowe środowisko podglądowe
- Pozwala to na testowanie zmian przed połączeniem z główną gałęzią

1// Przykład konfiguracji Next.js zoptymalizowanej dla Vercel
2// next.config.js
3
4module.exports = {
5  // Optymalizacja obrazów - automatycznie obsługiwana przez Vercel Image Optimization
6  images: {
7    domains: ['example.com', 'images.unsplash.com'],
8  },
9  
10  // Zintegrowana analityka Vercel
11  vercelAnalytics: {
12    enabled: true,
13  },
14  
15  // Ustawienia międzynarodowe
16  i18n: {
17    locales: ['pl', 'en', 'de'],
18    defaultLocale: 'pl',
19  },
20};

Zaawansowane funkcje Vercel

Vercel oferuje szereg zaawansowanych funkcji, które warto wykorzystać:

Edge Functions - uruchamianie kodu blisko użytkownika na globalnej sieci brzegowej Vercel
Serverless Functions - automatyczna konwersja API Routes na funkcje serverless
Edge Middleware - uruchamianie middleware na brzegu sieci
Edge Config - przechowywanie konfiguracji na brzegu z ultraszybkim odczytem
Analytics - wbudowane narzędzia analityczne
Speed Insights - monitorowanie Core Web Vitals

Wdrażanie na Netlify

Netlify to inna popularna platforma, która oferuje doskonałe wsparcie dla aplikacji Next.js, szczególnie po wprowadzeniu funkcji Netlify Next.js Runtime.

Przygotowanie projektu dla Netlify

Utwórz plik konfiguracyjny netlify.toml w głównym katalogu projektu:

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[plugins]]
7  package = "@netlify/plugin-nextjs"

Zainstaluj plugin Next.js dla Netlify:

1npm install -D @netlify/plugin-nextjs
2# lub
3yarn add -D @netlify/plugin-nextjs

Krok po kroku: Wdrażanie na Netlify

Utwórz konto na Netlify
- Przejdź do netlify.com i zarejestruj się
Zaimportuj projekt
- Kliknij "Add new site" > "Import an existing project"
- Połącz się z dostawcą Git i wybierz swoje repozytorium
Konfiguracja wdrożenia
- Netlify powinien automatycznie wykryć ustawienia projektu Next.js
- Upewnij się, że komenda budowania to
```
npm run build
```
  lub
```
yarn build
```
- Katalog publikacji powinien być ustawiony na
```
.next
```
Skonfiguruj zmienne środowiskowe
- Przejdź do "Site settings" > "Build & deploy" > "Environment"
- Dodaj wszystkie potrzebne zmienne środowiskowe
Wdrożenie
- Kliknij "Deploy site"

Funkcje specyficzne dla Netlify

Netlify oferuje szereg unikalnych funkcji, które mogą być przydatne w projektach Next.js:

Netlify Functions - odpowiednik API Routes
Netlify Edge Functions - podobne do Next.js Middleware, ale działające na brzegu
Netlify Forms - wbudowana obsługa formularzy bez konieczności tworzenia endpointów API
Netlify Identity - usługa uwierzytelniania użytkowników

1// Przykład wykorzystania Netlify Functions z Next.js
2// /netlify/functions/hello-world.js
3
4exports.handler = async function(event, context) {
5  return {
6    statusCode: 200,
7    body: JSON.stringify({ message: "Hello World" }),
8    headers: {
9      'Content-Type': 'application/json'
10    }
11  };
12};
13
14// Dostęp z aplikacji Next.js
15// pages/api-example.js
16import { useState, useEffect } from 'react';
17
18export default function ApiExample() {
19  const [data, setData] = useState(null);
20  
21  useEffect(() => {
22    fetch('/.netlify/functions/hello-world')
23      .then(res => res.json())
24      .then(data => setData(data));
25  }, []);
26  
27  return (
28    <div>
29      <h1>API Example</h1>
30      <pre>{JSON.stringify(data, null, 2)}</pre>
31    </div>
32  );
33}

Wdrażanie na AWS Amplify

AWS Amplify to usługa od Amazon, która również oferuje dobre wsparcie dla aplikacji Next.js, szczególnie jeśli już korzystasz z ekosystemu AWS.

Przygotowanie projektu dla AWS Amplify

Utwórz plik amplify.yml w głównym katalogu projektu:

1# amplify.yml
2version: 1
3frontend:
4  phases:
5    preBuild:
6      commands:
7        - npm ci
8    build:
9      commands:
10        - npm run build
11  artifacts:
12    baseDirectory: .next
13    files:
14      - '**/*'
15  cache:
16    paths:
17      - node_modules/**/*

Krok po kroku: Wdrażanie na AWS Amplify

Utwórz konto AWS lub zaloguj się do istniejącego
Przejdź do konsoli AWS Amplify
- Wybierz "Host web app"
Połącz repozytorium
- Wybierz dostawcę repozytorium (GitHub, GitLab, BitBucket lub repozytorium AWS CodeCommit)
- Zaloguj się i wybierz swoje repozytorium
Konfiguracja ustawień kompilacji
- Amplify powinien automatycznie wykryć framework Next.js
- Możesz dostosować lub potwierdzić ustawienia kompilacji
Skonfiguruj zmienne środowiskowe
- Dodaj wszystkie potrzebne zmienne środowiskowe w sekcji "Environment variables"
Wdrożenie
- Kliknij "Save and deploy"

Integracja z usługami AWS

Jednym z głównych atutów AWS Amplify jest łatwa integracja z innymi usługami AWS:

1// Przykład: Integracja z AWS Lambda i DynamoDB
2// pages/api/users.js
3
4import { DynamoDB } from 'aws-sdk';
5
6const dynamoDB = new DynamoDB.DocumentClient();
7
8export default async function handler(req, res) {
9  if (req.method === 'GET') {
10    const params = {
11      TableName: process.env.DYNAMODB_TABLE_NAME,
12    };
13    
14    try {
15      const data = await dynamoDB.scan(params).promise();
16      res.status(200).json(data.Items);
17    } catch (error) {
18      res.status(500).json({ error: 'Failed to fetch users' });
19    }
20  }
21}

Wdrażanie na Digital Ocean App Platform

Digital Ocean App Platform to inna opcja hostingowa, która oferuje dobre wsparcie dla aplikacji Next.js.

Krok po kroku: Wdrażanie na Digital Ocean

Utwórz konto Digital Ocean lub zaloguj się do istniejącego
Przejdź do Digital Ocean App Platform
- Kliknij "Create App"
Wybierz źródło kodu
- Połącz swoje repozytorium GitHub, GitLab lub wybierz inne źródło
Konfiguracja aplikacji
- Wybierz gałąź do wdrożenia
- Wybierz typ aplikacji jako "Web Service"
- W ustawieniach kompilacji, wybierz "Next.js" jako przykładową aplikację
Dostosuj ustawienia
- Ustaw komendę kompilacji na
```
npm run build
```
  lub
```
yarn build
```
- Ustaw komendę uruchomienia na
```
npm start
```
  lub
```
yarn start
```
Finalizacja
- Wybierz plan cenowy
- Kliknij "Launch App"

Inne opcje hostingowe dla Next.js

GitHub Pages z GitHub Actions

Dla statycznie generowanych aplikacji Next.js, możesz użyć GitHub Pages z GitHub Actions:

Utwórz plik workflow GitHub Actions:

1# .github/workflows/deploy.yml
2name: Deploy to GitHub Pages
3
4on:
5  push:
6    branches: [ main ]
7
8jobs:
9  build:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v2
13      - uses: actions/setup-node@v2
14        with:
15          node-version: '18'
16      - name: Install dependencies
17        run: npm ci
18      - name: Build and export
19        run: npm run build && npm run export
20      - name: Deploy
21        uses: peaceiris/actions-gh-pages@v3
22        with:
23          github_token: ${{ secrets.GITHUB_TOKEN }}
24          publish_dir: ./out

Dostosuj next.config.js:

1// next.config.js
2module.exports = {
3  output: 'export',
4  basePath: '/nazwa-repozytorium', // Jeśli strona nie jest na domenie głównej
5  images: {
6    unoptimized: true, // Dla GitHub Pages
7  },
8};

Dodaj skrypt do package.json:

1{
2  "scripts": {
3    "export": "next export"
4  }
5}

Firebase Hosting

Firebase Hosting to kolejna opcja, szczególnie jeśli korzystasz z innych usług Firebase:

Zainstaluj Firebase CLI:

1npm install -g firebase-tools

Zainicjuj projekt Firebase:

1firebase login
2firebase init hosting

Skonfiguruj plik firebase.json:

1{
2  "hosting": {
3    "public": "out",
4    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
5    "rewrites": [
6      {
7        "source": "**",
8        "destination": "/index.html"
9      }
10    ]
11  }
12}

Zbuduj i wdroż aplikację:

1npm run build
2npm run export
3firebase deploy

Self-hosting na własnym serwerze

Jeśli wolisz hostować aplikację na własnym serwerze:

Serwer Node.js

Przygotuj skrypt start w package.json:

1{
2  "scripts": {
3    "start": "next start -p $PORT"
4  }
5}

Użyj PM2 do zarządzania procesem:

1npm install -g pm2
2pm2 start npm --name "next-app" -- start

Konfiguracja Nginx jako reverse proxy:

1server {
2  listen 80;
3  server_name twojastrona.pl www.twojastrona.pl;
4
5  location / {
6    proxy_pass http://localhost:3000;
7    proxy_http_version 1.1;
8    proxy_set_header Upgrade $http_upgrade;
9    proxy_set_header Connection 'upgrade';
10    proxy_set_header Host $host;
11    proxy_cache_bypass $http_upgrade;
12  }
13}

Konteneryzacja z Docker

Utwórz Dockerfile:

1# Dockerfile
2FROM node:18-alpine AS base
3
4# Etap instalacji zależności
5FROM base AS deps
6WORKDIR /app
7COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
8RUN   
9  if [ -f yarn.lock ]; then yarn --frozen-lockfile;   
10  elif [ -f package-lock.json ]; then npm ci;   
11  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i;   
12  else echo "Brak pliku lockfile" && exit 1;   
13  fi
14
15# Etap budowania
16FROM base AS builder
17WORKDIR /app
18COPY --from=deps /app/node_modules ./node_modules
19COPY . .
20RUN npm run build
21
22# Etap produkcyjny
23FROM base AS runner
24WORKDIR /app
25ENV NODE_ENV production
26
27RUN addgroup --system --gid 1001 nodejs
28RUN adduser --system --uid 1001 nextjs
29
30COPY --from=builder /app/public ./public
31COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
32COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
33
34USER nextjs
35EXPOSE 3000
36ENV PORT 3000
37
38CMD ["node", "server.js"]

Skonfiguruj next.config.js:

1// next.config.js
2module.exports = {
3  output: 'standalone',
4};

Zbuduj i uruchom kontener:

1docker build -t next-app .
2docker run -p 3000:3000 next-app

Najlepsze praktyki

Zmienne środowiskowe

Zarządzaj zmiennymi środowiskowymi zgodnie z best practices Next.js:

Rozróżniaj zmienne klienckie i serwerowe:
- Zmienne, które mają być dostępne w przeglądarce, powinny mieć przedrostek
```
NEXT_PUBLIC_
```
- Pozostałe zmienne są dostępne tylko w kodzie serwerowym
Pliki środowiskowe:
- ```
.env.local
```
  - zmienne dla lokalnego środowiska, nie są commitowane do repozytorium
- ```
.env.development
```
  - zmienne dla środowiska deweloperskiego
- ```
.env.production
```
  - zmienne dla środowiska produkcyjnego
- ```
.env.test
```
  - zmienne dla środowiska testowego

Optymalizacja wdrożeń

Cache i CDN:
- Skonfiguruj odpowiednie nagłówki cache dla statycznych zasobów
- Wykorzystaj CDN dla przyspieszenia dostarczania statycznych zasobów
Kompresja:
- Włącz kompresję Gzip lub Brotli na serwerze
Core Web Vitals:
- Monitoruj metryki Web Vitals po wdrożeniu
- Wykorzystaj narzędzia jak Lighthouse czy PageSpeed Insights

1// next.config.js - optymalizacja produkcyjna
2module.exports = {
3  // Kompresja
4  compress: true,
5  
6  // Optymalizacja obrazów
7  images: {
8    domains: ['images.example.com'],
9    formats: ['image/avif', 'image/webp'],
10  },
11  
12  // Generator statyczny - maksymalna wydajność dla stron ISR/SSG
13  staticPageGenerationTimeout: 120,
14  
15  // Optymalizacja produkcyjna
16  productionBrowserSourceMaps: false, // Wyłącz source maps na produkcji
17  
18  // Konfiguracja webpack
19  webpack: (config, { dev, isServer }) => {
20    // Optymalizacje webpack...
21    return config;
22  },
23};

Automatyzacja wdrożeń

Rozważ implementację ciągłego wdrażania (CD), aby zautomatyzować proces wdrażania:

1# GitHub Actions - deploy.yml
2name: Deploy
3
4on:
5  push:
6    branches: [ main ]
7
8jobs:
9  deploy:
10    runs-on: ubuntu-latest
11    steps:
12      - uses: actions/checkout@v2
13      
14      - name: Setup Node.js
15        uses: actions/setup-node@v2
16        with:
17          node-version: '18'
18          
19      - name: Install dependencies
20        run: npm ci
21      
22      - name: Run tests
23        run: npm test
24      
25      - name: Build project
26        run: npm run build
27      
28      - name: Deploy to production
29        uses: amondnet/vercel-action@v20
30        with:
31          vercel-token: ${{ secrets.VERCEL_TOKEN }}
32          vercel-org-id: ${{ secrets.ORG_ID }}
33          vercel-project-id: ${{ secrets.PROJECT_ID }}
34          vercel-args: '--prod'

Podsumowanie

Wdrażanie aplikacji Next.js może być realizowane na wiele sposobów, w zależności od potrzeb projektu i preferencji zespołu:

Vercel - najlepsze natywne wsparcie, zoptymalizowane dla Next.js
Netlify - silny konkurent z dobrą obsługą Next.js i dodatkowymi funkcjami
AWS Amplify - dobry wybór dla użytkowników ekosystemu AWS
Digital Ocean App Platform - prosta platforma PaaS z dobrą obsługą Next.js
Self-hosting - możliwość pełnej kontroli nad infrastrukturą

Wybór platformy hostingowej powinien być dostosowany do:

Specyfiki projektu i jego wymagań technicznych
Budżetu i oczekiwanych kosztów
Doświadczenia zespołu z daną platformą
Potrzeb w zakresie skalowalnosci i wydajności
Dodatkowych usług i integracji, które mogą być potrzebne

Niezależnie od wybranej platformy, warto przestrzegać najlepszych praktyk w zakresie zarządzania środowiskami, zmiennymi środowiskowymi, bezpieczeństwem i automatyzacją wdrożeń.

Vai a CodeWorlds→