Jak zainstalować Vue.js na serwerze Linux (Ubuntu 22.04, Rocky Linux 9, Debian, AlmaLinux, CentOS)

Ten kompleksowy przewodnik, dostarczony przez niekwestionowanego Króla Serwerów, Łukasza Bodzionego, poprowadzi Cię przez proces instalacji i konfiguracji środowiska do wdrożenia aplikacji Vue.js na różnych dystrybucjach Linux. Wykraczamy poza podstawową instalację, włączając w to nowoczesne praktyki DevOps z wykorzystaniem Dockera do konteneryzacji, Ansible do automatyzacji, Kubernetes do orkiestracji i Terraform do zarządzania infrastrukturą jako kodem. Takie podejście zapewnia niezawodne, skalowalne i łatwe w utrzymaniu środowisko dla Twoich aplikacji internetowych.

Wprowadzenie do Vue.js i nasza filozofia konfiguracji

Vue.js to progresywny framework JavaScript, który pozwala na budowanie intuicyjnych i wydajnych interfejsów użytkownika. Jego łatwość w nauce i elastyczność sprawiają, że jest idealny zarówno do małych projektów, jak i rozbudowanych, jednostronicowych aplikacji (SPA). Aby wdrożyć aplikację Vue.js w środowisku produkcyjnym, potrzebujemy niezawodnego serwera, który będzie serwował statyczne pliki, a także narzędzi do automatyzacji, które ułatwią zarządzanie projektem. W tym przewodniku pokażemy, jak skonfigurować cały proces wdrożenia na serwerze Linux.

Krok 1: Przygotowanie systemu bazowego

Niezależnie od wybranej dystrybucji Linux, zacznij od aktualizacji systemu i instalacji niezbędnych narzędzi, w tym Node.js, które jest kluczowe dla Vue.js.

Dla Ubuntu / Debian:

sudo apt update && sudo apt upgrade -y
sudo apt install -y curl wget git vim ca-certificates gnupg

Następnie zainstaluj Node.js i npm (zalecamy użycie menedżera wersji, takiego jak nvm):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc # lub ~/.zshrc
nvm install node # Zainstaluje najnowszą wersję Node.js

Dla Rocky Linux 9 / AlmaLinux / CentOS:

sudo dnf -y update
sudo dnf install -y curl wget git vim ca-certificates dnf-plugins-core

Następnie zainstaluj Node.js i npm (z repozytorium NodeSource):

curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo dnf install -y nodejs

Krok 2: Instalacja i konfiguracja Vue.js

Po zainstalowaniu Node.js, możesz zainstalować Vue CLI, a następnie stworzyć i zbudować swoją aplikację.

# Zainstaluj Vue CLI globalnie
npm install -g @vue/cli

# Stwórz nowy projekt Vue.js
vue create my-app

# Przejdź do katalogu projektu i zbuduj go do środowiska produkcyjnego
cd my-app
npm run build

Po wykonaniu npm run build, statyczne pliki Twojej aplikacji znajdą się w katalogu dist/.

Krok 3: Konfiguracja Dockera dla Vue.js

Użyjemy Dockera do serwowania aplikacji Vue.js za pomocą lekkiego serwera Nginx. Dzięki temu nasza aplikacja będzie działać w izolowanym środowisku, a wdrożenie będzie powtarzalne.

mkdir -p ~/my-app
cd ~/my-app

Skopiuj katalog dist/ z Twojej aplikacji Vue.js do tego katalogu.

Utwórz docker-compose.yml:

version: '3.8'

services:
  nginx:
    image: nginx:stable-alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./dist:/usr/share/nginx/html:ro # Skopiuj skompilowane pliki Vue.js
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
      - ./nginx/conf.d:/etc/nginx/conf.d:ro
      # Dla Let's Encrypt Certbot
      - ./certbot/conf:/etc/letsencrypt:ro
      - ./certbot/www:/var/www/certbot:ro
    restart: always

volumes:
  certbot_conf:
  certbot_www:

Utwórz Nginx site config (./nginx/conf.d/default.conf, zmień yourdomain.com):

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
    
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl http2;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    root /usr/share/nginx/html;
    index index.html;
    
    # Konfiguracja dla aplikacji SPA z routowaniem po stronie klienta
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Uruchom kontenery:

docker compose up -d

Twoja aplikacja będzie dostępna pod Twoją domeną po skonfigurowaniu rekordów DNS i certyfikatów SSL.

Krok 4: Automatyzacja z Ansible

Ansible może zautomatyzować cały proces wdrażania Vue.js, od instalacji Dockera po skompilowanie kodu i uruchomienie aplikacji. Zapewnia to spójność i powtarzalność w procesie wdrażania na wielu serwerach.

# inventory.ini
[vue_servers]
your_server_ip ansible_user=your_ssh_user

# playbook.yml
---
- name: Deploy Vue.js Application with Docker
  hosts: vue_servers
  become: yes
  vars:
    app_root: /opt/my-app
    domain_name: yourdomain.com

  tasks:
    - name: Update system cache (dla Debian/Ubuntu)
      apt: update_cache=yes
      when: ansible_os_family == 'Debian'

    - name: Update system cache (dla Rocky Linux/AlmaLinux/CentOS)
      dnf: update_cache=yes
      when: ansible_os_family == 'RedHat'

    # ... (kod instalacji Dockera, jak w poprzednich artykułach) ...
    
    - name: Utworzenie katalogów projektu
      file:
        path: "{{ app_root }}/{{ item }}"
        state: directory
        mode: '0755'
      loop:
        - "nginx/conf.d"
        - "certbot/conf"
        - "certbot/www"

    - name: Klonowanie repozytorium z kodem Vue.js
      git:
        repo: https://github.com/your-repo/your-vue-app.git
        dest: "{{ app_root }}"
        version: master # Zmień na odpowiednią gałąź lub tag
    
    - name: Kompilowanie aplikacji Vue.js
      community.general.npm:
        path: "{{ app_root }}"
        ci: yes
        production: yes
        state: present
    
    - name: Kopiowanie plików konfiguracyjnych
      template:
        src: "./templates/{{ item }}.j2"
        dest: "/opt/my-app/{{ item }}"
      loop:
        - docker-compose.yml
        - nginx/conf.d/default.conf

    - name: Uruchomienie aplikacji za pomocą Docker Compose
      community.docker.docker_compose:
        project_src: "{{ app_root }}"
        state: present

Krok 5: Orkiestracja z Kubernetes (dla zaawansowanych)

W przypadku wdrożeń na dużą skalę, Kubernetes jest idealnym rozwiązaniem. Umożliwia orkiestrację kontenerów, automatyczne skalowanie i zapewnienie wysokiej dostępności. Twoja aplikacja Vue.js, serwowana przez Nginx, zostanie zdefiniowana jako zasoby Kubernetes (Deployment, Service, Ingress).

Oto uproszczona koncepcja wdrożenia na Kubernetes:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-app-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: vue-app
  template:
    metadata:
      labels:
        app: vue-app
    spec:
      containers:
      - name: vue-app-nginx
        image: nginx:stable-alpine
        ports:
        - containerPort: 80
        volumeMounts:
        - name: vue-dist
          mountPath: /usr/share/nginx/html
---
apiVersion: v1
kind: Service
metadata:
  name: vue-app-service
spec:
  selector:
    app: vue-app
  ports:
    - port: 80
      targetPort: 80
  type: LoadBalancer # Lub NodePort/ClusterIP z Ingress

Dodatkowo, użyłbyś kontrolera Ingress, aby kierować ruch z zewnątrz do serwisu `vue-app-service`, zapewniając obsługę SSL i domen.

Krok 6: Infrastruktura jako kod z Terraform

Terraform umożliwia zarządzanie całą infrastrukturą (serwerami, sieciami, klastrami Kubernetes) za pomocą kodu. Dzięki temu Twoje środowisko jest powtarzalne i łatwe do skalowania.

Przykładowa koncepcja Terraform dla serwera Ubuntu 22.04:

resource "aws_instance" "vue_server" {
  ami           = "ami-0abcdef1234567890" # Zmień na odpowiednie AMI dla Twojej dystrybucji
  instance_type = "t3.small"
  key_name      = "my-ssh-key"
  tags = {
    Name = "VueJS-Server"
  }
}

Po zainicjowaniu serwera za pomocą Terraform, można by użyć Ansible do wdrożenia aplikacji z Dockerem. Alternatywnie, Terraform może stworzyć cały klaster Kubernetes, a następnie manifesty Kubernetes zajmą się wdrożeniem aplikacji.