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.
- SSH yoluyla ulaşabileceğimiz bir sunucu
- Nginx/Apache
- node ve npm
- 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.
|
1 |
su root |
Root parolanızı girip devam edin.
Node kurulumunu hızlıca aşağıdaki adımlarla tamamlayabilirsiniz.
|
1 2 3 4 5 |
curl -sL https://deb.nodesource.com/setup_15.x | bash - apt install build-essential apt install nodejs node --version npm --version |
Node ve npm sürümlerini görüyorsanız kurulum başarıyla tamamlanmıştır. Şimdi hızlıca pm2 kuralım.
|
1 |
npm install pm2@latest -g |
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.
|
1 2 |
cd /home/benimsitem.com mkdir /home/benimsitem.com/app |
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.
|
1 2 |
touch /etc/nginx/sites-available/benimsitem.com.conf ln -s /etc/nginx/sites-available/benimsitem.com.conf /etc/nginx/sites-enabled/benimsitem.com.conf |
İçeriğini aşağıdaki ile değiştirin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off; } server { set $USER "/home/benimsitem.com"; set $path_app "${USER}/app"; charset utf-8; server_name benimsitem.com www.benimsitem.com; listen IP_ADRESINIZ; root $path_app; index index.html; #try_files $uri /index.html; expires $expires; location / { root $path_app; index index.html; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_read_timeout 1m; proxy_connect_timeout 1m; proxy_http_version 1.1; proxy_cache_bypass $http_upgrade; # Burada atadığınız 3000 portu önemli. Nuxt çalıştığında eğer farklı porttan çalışması için değişiklik yaptıysanız burayı da aynı port numarası ile değiştirmeniz gerekiyor. proxy_pass http://127.0.0.1:3000; } # Hata Sayfaları # error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; # location = /50x.html { # root $path_app; # } # deny access to .htaccess files, if Apache's document root concurs with nginx's one location ~ /\.ht { deny all; } access_log /var/log/virtualmin/benimsitem.com_access_log; error_log /var/log/virtualmin/benimsitem.com_error_log; gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# Küçük t ile benimsitem.conf dosyasında bir hata olup olmadığını test edebilirsiniz. nginx -t # Büyük T ile tüm çıktıyı görebilirsiniz. nginx -T # Bunlardan biriyle durumu kontrol edebilirsiniz. service nginx status systemctl status nginx # Bunlardan biriyle de yeniden başlatabilirsiniz. service nginx restart systemctl restart nginx |
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.
|
1 |
chown -R KULLANICI:KULLANICI /home/benimsitem.com/app/ |
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.
|
1 2 3 4 5 |
server: { port: 3000, }, telemetry: false, |
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.
|
1 2 3 4 5 6 7 |
"scripts": { "dev": "nuxt", "build": "nuxt build", // ... "deploy_pm2": "pm2 start npm --name BenimSitem -- start", "build_and_deploy": "npm update && npm run build && npm run deploy_pm2" }, |
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.
|
1 |
su KULLANICI |
Son olarak aşağıdaki komutu çalıştırın.
|
1 |
npm run build_and_deploy |
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..
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 alsanız daha sağlıklı olacaktır.