Nuxt.js, Vue.js tabanlı bir framework'tür ve özellikle sunucu tarafında oluşturulan (server-side rendered) veya statik siteler oluşturmayı kolaylaştırmak için geliştirilmiştir. Nuxt.js, Vue.js projelerinde geliştirme sürecini hızlandırmak ve düzenlemek için birçok yapılandırmayı ve best-practice'leri hazır sunar. Temel özellikleri arasında şunlar bulunur:

1. Sunucu Tarafı Render (SSR): Nuxt.js, Vue.js uygulamalarını sunucu tarafında render edebilir, bu sayede sayfalar daha hızlı yüklenir ve SEO açısından avantaj sağlar.

2. Statik Site Üretimi (Static Site Generation): Nuxt.js, projeleri statik HTML dosyaları olarak üretebilir, bu da hız ve güvenlik avantajları sağlar.

3. Otomatik Yönlendirme (Routing): Nuxt.js, Vue.js ile rota tanımlama sürecini basitleştirir. Sayfa bileşenleri (pages) dizininde oluşturulan her dosya otomatik olarak bir rota haline gelir.

4. Modüller ve Eklentiler: Nuxt.js, projeye kolayca eklenebilecek birçok hazır modül ve eklenti sunar. Bu modüller, işlevselliği artırır ve projeye kolayca entegre edilebilir.

5. Vue.js Ekosistemi ile Uyumlu: Nuxt.js, Vue.js'nin üzerine inşa edildiği için Vue.js'de kullanılan özellikler ve kütüphaneler Nuxt.js projelerinde de kullanılabilir.

Özellikle SEO dostu projeler veya hızlı yüklenen uygulamalar geliştirmek isteyenler için ideal bir tercihtir.

NuxtJS NodeJS Olamadan Hosting de Nasıl Yayınlanır? 

IIS (Internet Information System) de Yayınlama

Vue.js ve Nuxt.js projelerini IIS (Internet Information Services) üzerinden yayınlamak mümkündür. Ancak, Nuxt.js SSR (Sunucu Taraflı Rendering) kullandığı için IIS üzerinde doğrudan yayınlanması biraz farklı bir yaklaşım gerektirir. İşlemi gerçekleştirmek için birkaç yöntem vardır, ancak genel olarak iki ana seçeneğiniz bulunur:

1. Nuxt.js Static Build ile Yayınlama (Nuxt generate Komutu)

Eğer Nuxt.js projenizi statik dosyalar olarak yayınlayabiliyorsanız (yani SSR kullanmıyorsanız), bu yöntem en basit olanıdır:

• Nuxt projesini statik dosyalara dönüştürmek için şu komutu kullanabilirsiniz:

  npm run generate

   

• Bu işlem sonunda dist klasöründe statik HTML, CSS ve JS dosyalarınız olacaktır.
• Bu dosyaları IIS üzerinde herhangi bir web sitesi gibi host edebilirsiniz. IIS üzerinde bir site oluşturup, dist klasörünü sitenizin kök dizini olarak ayarlayarak yayınlayabilirsiniz.

• Eğer Nuxt.js projenizi SSR ile yayınlamak istiyorsanız, IIS üzerinde Node.js çalıştırarak bu işlemi gerçekleştirebilirsiniz. Bunun için birkaç adım izlemeniz gerekir:

• IIS'de Node.js Çalıştırmak: IIS üzerinde Node.js çalıştırabilmek için iisnode modülünü kullanabilirsiniz. Bu modül, Node.js uygulamalarını IIS üzerinde çalıştırmanıza olanak sağlar.

  • iisnode'u yüklemek için iisnode GitHub sayfasından gerekli dosyaları indirip IIS'e entegre edebilirsiniz.

• Proje Build İşlemi: Projeyi production modda build etmek için:

  npm run build

IIS Üzerinde Statik Dosyaları Yayınlamak

• IIS Üzerinde Yeni Bir Web Sitesi Oluşturun:

  1. IIS Manager'ı açın.
  2. Sol taraftaki panelde "Sites" üzerine sağ tıklayın ve "Add Website" seçeneğini seçin.
  3. Site adını verin, Physical Path olarak Nuxt.js projenizin dist klasörünü seçin (örneğin C:\MyNuxtApp\dist).
  4. Site için kullanılacak bir IP adresi ve port ayarını yapın (genelde varsayılan port 80'dir).
  5. "OK" butonuna basarak siteyi oluşturun.

• IIS Ayarlarını Güncelleyin: IIS varsayılan olarak index.html gibi statik dosyaları sunacaktır, ancak Nuxt.js projesi bazen root'a yapılan istekleri doğru yönlendirmeyebilir. Bu durumda bir web.config dosyasına ihtiyacınız olabilir.

• web.config Dosyası Oluşturma (Gerekli Olabilir)

  Statik bir siteyi IIS üzerinde yayınlarken routing ile ilgili sorun yaşamamak için, dist klasörüne bir web.config dosyası eklemeniz gerekebilir. Bu dosya, Vue.js'nin route'larının doğru çalışması için önemlidir. ReverseProxyToAPI eğer api projeniz den veri çekmek istiyorsanız proxy için gerekli olacak ve axios isteklerinizi api projenize yönlenmesini sağlayacaktır.

  <configuration>
    <system.webServer>
      <!-- Vue.js History Mode Desteği -->
      <rewrite>
        <rules>
  	<!-- API isteklerini 8080 portuna yönlendirmek -->
          <rule name="ReverseProxyToAPI" stopProcessing="true">
            <match url="^api/(.*)" />
            <action type="Rewrite" url="http://localhost:8080/api/{R:1}" />
          </rule>
  
          <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>        
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

   

2. Nuxt.js SSR ile Yayınlama (Node.js Gerektiren Yöntem)

• IIS üzerinde bir web sitesi oluşturun ve sitenin kök dizinini Nuxt.js projenizin dizinine (örneğin, C:\MyNuxtApp) yönlendirin.

• Web.config dosyasını aşağıdaki gibi ayarlayın:

  <configuration>
    <system.webServer>
      <handlers>
        <add name="iisnode" path="server/index.js" verb="*" modules="iisnode" />
      </handlers>
      <rewrite>
        <rules>
          <rule name="DynamicContent">
            <match url="/*" />
            <action type="Rewrite" url="server/index.js" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>

• server/index.js dosyanız Nuxt.js projenizin başlatılmasını sağlayan dosya olacak.

• IIS Üzerinden Node.js Uygulamasını Başlatmak: IIS'deki bu yapılandırmadan sonra Nuxt.js projeniz Node.js ile sunucu tarafında render edilen bir uygulama olarak çalışacaktır.

• İlk adımda statik dosyalarla çalışmak daha basit olacaktır. Eğer SSR kullanıyorsanız, IIS'nin üzerinde Node.js uygulamasını barındırmak ya da bir reverse proxy çözümüyle ilerlemek en sağlıklı çözüm olacaktır.

  Alternatif Çözüm: Reverse Proxy ile Yayınlama

  Eğer IIS üzerinde sadece statik dosyalar yerine bir Node.js server çalıştırmak istiyorsanız, IIS'yi bir reverse proxy olarak kullanabilirsiniz. Bu durumda, Nuxt.js projenizi npm run build ve npm run start ile başlatıp, IIS'nin gelen istekleri Node.js uygulamanıza yönlendirmesini sağlayabilirsiniz.

NuxtJS Projenizi NGINX Üzerinde Yayınlama

Nuxt.js veya Vue.js projenizi NGINX üzerinde yayınlamak için birkaç temel adımı takip etmeniz gerekiyor. Ayrıca, API isteklerinizi bir backend servisine yönlendirmek (proxy) için de NGINX'i yapılandırabilirsiniz. Aşağıda bu süreci detaylıca anlatıyorum.

1. Projenizi Build Edin

Öncelikle Vue.js veya Nuxt.js projenizi statik dosyalara çevirmek için build işlemini yapmanız gerekiyor.

Vue.js İçin:

npm run build

Nuxt.js İçin (Statik Site Olarak):

Eğer Nuxt.js kullanıyorsanız, statik bir site olarak derlemek için aşağıdaki komutu kullanabilirsiniz:

npm run generate

Bu işlem, statik dosyalarınızı dist/ klasöründe oluşturacaktır.

2. NGINX'i Yükleyin

Sunucunuzda NGINX kurulu değilse aşağıdaki komutla yükleyebilirsiniz:

Ubuntu İçin:

sudo apt update sudo apt install nginx

CentOS İçin:

sudo yum install epel-release sudo yum install nginx

NGINX'i kurduktan sonra başlatın ve sistem başlatıldığında çalışması için etkinleştirin:

sudo systemctl start nginx sudo systemctl enable nginx

3. NGINX Yapılandırması

NGINX yapılandırma dosyasını düzenleyerek Vue.js veya Nuxt.js projenizi yayınlayabilir ve API isteklerini yönlendirebilirsiniz.

NGINX Yapılandırma Dosyası

Yapılandırma dosyanızı /etc/nginx/sites-available/default veya /etc/nginx/nginx.conf dosyasını düzenleyerek yapılandırabilirsiniz (dağıtımınıza bağlı olarak).

Bir örnek yapılandırma dosyası aşağıdaki gibidir:

server {
    listen 80;
    server_name your-domain.com;

    # Statik dosyaların bulunduğu dizin (Nuxt.js'in dist/ dizini)
    root /path/to/your/project/dist;

    index index.html;

    location / {
        # Vue.js History Mode için fallback
        try_files $uri $uri/ /index.html;
    }

    # API isteklerini 8080 portundaki backend'e yönlendirme
    location /api/ {
        proxy_pass http://localhost:8080/api/;
        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;
    }

    # Hata sayfaları
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

Açıklamalar:

1. server_name: Sunucunuzun domain adını buraya ekleyin. Eğer lokal sunucu kullanıyorsanız localhost yazabilirsiniz.
2. root: Vue.js veya Nuxt.js projenizin dist klasörüne giden yol.
3. location /: Statik dosyaların ve route'ların Vue.js History Mode ile düzgün çalışabilmesi için gerekli yapılandırma.
4. location /api/: API isteklerini localhost:8080'deki backend sunucusuna yönlendirmek için proxy ayarı.
5. error_page: 404 hatası için özel bir hata sayfası ayarlayabilirsiniz.

4. Yapılandırmayı Test Edin ve NGINX'i Yeniden Başlatın

Yapılandırmanızı test ettikten sonra NGINX’i yeniden başlatmanız gerekecek.

NGINX Yapılandırmasını Test Etme:

sudo nginx -t

Eğer herhangi bir hata yoksa şu komutla NGINX’i yeniden başlatabilirsiniz:

sudo systemctl restart nginx

5. Firewall ve Güvenlik Ayarları (Opsiyonel)

Eğer sunucunuzda bir güvenlik duvarı çalışıyorsa, NGINX’in çalıştığı portu (genellikle 80 ve 443) açmanız gerekebilir.

UFW Kullanıyorsanız:

sudo ufw allow 'Nginx Full'

6. SSL Sertifikası Kurulumu (Opsiyonel)

Eğer sitenizi HTTPS ile güvence altına almak istiyorsanız, Let's Encrypt gibi ücretsiz bir SSL sertifikası sağlayıcısını kullanabilirsiniz. Bunun için Certbot aracıyla Let's Encrypt sertifikasını kurabilirsiniz.

Certbot İle Let's Encrypt SSL Kurulumu:

1. Certbot ve NGINX için gerekli paketleri yükleyin:

   sudo apt install certbot python3-certbot-nginx

2. SSL sertifikasını alın ve NGINX yapılandırmasını otomatik olarak güncelleyin:

   sudo certbot --nginx -d your-domain.com -d www.your-domain.com

3. SSL sertifikasını yenilemek için otomatik bir işlem ekleyin:

   sudo certbot renew --dry-run

• Projenizi build edip NGINX yapılandırmasını düzenledikten sonra, siteniz NGINX üzerinden statik olarak yayınlanacaktır.
• API isteklerinizi yönlendirmek için NGINX proxy ayarını kullanabilirsiniz.
• Eğer SSL kullanacaksanız, Let's Encrypt ile HTTPS yapılandırmasını yapabilirsiniz.

Bu adımları uyguladıktan sonra Vue.js/Nuxt.js projeniz NGINX üzerinde çalışmaya başlamalı.