İçeriğe geç

Nuxt SSR Projesi Nasıl Yayınlanır?

Bu yazıda hızlıca bir Nuxt projesini nasıl yayınlayacağımızı göreceğiz. Son geliştirdiğim proje Nuxt SSR olduğu için SSR üzerinden örnek vereceğim. Genel bilgi edinmeniz için bu linki ziyaret etmenizde fayda var.

Öncelikle sunucuya SSH ile erişmemiz gerekiyor. Bu yolla paylaşımlı sunuculardaki hosting’lere kurulum yapamazsınız. Ben Virtualmin paneli kurulu bir sunucuda birden fazla hosting açıp bir tanesine Nuxt SSR projemi kurdum. Buradaki en önemli nokta SSH ile ulaşabiliyor olmamdı. Eğer SSH ile ulaşabiliyorsanız Virtualmin, cPanel, Plesk veya herhangi bir panele sahip bir sunucuda bu adımları izleyerek kurulumu yapabilirsiniz.

Eğer herhangi bir panel olmadan sitenizi yayınlamak istiyorsanız hiçbir değişiklik yapmadan aşağıdaki adımları uygulamaya devam edebilirsiniz.

Başlamadan önce nelere ihtiyacımız olduğunu görelim. 

  1. SSH yoluyla ulaşabileceğimiz bir sunucu
  2. Nginx/Apache
  3. node ve npm
  4. pm2

Nginx veya Apache kullanmak sizin tercihinizde. Gerekli ayarları yapabildiğiniz sürece aynı adımları uygulayarak istediğinizi kullanabilirsiniz. Ben Nginx üzerinden örnek vereceğim.

Nginx kurulumunun panelle birlikte tamamlandığını varsayarak hızlıca npm kurulumuna geçiyorum.

Not : Aynı uygulamaları Centos için kendi kurulum adımlarını uygulayarak kurabilirsiniz.

Kurulum yapabilmemiz için ilk önce root olmamız gerekiyor.

Root parolanızı girip devam edin.

Node kurulumunu hızlıca aşağıdaki adımlarla tamamlayabilirsiniz.

Node ve npm sürümlerini görüyorsanız kurulum başarıyla tamamlanmıştır. Şimdi hızlıca pm2 kuralım.

Pm2 hakkında daha detaylı bilgi edinmek için bu linki kullanabilirsiniz.

Kurulumlarımız tamamlandığına göre artık diğer adımlara geçebiliriz.

Ben kurulumu Virtualmin üzerinden yaptığım için dosya yolları da ona göre ayarlı durumda. Siz kendi hosting’inizin size home dizini olarak verdiği dizine gidin. Bazı sunucular /var/www/ bazıları ise /home/ dizini altına domain adıyla dizin oluşturur.

Projemiz için app adında bir dizin oluşturalım.

Dizin oluşturduktan sonra node_modules, .editorconfig, .gitignore, .prettierrc, README.md, yarn.lock, jsconfig.json ve package-lock.json gibi gereksiz dosyalar dışında projeniz için özel olarak oluşturduğunuz dosya ve dizinlere birlikte Nuxt projesi oluşturulurken varsayılan olarak oluşturulan ne kadar dosya ve dizin varsa hepsini app dizini altına yükleyin.

Yüklemenin ardından eğer varsa Nginx dosyasını açın, yoksa da siz oluşturun.

İçeriğini aşağıdaki ile değiştirin.

Burada birkaç değişiklik yapmanız gerekiyor. Dosya yolunuz, ip adresiniz, projenin çalışacağı port numarası ve diğer Nginx ayarlarınıza özgü değiştirilmesi gereken her yeri değiştirin. Değişikliğin ardından bir kez Nginx servisini yeniden başlatın.

Belki root kullanıcısı ile dosyalarınızı yüklemişsinizdir diye düşünerek her ihtimale karşı dosyaların sahipliğini kullanıcıya verelim.

Bu taraftaki işlemlerimizi tamamladığımıza göre artık Nuxt tarafına geçebiliriz.

nuxt.config.js dosyasını açın ve modules bölümünün altına aşağıdaki satırları ekleyin.

Burada Nuxt çalıştığında hangi port ile çalışacağını belirttik. Nginx içerisinde proxy_pass bölümündeki port ile aynı olması gerekiyor.

Ayrıca projemizle ilgili bilgilerin toplanmamaıs için telemetry değerini false yaptık.

Yaptığınız değişikliğin ardından dosyayı sunucuya yüklemeyi unutmayın. Eğer nuxt.config.js dosyasının sahipliği başka kullanıcıya geçerse tekrar geri almayı unutmayın.

Şimdi package.json dosyamıza aşağıdaki eklemeyi yapalım.

deploy_pm2 ve build_and_deploy adında 2 komut ekleyerek deploy işlemini biraz kolaylaştırdık. 

Artık npm kurulumunu da tamamlayıp siteyi yayına alabiliriz. Bunun için eğer root kullanıcıdaysanız mutlaka kendi kullanıcınıza geçiş yapın.

Son olarak aşağıdaki komutu çalıştırın.

Bu komutla önce gerekli tüm paketleri indiriyoruz, ardından build komutunu içeride çağırarak Nuxt projemizi build ediyoruz ve hemen ardından pm2 yardımıyla yayına alıyoruz.

Eğer local ortamda npm run build komutunu çalıştırdığınızda herhangi bir sorun almıyorsanız site anında açılacaktır. Eğer zaten sorunlu bir siteyi yayına almaya çalışıyorsanız önce o sorunları gidermeniz gerekiyor.

Projenin sağlıklı bir şekilde yayına devam edebilmesi için pm2 hakkında biraz araştırma yapmanızda fayda var.

 

Herhangi bir sorunuz veya sorununuz olursa yorum yoluyla ulaşırsanız yardımcı olmaya çalışırım.

Faydalı olması dileğiyle..

Tarih:JavascriptLinuxNuxtWeb Programlama

2 Yorum

  1. Yazınız için çok teşekkür ederim ben aynı adımları Windows server üzerinde IIS üzerinde yayınlamak istiyorum ve bir çözüm bulamadım bununla ilgili bana yardımcı olabilir misiniz

    • Merhaba,

      Windows server kullanmayalı yıllar oldu ve neredeyse hiçbir şey hatırlamıyorum. IIS server tarafında şu an hatırladıklarımla herhangi bir çözüm üretemem maalesef. Bu konuda daha tecrübeli kişilerden yardım asanız daha sağlıklı olacaktır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

four × three =