0Pricing
Vue Academy · Lekcja

Wdrażanie pełnego stosu Vue na produkcję

Docker Compose dla Vue + Fastify, odwrotny proxy nginx, SSL z Let's Encrypt oraz CI/CD.

Wdrażanie pełnego stosu Vue na produkcję to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Topologia produkcyjna

Pełna aplikacja Vue + Fastify w produkcji zazwyczaj działa jako dwa kontenery: kontener nginx serwujący zbudowane statyczne pliki Vue oraz kontener API Fastify. nginx pełni również funkcję reverse proxy dla /api, kierując żądania do API.

Budowanie aplikacji Vue

Należy zbudować SPA za pomocą Vite, aby wygenerować zoptymalizowane zasoby statyczne w katalogu dist. To właśnie ten katalog będzie serwować nginx.

# package.json script
npm run build
# produces dist/ with hashed JS/CSS and index.html

Dockerfile Vue (wieloetapowy)

Należy użyć wieloetapowego procesu budowania obrazu Docker: zbudować aplikację przy użyciu Node, a następnie skopiować statyczne dane wyjściowe do niewielkiego obrazu nginx. Obraz końcowy zawiera wyłącznie pliki statyczne i nginx.

FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf: SPA + proxy API

Konfiguracja nginx serwuje SPA, korzystając z fallbacku try_files do pliku index.html na potrzeby routingu po stronie klienta, oraz przekazuje żądania /api do kontenera Fastify na podstawie jego nazwy usługi.

server {
  listen 80;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://fastify-api:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

Dockerfile Fastify

Obraz API instaluje zależności produkcyjne i uruchamia serwer. Serwer należy powiązać z 0.0.0.0, aby był dostępny z innych kontenerów.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

docker-compose łączy obie usługi we wspólnej sieci. Cel proxy fastify-api w nginx.conf odpowiada nazwie usługi użytej tutaj.

services:
  vue-nginx:
    build: ./frontend
    ports:
      - '80:80'
      - '443:443'
    depends_on:
      - fastify-api
  fastify-api:
    build: ./backend
    environment:
      - JWT_SECRET=${JWT_SECRET}
    expose:
      - '3000'

Wykrywanie usług po nazwie

W sieci compose kontenery komunikują się ze sobą za pomocą nazw usług. nginx przekazuje żądania do http://fastify-api:3000 — bez adresów IP i bez publicznego udostępniania portu API.

# only nginx is published to the host (80/443)
# fastify-api uses 'expose', reachable only internally

SSL z Certbotem

Należy dodać HTTPS za pomocą Let's Encrypt przez Certbota. Certyfikaty należy zamontować w nginx i skonfigurować blok serwera 443, przekierowując HTTP do HTTPS.

server {
  listen 443 ssl;
  ssl_certificate /etc/letsencrypt/live/app.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/app.com/privkey.pem;
  # ... same location blocks as before
}
server {
  listen 80;
  return 301 https://$host$request_uri;
}

Odnawianie certyfikatów Certbota

Certyfikaty Certbota są ważne przez 90 dni. Należy uruchamiać polecenie odnowienia według harmonogramu (cron lub kontener sidecar), a następnie przeładować nginx, aby odnowione certyfikaty zaczęły obowiązywać.

# cron entry, twice daily
certbot renew --quiet && nginx -s reload

CI/CD w GitHub Actions

Należy zautomatyzować budowanie i wdrażanie za pomocą GitHub Actions: po wypchnięciu zmian do main należy zbudować i przetestować projekt, a następnie zbudować i wypchnąć obrazy lub połączyć się z serwerem przez SSH, aby pobrać obrazy i ponownie uruchomić usługi za pomocą compose.

name: deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm test
      - name: Deploy over SSH
        run: ssh $HOST 'cd /app && git pull && docker compose up -d --build'

Sekrety i zmienne środowiskowe

Sekretów nigdy nie należy umieszczać w obrazach. Należy przekazywać je za pośrednictwem zmiennych środowiskowych (compose environment / env_file) pobieranych z sekretów GitHub Actions. JWT_SECRET, adresy URL baz danych i inne dane tego typu należy przechowywać poza repozytorium.

Szybki test

Proszę sprawdzić swoją wiedzę na temat wdrażania aplikacji full-stack.

Podsumowanie

Poznali Państwo proces wdrażania produkcyjnego:

  • dwie usługi: vue-nginx (pliki statyczne) i fastify-api
  • nginx.conf serwuje SPA i przekazuje żądania /api do usługi API na podstawie jej nazwy
  • docker-compose łączy obie usługi; tylko nginx jest publikowany na hoście
  • HTTPS przez Certbota z zaplanowanym odnawianiem certyfikatów
  • GitHub Actions buduje, testuje i wdraża aplikację, a sekrety pozostają w zmiennych środowiskowych

Często zadawane pytania

Czy lekcja „Wdrażanie pełnego stosu Vue na produkcję” jest bezpłatna?

Tak — pełny tekst „Wdrażanie pełnego stosu Vue na produkcję” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wdrażanie pełnego stosu Vue na produkcję”?

Docker Compose dla Vue + Fastify, odwrotny proxy nginx, SSL z Let's Encrypt oraz CI/CD. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Wdrażanie pełnego stosu Vue na produkcję”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Backend Fastify dla aplikacji SPA Vue
  2. Uwierzytelnianie JWT: logowanie i odświeżanie
  3. Uwierzytelnione wywołania API z interceptorami Axios
  4. Wdrażanie pełnego stosu Vue na produkcję
← Powrót do Vue Academy