Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Ubuntu 20.04 Üzerinde Nginx ile Vuetify Uygulaması Nasıl Yayınlanır?

Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde Vuetify kullanan bir Vue uygulamasını sıfırdan oluşturacağız.
Uygulamayı production için derleyip Nginx ile alan adınızda yayınlayacağız.
Sonunda çalışan, stabil bir web uygulamanız olacak.

Teknik Özet​

  • Amaç: Vue + Vuetify uygulamasını canlıya almak
  • Çözüm: Production build + Nginx yapılandırması
  • Sonuç: Hızlı, SPA uyumlu, stabil yayın

Ön Gereksinimler​

Aşağıdakiler hazır olmalı:

  • Ubuntu 20.04 sunucu
  • Sudo yetkili kullanıcı (rabisu)
  • Nginx kurulu
  • Node.js 14+
  • Alan adı (örnek: uygulama.rabisu.site)

1️⃣ Vue Uygulamasını Oluşturma​

sudo npm install -g @vue/cli
  • Vue CLI aracını kurar.

vue create vuetify-projesi
  • Vue proje iskeletini oluşturur.

Seçim: Default (Vue 2)​

  1. Vuetify bu sürümle daha stabildir.

2️⃣ Vuetify Entegrasyonu​


cd vuetify-projesi
vue add vuetify
  • Vuetify bileşen kütüphanesini projeye ekler.

npm run serve
  • Geliştirme sunucusunu başlatır.

3️⃣ Örnek To-Do Uygulaması​

  1. src/App.vue dosyasını açın ve aşağıdaki kodu ekleyin.

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <h3>Rabisu To-Do App</h3>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-card>
          <v-card-title>
            <v-text-field
              v-model="yeniGorev"
              label="Yeni Görev"
              append-icon="mdi-plus"
              @click:append="gorevEkle"
            />
          </v-card-title>

          <v-card-text>
            <v-list>
              <v-list-item
                v-for="(g, i) in gorevler"
                :key="i"
              >
                <v-list-item-title>{&#123; g &#125;}</v-list-item-title>
                <v-btn icon @click="gorevSil(i)">
                  <v-icon color="red">mdi-delete</v-icon>
                </v-btn>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>
  • Bu kod görev ekleme ve silme işlevlerini sağlar.

4️⃣ Production Build Alma​


npm run build
  • Yayına hazır statik dosyaları üretir.

📁 Çıktı: dist/

5️⃣ Nginx ile Yayınlama​


sudo mkdir -p /var/www/vuetify-projesi
sudo cp -r dist/* /var/www/vuetify-projesi/
  • Build dosyalarını Nginx dizinine taşır.

Nginx Yapılandırması​


sudo nano /etc/nginx/sites-available/vuetify-projesi

server {
  listen 80;
  server_name uygulama.rabisu.site;

  root /var/www/vuetify-projesi;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
  • try_files SPA uygulamalarda 404 hatasını önler.

sudo ln -s /etc/nginx/sites-available/vuetify-projesi /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl restart nginx

❓ Sıkça Sorulan Sorular​

1. Sayfa yenileyince 404 alıyorum, neden? SPA yapılar için try_files zorunludur.

2. HTTPS nasıl eklenir? Let’s Encrypt + Certbot kullanılabilir.

3. Kod değişince ne yapmalıyım? Tekrar npm run build alıp dosyaları kopyalayın.

4. İzin hatası alıyorum, çözüm?


sudo chown -R $USER:www-data /var/www/vuetify-projesi

Sonuç​

Vuetify tabanlı Vue uygulamanız artık yayında 🎉 Nginx ile hızlı, stabil ve production uyumlu çalışır.

Rabisu Bulut altyapısında Ubuntu sunucunuzu dakikalar içinde kurup hemen deneyebilirsiniz.