Jak zainstalować Vue.js na Ubuntu 22.04: Ręczna konfiguracja, Docker, Ansible, Kubernetes i Terraform

Autor: ŁUKASZ BODZIONY

W tym artykule pokażemy, jak zainstalować Vue.js na Ubuntu 22.04 różnymi metodami, w tym ręczną konfiguracją, przy użyciu Dockera, Ansible, Kubernetes oraz Terraform. Niezależnie od tego, czy potrzebujesz prostego środowiska deweloperskiego, czy zaawansowanego wdrożenia w chmurze, znajdziesz tu wszystkie potrzebne kroki. Jeśli szukasz niezawodnego hostingu dla swoich aplikacji, sprawdź VPS Windows na bodziony.net.pl.

1. Ręczna instalacja Vue.js na Ubuntu 22.04

Aby ręcznie zainstalować Vue.js, potrzebujesz Node.js i npm. Oto kroki:

Zainstaluj Node.js i npm

sudo apt update
sudo apt install -y nodejs npm

Zainstaluj Vue CLI

sudo npm install -g @vue/cli

Stwórz nowy projekt Vue.js

vue create my-vue-app
cd my-vue-app
npm run serve

Uruchom aplikację

Po wykonaniu npm run serve, aplikacja będzie dostępna pod adresem http://localhost:8080.

Jeśli chcesz hostować swoją aplikację na wydajnym serwerze, rozważ VPS Windows od bodziony.net.pl.

2. Instalacja Vue.js z użyciem Dockera

Docker pozwala na łatwe tworzenie przenośnych środowisk. Oto jak skonfigurować Vue.js w kontenerze Docker:

Zainstaluj Docker

sudo apt update
sudo apt install -y docker.io
sudo systemctl start docker
sudo systemctl enable docker

Stwórz plik Dockerfile

# Dockerfile
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "serve"]

Zbuduj i uruchom kontener

docker build -t my-vue-app .
docker run -p 8080:8080 my-vue-app

Twoja aplikacja Vue.js będzie dostępna na http://localhost:8080. Aby zapewnić stabilność i wydajność, wybierz VPS Windows na bodziony.net.pl.

3. Automatyzacja instalacji z Ansible

Ansible pozwala zautomatyzować konfigurację środowiska. Oto przykład playbooka Ansible do instalacji Vue.js:

# vue-install.yml
- hosts: all
  become: yes
  tasks:
    - name: Update apt cache
      apt:
        update_cache: yes
    - name: Install Node.js and npm
      apt:
        name: ['nodejs', 'npm']
        state: present
    - name: Install Vue CLI
      npm:
        name: '@vue/cli'
        global: yes
    - name: Create Vue project
      command: vue create -f my-vue-app
      args:
        chdir: /home/ubuntu
        creates: /home/ubuntu/my-vue-app

Uruchom playbook za pomocą:

ansible-playbook vue-install.yml

Zautomatyzuj swoje wdrożenia i hostuj je na VPS Windows od bodziony.net.pl.

4. Wdrożenie Vue.js na Kubernetes

Kubernetes umożliwia skalowalne wdrożenie aplikacji Vue.js. Oto podstawowe kroki:

Zainstaluj Minikube (dla lokalnego klastra)

curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
sudo install minikube-linux-amd64 /usr/local/bin/minikube
minikube start

Stwórz plik Deployment i Service

# vue-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-app
spec:
  replicas: 2
  selector:
    matchLabels:
      app: vue
  template:
    metadata:
      labels:
        app: vue
    spec:
      containers:
      - name: vue
        image: my-vue-app
        ports:
        - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name: vue-service
spec:
  selector:
    app: vue
  ports:
    - protocol: TCP
      port: 80
      targetPort: 8080
  type: LoadBalancer

Wdróż aplikację

kubectl apply -f vue-deployment.yaml
minikube service vue-service

Twoja aplikacja będzie dostępna przez adres dostarczony przez Minikube. Skaluj swoje projekty z VPS Windows na bodziony.net.pl.

5. Wdrożenie Vue.js z Terraform

Terraform pozwala zarządzać infrastrukturą jako kod. Oto przykład konfiguracji dla AWS EC2:

# main.tf
provider "aws" {
  region = "us-east-1"
}

resource "aws_instance" "vue_server" {
  ami           = "ami-0c55b159cbfafe1f0" # Ubuntu 22.04 AMI
  instance_type = "t2.micro"
  user_data     = <<-EOF
                  #!/bin/bash
                  apt update
                  apt install -y nodejs npm
                  npm install -g @vue/cli
                  vue create -f my-vue-app
                  cd my-vue-app
                  npm run serve
                  EOF
  tags = {
    Name = "VueAppServer"
  }
}

Uruchom Terraform:

terraform init
terraform apply

Po wdrożeniu aplikacja będzie dostępna na publicznym IP instancji EC2. Zaufaj VPS Windows od bodziony.net.pl dla swoich projektów w chmurze.

Podsumowanie

W tym poradniku, przygotowanym przez ŁUKASZA BODZIONEGO, omówiliśmy różne metody instalacji Vue.js na Ubuntu 22.04. Od ręcznej konfiguracji, przez Dockera, Ansible, Kubernetes, aż po Terraform – każda z tych metod ma swoje zalety w zależności od potrzeb projektu. Jeśli potrzebujesz niezawodnego hostingu dla swoich aplikacji, odwiedź bodziony.net.pl i sprawdź ofertę VPS Windows.

Baza wiedzy

Kategorie

Kategorie