{"id":3116,"date":"2025-12-07T17:04:51","date_gmt":"2025-12-07T14:04:51","guid":{"rendered":"https:\/\/www.dchost.com\/blog\/react-vue-ve-angular-single-page-applicationlari-ayni-alan-adinda-api-ile-host-etmek-nginx-yonlendirme-ve-ssl-mimarisi\/"},"modified":"2025-12-07T17:04:51","modified_gmt":"2025-12-07T14:04:51","slug":"react-vue-ve-angular-single-page-applicationlari-ayni-alan-adinda-api-ile-host-etmek-nginx-yonlendirme-ve-ssl-mimarisi","status":"publish","type":"post","link":"https:\/\/www.dchost.com\/blog\/react-vue-ve-angular-single-page-applicationlari-ayni-alan-adinda-api-ile-host-etmek-nginx-yonlendirme-ve-ssl-mimarisi\/","title":{"rendered":"React, Vue ve Angular Single Page Application\u2019lar\u0131 Ayn\u0131 Alan Ad\u0131nda API ile Host Etmek: Nginx Y\u00f6nlendirme ve SSL Mimarisi"},"content":{"rendered":"<div class=\"dchost-blog-content-wrapper\"><div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">\u0130&ccedil;indekiler<\/p><ul class=\"toc_list\"><li><a href=\"#Tek_Alan_Adi_Coklu_SPA_ve_API_Neden_Ugrasmaya_Deger\"><span class=\"toc_number toc_depth_1\">1<\/span> Tek Alan Ad\u0131, \u00c7oklu SPA ve API: Neden U\u011fra\u015fmaya De\u011fer?<\/a><\/li><li><a href=\"#Genel_Mimari_React_Vue_Angular_ve_APIyi_Nereye_Yerlestiriyoruz\"><span class=\"toc_number toc_depth_1\">2<\/span> Genel Mimari: React, Vue, Angular ve API\u2019yi Nereye Yerle\u015ftiriyoruz?<\/a><\/li><li><a href=\"#Nginx_ile_Yonlendirme_react_vue_panel_ve_api_Ayrimi\"><span class=\"toc_number toc_depth_1\">3<\/span> Nginx ile Y\u00f6nlendirme: \/react, \/vue, \/panel ve \/api Ayr\u0131m\u0131<\/a><ul><li><a href=\"#Temel_server_blogu\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Temel server blo\u011fu<\/a><\/li><li><a href=\"#History_Mode_ve_404_Tuzaklari\"><span class=\"toc_number toc_depth_2\">3.2<\/span> History Mode ve 404 Tuzaklar\u0131<\/a><\/li><li><a href=\"#API_Icin_Reverse_Proxy_Ayrintilari\"><span class=\"toc_number toc_depth_2\">3.3<\/span> API \u0130\u00e7in Reverse Proxy Ayr\u0131nt\u0131lar\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#SSL_ve_HTTPS_Mimarisi_Tek_Sertifika_ile_Coklu_SPA\"><span class=\"toc_number toc_depth_1\">4<\/span> SSL ve HTTPS Mimarisi: Tek Sertifika ile \u00c7oklu SPA<\/a><ul><li><a href=\"#HTTPden_HTTPSe_Yonlendirme_ve_HSTS\"><span class=\"toc_number toc_depth_2\">4.1<\/span> HTTP\u2019den HTTPS\u2019e Y\u00f6nlendirme ve HSTS<\/a><\/li><\/ul><\/li><li><a href=\"#CORS_Cerezler_ve_Kimlik_Dogrulama_Ayni_Alan_Adinin_Gucu\"><span class=\"toc_number toc_depth_1\">5<\/span> CORS, \u00c7erezler ve Kimlik Do\u011frulama: Ayn\u0131 Alan Ad\u0131n\u0131n G\u00fcc\u00fc<\/a><\/li><li><a href=\"#Performans_ve_Onbellekleme_SPAlari_Ucurmak\"><span class=\"toc_number toc_depth_1\">6<\/span> Performans ve \u00d6nbellekleme: SPA\u2019lar\u0131 U\u00e7urmak<\/a><ul><li><a href=\"#Statik_dosyalar_icin_Cache-Control_basliklari\"><span class=\"toc_number toc_depth_2\">6.1<\/span> Statik dosyalar i\u00e7in Cache-Control ba\u015fl\u0131klar\u0131<\/a><\/li><li><a href=\"#GzipBrotli_ve_HTTP23\"><span class=\"toc_number toc_depth_2\">6.2<\/span> Gzip\/Brotli ve HTTP\/2\/3<\/a><\/li><\/ul><\/li><li><a href=\"#Dagitim_Deploy_Stratejisi_Zero-Downtime_Yayin_Akisi\"><span class=\"toc_number toc_depth_1\">7<\/span> Da\u011f\u0131t\u0131m (Deploy) Stratejisi: Zero-Downtime Yay\u0131n Ak\u0131\u015f\u0131<\/a><ul><li><a href=\"#Surumlenmis_dizinler_ve_sembolik_link_yaklasimi\"><span class=\"toc_number toc_depth_2\">7.1<\/span> S\u00fcr\u00fcmlenmi\u015f dizinler ve sembolik link yakla\u015f\u0131m\u0131<\/a><\/li><li><a href=\"#API_icin_bluegreen_veya_canary_yaklasimlari\"><span class=\"toc_number toc_depth_2\">7.2<\/span> API i\u00e7in blue\/green veya canary yakla\u015f\u0131mlar\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#DCHost_Uzerinde_Ornek_Bir_Senaryo\"><span class=\"toc_number toc_depth_1\">8<\/span> DCHost \u00dczerinde \u00d6rnek Bir Senaryo<\/a><\/li><li><a href=\"#DNS_TTL_ve_Tasima_Senaryolari\"><span class=\"toc_number toc_depth_1\">9<\/span> DNS, TTL ve Ta\u015f\u0131ma Senaryolar\u0131<\/a><\/li><li><a href=\"#Guvenlik_ve_Bakim_Loglar_WAF_ve_Guncellemeler\"><span class=\"toc_number toc_depth_1\">10<\/span> G\u00fcvenlik ve Bak\u0131m: Loglar, WAF ve G\u00fcncellemeler<\/a><\/li><li><a href=\"#Sonuc_SPAlarinizi_Toplayin_Mimariniz_Sadelessin\"><span class=\"toc_number toc_depth_1\">11<\/span> Sonu\u00e7: SPA\u2019lar\u0131n\u0131z\u0131 Toplay\u0131n, Mimariniz Sadelessin<\/a><\/li><\/ul><\/div>\n<h2><span id=\"Tek_Alan_Adi_Coklu_SPA_ve_API_Neden_Ugrasmaya_Deger\">Tek Alan Ad\u0131, \u00c7oklu SPA ve API: Neden U\u011fra\u015fmaya De\u011fer?<\/span><\/h2>\n<p>Bir projede React ile bir y\u00f6netim paneli, Vue ile m\u00fc\u015fteri aray\u00fcz\u00fc, Angular ile de i\u00e7 s\u00fcre\u00e7lerin y\u00f6netildi\u011fi bir dashboard geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Bir noktada \u015fu soruya geliyorsunuz: \u201cT\u00fcm bu Single Page Application (SPA) projelerini ve API\u2019yi tek alan ad\u0131nda, d\u00fczenli, g\u00fcvenli ve performansl\u0131 \u015fekilde nas\u0131l host ederiz?\u201d \u0130\u015fte bu noktada Nginx, do\u011fru y\u00f6nlendirme (routing) stratejisi ve sa\u011flam bir SSL mimarisi oyuna giriyor.<\/p>\n<p>SPA yap\u0131lar\u0131 genelde statik dosyalara derleniyor; bunlar\u0131 h\u0131zl\u0131 bir web sunucusundan yay\u0131nlay\u0131p, arka tarafta Node.js, PHP, .NET veya ba\u015fka bir stack ile \u00e7al\u0131\u015fan API\u2019ye reverse proxy \u00fczerinden istek ge\u00e7irmek \u00e7ok yayg\u0131n bir yakla\u015f\u0131m. Ayn\u0131 alan ad\u0131n\u0131 kullanmak; CORS (cross-origin) karma\u015fas\u0131n\u0131 azalt\u0131yor, cookie tabanl\u0131 oturum y\u00f6netimini sadele\u015ftiriyor, SEO ve marka alg\u0131s\u0131n\u0131 g\u00fc\u00e7lendiriyor. Biz DCHost taraf\u0131nda, m\u00fc\u015fterilerin React\/Vue\/Angular + API kombinasyonlar\u0131n\u0131 tek domain alt\u0131nda, \u00f6l\u00e7eklenebilir ve g\u00fcvenli bir \u015fekilde \u00e7al\u0131\u015ft\u0131rmas\u0131 i\u00e7in s\u0131k s\u0131k mimari tasar\u0131m deste\u011fi veriyoruz.<\/p>\n<p>Bu yaz\u0131da; \u00f6rnek Nginx konfig\u00fcrasyonlar\u0131, SSL\/HTTPS stratejileri, history mode kaynakl\u0131 404 tuzaklar\u0131, performans ve da\u011f\u0131t\u0131m (deploy) pratiklerine kadar, tek alan ad\u0131nda \u00e7oklu SPA + API mimarisini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Hedefimiz: Ger\u00e7ek d\u00fcnyada uygulanabilir, kopuk de\u011fil b\u00fct\u00fcn bir \u00e7\u00f6z\u00fcm anlatmak.<\/p>\n<h2><span id=\"Genel_Mimari_React_Vue_Angular_ve_APIyi_Nereye_Yerlestiriyoruz\">Genel Mimari: React, Vue, Angular ve API\u2019yi Nereye Yerle\u015ftiriyoruz?<\/span><\/h2>\n<p>\u00d6nce temel resmi netle\u015ftirelim. Basit ama g\u00fc\u00e7l\u00fc bir senaryodan gidelim:<\/p>\n<ul>\n<li><strong>Alan ad\u0131n\u0131z:<\/strong> example.com<\/li>\n<li><strong>React uygulamas\u0131:<\/strong> example.com\/react<\/li>\n<li><strong>Vue uygulamas\u0131:<\/strong> example.com\/vue<\/li>\n<li><strong>Angular uygulamas\u0131:<\/strong> example.com\/panel<\/li>\n<li><strong>API:<\/strong> example.com\/api<\/li>\n<\/ul>\n<p>Burada t\u00fcm trafik tek bir Nginx sunucusuna geliyor. Nginx:<\/p>\n<ul>\n<li>Statik SPA dosyalar\u0131n\u0131 diskten do\u011frudan servis ediyor,<\/li>\n<li><code>\/api<\/code> alt\u0131ndaki istekleri arka plandaki API sunucular\u0131na reverse proxy ile iletiyor,<\/li>\n<li>HTTP isteklerini HTTPS\u2019e y\u00f6nlendiriyor ve TLS (SSL) ba\u011flant\u0131s\u0131n\u0131 sonland\u0131r\u0131yor.<\/li>\n<\/ul>\n<p>Alan ad\u0131, DNS ve SSL\u2019in birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 daha temel seviyede hat\u0131rlamak isterseniz, <a href=\"https:\/\/www.dchost.com\/blog\/web-hosting-nedir-domain-dns-sunucu-ve-ssl-nasil-birlikte-calisir\/\">domain, DNS, sunucu ve SSL\u2019in birlikte nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlatt\u0131\u011f\u0131m\u0131z detayl\u0131 rehbere<\/a> de g\u00f6z atabilirsiniz.<\/p>\n<p>Bu mimariyi DCHost \u00fczerinde bir VPS, <a href=\"https:\/\/www.dchost.com\/tr\/fiziksel-sunucu\">dedicated sunucu<\/a> veya colocation ortam\u0131nda rahatl\u0131kla kurabilirsiniz. <a href=\"https:\/\/www.dchost.com\/tr\/web-hosting\">payla\u015f\u0131ml\u0131 hosting<\/a> yerine Nginx konfig\u00fcrasyonuna tam eri\u015fiminiz olan bir ortam, bu tip geli\u015fmi\u015f routing senaryolar\u0131 i\u00e7in \u00e7ok daha esneklik sa\u011flar.<\/p>\n<h2><span id=\"Nginx_ile_Yonlendirme_react_vue_panel_ve_api_Ayrimi\">Nginx ile Y\u00f6nlendirme: \/react, \/vue, \/panel ve \/api Ayr\u0131m\u0131<\/span><\/h2>\n<p>\u015eimdi i\u015fin kalbine, yani Nginx konfig\u00fcrasyonuna gelelim. \u00d6rnek bir yap\u0131 \u00fczerinden gidece\u011fiz. Varsayal\u0131m ki SPA derleme \u00e7\u0131kt\u0131lar\u0131n\u0131z \u015fu dizinlerde:<\/p>\n<ul>\n<li>React build: <code>\/var\/www\/react<\/code><\/li>\n<li>Vue build: <code>\/var\/www\/vue<\/code><\/li>\n<li>Angular build: <code>\/var\/www\/panel<\/code><\/li>\n<\/ul>\n<p>API\u2019niz de 127.0.0.1:4000 \u00fczerinde \u00e7al\u0131\u015fan bir Node.js uygulamas\u0131 olsun.<\/p>\n<h3><span id=\"Temel_server_blogu\">Temel server blo\u011fu<\/span><\/h3>\n<pre class=\"language-nginx line-numbers\"><code class=\"language-nginx\">server {\n    listen 80;\n    server_name example.com;\n\n    # T\u00fcm HTTP trafi\u011fini HTTPS'e y\u00f6nlendir\n    return 301 https:\/\/$host$request_uri;\n}\n\nserver {\n    listen 443 ssl http2;\n    server_name example.com;\n\n    ssl_certificate     \/etc\/letsencrypt\/live\/example.com\/fullchain.pem;\n    ssl_certificate_key \/etc\/letsencrypt\/live\/example.com\/privkey.pem;\n\n    # Ortak ayarlar (gzip, security header vs.)\n    # include \/etc\/nginx\/snippets\/common.conf;\n\n    # React SPA\n    location \/react\/ {\n        root \/var\/www\/;\n        try_files $uri $uri\/ \/react\/index.html;\n    }\n\n    # Vue SPA\n    location \/vue\/ {\n        root \/var\/www\/;\n        try_files $uri $uri\/ \/vue\/index.html;\n    }\n\n    # Angular SPA\n    location \/panel\/ {\n        root \/var\/www\/;\n        try_files $uri $uri\/ \/panel\/index.html;\n    }\n\n    # API reverse proxy\n    location \/api\/ {\n        proxy_pass         http:\/\/127.0.0.1:4000\/;\n        proxy_set_header   Host $host;\n        proxy_set_header   X-Real-IP $remote_addr;\n        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header   X-Forwarded-Proto $scheme;\n    }\n}\n<\/code><\/pre>\n<p>Buradaki kritik nokta, her SPA i\u00e7in <code>try_files<\/code> direktifini kullanmam\u0131z. Bu sayede, React Router, Vue Router veya Angular Router history mode kullan\u0131rken; taray\u0131c\u0131 do\u011frudan <code>\/react\/dashboard<\/code> gibi bir URL\u2019ye gitti\u011finde, Nginx fiziksel bir dosya bulamazsa ilgili <code>index.html<\/code> dosyas\u0131na geri d\u00fc\u015f\u00fcyor.<\/p>\n<h3><span id=\"History_Mode_ve_404_Tuzaklari\">History Mode ve 404 Tuzaklar\u0131<\/span><\/h3>\n<p>SPA\u2019lar\u0131n en s\u0131k ya\u015fatt\u0131\u011f\u0131 sorunlardan biri, taray\u0131c\u0131dan do\u011frudan derin bir URL\u2019ye gidildi\u011finde (\u00f6rne\u011fin <code>\/vue\/orders\/123<\/code>) 404 al\u0131nmas\u0131d\u0131r. Bunun sebebi; bu path\u2019in sunucu taraf\u0131nda ger\u00e7ek bir dosya veya klas\u00f6r olarak bulunmamas\u0131d\u0131r. History mode ile \u00e7al\u0131\u015fan router, bu URL\u2019yi asl\u0131nda front-end taraf\u0131nda \u00e7\u00f6z\u00fcmler; Nginx\u2019in g\u00f6revi sadece her \u015feyi do\u011fru <code>index.html<\/code>\u2019e d\u00fc\u015f\u00fcrmektir.<\/p>\n<p>Bu noktada iki \u015feye dikkat etmelisiniz:<\/p>\n<ul>\n<li><strong>SPA path\u2019lerini \u00f6nceden tan\u0131mlamak:<\/strong> <code>location \/react\/<\/code>, <code>\/vue\/<\/code>, <code>\/panel\/<\/code> gibi.<\/li>\n<li><strong>\u00d6nce ger\u00e7ek dosyalar\u0131 denemek, sonra index\u2019e d\u00f6nmek:<\/strong> <code>try_files $uri $uri\/ \/react\/index.html;<\/code><\/li>\n<\/ul>\n<p>E\u011fer path tabanl\u0131 de\u011fil de k\u00f6k dizinde tek bir SPA yay\u0131nl\u0131yor olsayd\u0131n\u0131z (<code>\/<\/code>), konfig\u00fcrasyon \u015fu \u015fekilde basitle\u015febilirdi:<\/p>\n<pre class=\"language-nginx line-numbers\"><code class=\"language-nginx\">location \/ {\n    root \/var\/www\/react;\n    try_files $uri $uri\/ \/index.html;\n}\n<\/code><\/pre>\n<h3><span id=\"API_Icin_Reverse_Proxy_Ayrintilari\">API \u0130\u00e7in Reverse Proxy Ayr\u0131nt\u0131lar\u0131<\/span><\/h3>\n<p><code>\/api\/<\/code> i\u00e7in reverse proxy kullan\u0131rken, sadece <code>proxy_pass<\/code> yazmak genelde yetmez; do\u011fru header\u2019lar\u0131 da iletmeniz gerekir. En temel set \u015fu \u015fekildedir:<\/p>\n<pre class=\"language-nginx line-numbers\"><code class=\"language-nginx\">location \/api\/ {\n    proxy_pass         http:\/\/127.0.0.1:4000\/;\n\n    proxy_set_header   Host              $host;\n    proxy_set_header   X-Real-IP         $remote_addr;\n    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;\n    proxy_set_header   X-Forwarded-Proto $scheme;\n}\n<\/code><\/pre>\n<p>Arka plandaki Node.js veya ba\u015fka bir API framework\u2019\u00fc, ger\u00e7ek istemci IP\u2019si ve HTTP \u015femas\u0131n\u0131 (http\/https) bu header\u2019lar sayesinde do\u011fru g\u00f6r\u00fcr. API\u2019nizi Node.js ile kuruyorsan\u0131z, <a href=\"https:\/\/www.dchost.com\/blog\/node-jsi-canliya-alirken-panik-yapma-pm2-systemd-nginx-ssl-ve-sifir-kesinti-deploy-nasil-kurulur\/\">Node.js\u2019i Nginx ve SSL ile canl\u0131ya alma rehberimizde<\/a> reverse proxy taraf\u0131ndaki pek \u00e7ok ayr\u0131nt\u0131y\u0131 uygulamal\u0131 \u015fekilde g\u00f6rebilirsiniz.<\/p>\n<h2><span id=\"SSL_ve_HTTPS_Mimarisi_Tek_Sertifika_ile_Coklu_SPA\">SSL ve HTTPS Mimarisi: Tek Sertifika ile \u00c7oklu SPA<\/span><\/h2>\n<p>Hem SPA\u2019lar hem API ayn\u0131 alan ad\u0131nda oldu\u011funda, i\u015fin g\u00fczel taraf\u0131 SSL taraf\u0131nda i\u015fler olduk\u00e7a sadele\u015fir: <strong>Tek bir sertifika ile her \u015feyi g\u00fcvenli hale getirebilirsiniz.<\/strong><\/p>\n<p>Senaryomuzda t\u00fcm trafi\u011fimiz <code>example.com<\/code> \u00fczerinde d\u00f6n\u00fcyor. Yani ihtiyac\u0131m\u0131z olan, bu alan ad\u0131n\u0131 kapsayan bir <a href=\"https:\/\/www.dchost.com\/tr\/ssl\">SSL sertifikas\u0131<\/a> (DV, OV veya EV). E\u011fer <code>api.example.com<\/code>, <code>app.example.com<\/code> gibi alt alan adlar\u0131 da i\u015fin i\u00e7ine girecekse, o zaman wildcard (<code>*.example.com<\/code>) veya SAN (Subject Alternative Name) i\u00e7eren bir sertifika d\u00fc\u015f\u00fcnmek mant\u0131kl\u0131 hale gelir.<\/p>\n<p>Modern TLS \u00f6zellikleri (TLS 1.3, OCSP Stapling, g\u00fc\u00e7l\u00fc \u015fifre paketleri, HSTS vb.) i\u00e7in Nginx taraf\u0131nda at\u0131lacak ad\u0131mlar\u0131 merak ediyorsan\u0131z, <a href=\"https:\/\/www.dchost.com\/blog\/nginxte-tls-1-3-ocsp-stapling-ve-brotli-nasil-kurulur-hizli-ve-guvenli-httpsnin-sicacik-rehberi\/\">Nginx\u2019te TLS 1.3, OCSP Stapling ve Brotli kurulumunu anlatt\u0131\u011f\u0131m\u0131z rehbere<\/a> mutlaka g\u00f6z at\u0131n.<\/p>\n<h3><span id=\"HTTPden_HTTPSe_Yonlendirme_ve_HSTS\">HTTP\u2019den HTTPS\u2019e Y\u00f6nlendirme ve HSTS<\/span><\/h3>\n<p>\u00c7oklu SPA mimarisinde dahi, HTTP &rarr; HTTPS ge\u00e7i\u015fi klasik kal\u0131plar\u0131 takip eder. \u00d6rne\u011fimizde ilk <code>server<\/code> blo\u011fu zaten t\u00fcm HTTP isteklerini 301 ile HTTPS\u2019e y\u00f6nlendiriyor.<\/p>\n<p>SEO etkilerini ve HSTS (HTTP Strict Transport Security) kullan\u0131m\u0131n\u0131 da d\u00fc\u015f\u00fcnmek isterseniz, <a href=\"https:\/\/www.dchost.com\/blog\/httpden-httpse-gecis-rehberi-301-yonlendirme-hsts-ve-seoyu-korumak\/\">HTTP\u2019den HTTPS\u2019e ge\u00e7i\u015fi, 301 y\u00f6nlendirme ve HSTS ile SEO\u2019yu nas\u0131l koruyaca\u011f\u0131n\u0131z\u0131 detayl\u0131 anlatt\u0131\u011f\u0131m\u0131z yaz\u0131m\u0131z<\/a> iyi bir tamamlay\u0131c\u0131 olacakt\u0131r.<\/p>\n<p><strong>\u00d6zetle:<\/strong> SPA\u2019lar\u0131n\u0131z hangi path\u2019te olursa olsun, HTTPS katman\u0131 Nginx\u2019te tek bir yerde sonlan\u0131r; gerisi tamamen y\u00f6nlendirme ve root ayarlar\u0131ndan ibarettir.<\/p>\n<h2><span id=\"CORS_Cerezler_ve_Kimlik_Dogrulama_Ayni_Alan_Adinin_Gucu\">CORS, \u00c7erezler ve Kimlik Do\u011frulama: Ayn\u0131 Alan Ad\u0131n\u0131n G\u00fcc\u00fc<\/span><\/h2>\n<p>SPA + API mimarisinde geli\u015ftiricilerin en \u00e7ok zorland\u0131\u011f\u0131 konulardan biri CORS ve cookie ayarlar\u0131d\u0131r. API\u2019nizi ba\u015fka bir domain veya portta tuttu\u011funuzda, taray\u0131c\u0131 bunu \u201cfarkl\u0131 origin\u201d olarak g\u00f6r\u00fcr ve:<\/p>\n<ul>\n<li>Preflight (OPTIONS) istekleri,<\/li>\n<li>CORS header\u2019lar\u0131 (<code>Access-Control-Allow-Origin<\/code> vb.),<\/li>\n<li>SameSite, Secure, HttpOnly gibi cookie bayraklar\u0131<\/li>\n<\/ul>\n<p>g\u00fcndeme gelir. API\u2019yi <code>example.com\/api<\/code> alt\u0131nda tuttu\u011funuzda ise taray\u0131c\u0131 g\u00f6z\u00fcnde her \u015fey ayn\u0131 origin\u2019dedir; bu da CORS karma\u015fas\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kald\u0131r\u0131r. B\u00f6ylece <strong>cookie tabanl\u0131 session<\/strong> veya <strong>JWT + cookie<\/strong> yakla\u015f\u0131m\u0131n\u0131 \u00e7ok daha zahmetsiz y\u00f6netebilirsiniz.<\/p>\n<p>\u00d6zellikle kimlik do\u011frulama i\u00e7in cookie kullan\u0131yorsan\u0131z, SameSite ve Secure bayraklar\u0131n\u0131 do\u011fru ayarlamak kritik hale gelir. Bu konuda daha derine inmek isterseniz, <a href=\"https:\/\/www.dchost.com\/blog\/samesitelax-mi-strict-mi-secure-ve-httponly-ile-nginx-apachede-cerezleri-tertemiz-nasil-kurarsin\/\">SameSite, Secure ve HttpOnly bayraklar\u0131n\u0131 Nginx\/Apache \u00fczerinde nas\u0131l do\u011fru kurgulayaca\u011f\u0131n\u0131z\u0131 anlatt\u0131\u011f\u0131m\u0131z rehberi<\/a> inceleyebilirsiniz.<\/p>\n<h2><span id=\"Performans_ve_Onbellekleme_SPAlari_Ucurmak\">Performans ve \u00d6nbellekleme: SPA\u2019lar\u0131 U\u00e7urmak<\/span><\/h2>\n<p>SPA\u2019lar statik dosyalardan olu\u015ftu\u011fu i\u00e7in, Nginx gibi y\u00fcksek performansl\u0131 bir HTTP sunucusunun en sevdi\u011fi i\u015f y\u00fck\u00fcn\u00fc temsil ederler. Do\u011fru yap\u0131land\u0131rmayla hem TTFB\u2019yi d\u00fc\u015f\u00fcrmek hem de istemci taraf\u0131 \u00f6nbelleklemeden maksimum verim almak m\u00fcmk\u00fcn.<\/p>\n<h3><span id=\"Statik_dosyalar_icin_Cache-Control_basliklari\">Statik dosyalar i\u00e7in Cache-Control ba\u015fl\u0131klar\u0131<\/span><\/h3>\n<p>Derlenmi\u015f JavaScript ve CSS dosyalar\u0131 genellikle hash\u2019li isimlere sahiptir (\u00f6r. <code>app.7f3a2c.js<\/code>). Bu sayede, uzun s\u00fcreli \u00f6nbellekleme yapmak g\u00fcvenli hale gelir:<\/p>\n<pre class=\"language-nginx line-numbers\"><code class=\"language-nginx\">location ~* .(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n    root \/var\/www\/;\n    add_header Cache-Control &quot;public, max-age=31536000, immutable&quot;;\n}\n<\/code><\/pre>\n<p>Bu ayar, \u00f6zellikle mobil ve d\u00fc\u015f\u00fck ba\u011flant\u0131 h\u0131z\u0131na sahip kullan\u0131c\u0131lar i\u00e7in yeniden y\u00fckleme s\u00fcrelerinde ciddi fark yarat\u0131r.<\/p>\n<h3><span id=\"GzipBrotli_ve_HTTP23\">Gzip\/Brotli ve HTTP\/2\/3<\/span><\/h3>\n<p>SPA paketleri genellikle b\u00fcy\u00fck JavaScript bundle\u2019lar\u0131ndan olu\u015ftu\u011fu i\u00e7in, s\u0131k\u0131\u015ft\u0131rma (gzip veya brotli) b\u00fcy\u00fck kazan\u0131mlar sa\u011flar. Ayn\u0131 \u015fekilde HTTP\/2 veya HTTP\/3 (QUIC) kullanmak, \u00e7ok say\u0131da k\u00fc\u00e7\u00fck dosyan\u0131n paralel indirilmesinde avantaj sunar.<\/p>\n<p>Nginx taraf\u0131nda modern TLS ve Brotli\u2019yi nas\u0131l etkinle\u015ftirece\u011finizi ad\u0131m ad\u0131m g\u00f6rmek i\u00e7in, tekrar <a href=\"https:\/\/www.dchost.com\/blog\/nginxte-tls-1-3-ocsp-stapling-ve-brotli-nasil-kurulur-hizli-ve-guvenli-httpsnin-sicacik-rehberi\/\">Nginx + TLS 1.3 + Brotli rehberimize<\/a> bakabilirsiniz. Oradaki prensipleri do\u011frudan bu SPA mimarisine uygulayabilirsiniz.<\/p>\n<h2><span id=\"Dagitim_Deploy_Stratejisi_Zero-Downtime_Yayin_Akisi\">Da\u011f\u0131t\u0131m (Deploy) Stratejisi: Zero-Downtime Yay\u0131n Ak\u0131\u015f\u0131<\/span><\/h2>\n<p>Tek alan ad\u0131nda \u00e7oklu SPA ve API kullan\u0131yorsan\u0131z, en kritik konulardan biri de g\u00fcncelleme s\u0131ras\u0131nda kesinti ya\u015famamakt\u0131r. \u00d6zellikle canl\u0131 trafikli projelerde kullan\u0131c\u0131ya 500 hata g\u00f6stermek istemezsiniz.<\/p>\n<h3><span id=\"Surumlenmis_dizinler_ve_sembolik_link_yaklasimi\">S\u00fcr\u00fcmlenmi\u015f dizinler ve sembolik link yakla\u015f\u0131m\u0131<\/span><\/h3>\n<p>DCHost \u00fczerinde s\u0131k\u00e7a kulland\u0131\u011f\u0131m\u0131z pratik bir y\u00f6ntemden bahsedelim:<\/p>\n<ol>\n<li><strong>Her deploy\u2019da yeni bir klas\u00f6r:<\/strong> <code>\/var\/www\/react-20241201-1<\/code> gibi.<\/li>\n<li><strong>Stabil bir sembolik link:<\/strong> <code>\/var\/www\/react-current<\/code> linki daima son \u00e7al\u0131\u015fan s\u00fcr\u00fcm\u00fc i\u015faret eder.<\/li>\n<li><strong>Nginx konfig\u00fcrasyonu:<\/strong> Root olarak her zaman <code>react-current<\/code> g\u00f6sterilir.<\/li>\n<li><strong>Yeni s\u00fcr\u00fcm haz\u0131r oldu\u011funda:<\/strong> <code>react-current<\/code> linkini yeni dizine \u00e7evirip Nginx\u2019i <code>reload<\/code> edersiniz.<\/li>\n<\/ol>\n<p>Bu sayede Nginx bir anda yeni dosyalar\u0131 servis etmeye ba\u015flar; eski ba\u011flant\u0131lar ise do\u011fal \u00f6m\u00fcrlerini tamamlayana kadar eski s\u00fcr\u00fcmden cevap alabilir.<\/p>\n<p>S\u0131f\u0131r kesinti CI\/CD s\u00fcreci kurmak istiyorsan\u0131z, sembolik link + rsync + systemd kombinasyonunu anlatt\u0131\u011f\u0131m\u0131z <a href=\"https:\/\/www.dchost.com\/blog\/vpse-sifir-kesinti-ci-cd-nasil-kurulur-rsync-sembolik-surumler-ve-systemd-ile-sicacik-bir-yolculuk\/\">VPS\u2019e s\u0131f\u0131r kesinti CI\/CD kurulumu rehberimize<\/a> mutlaka g\u00f6z at\u0131n; oradaki yakla\u015f\u0131m\u0131 SPA build\u2019lerinize kolayca uyarlayabilirsiniz.<\/p>\n<h3><span id=\"API_icin_bluegreen_veya_canary_yaklasimlari\">API i\u00e7in blue\/green veya canary yakla\u015f\u0131mlar\u0131<\/span><\/h3>\n<p>API taraf\u0131nda risk daha y\u00fcksek oldu\u011fu i\u00e7in, blue\/green veya canary deployment stratejileri kullanmak mant\u0131kl\u0131 olabilir. \u00d6rne\u011fin:<\/p>\n<ul>\n<li><code>api_v1<\/code> upstream\u2019ine giden trafi\u011fi yava\u015f yava\u015f <code>api_v2<\/code> upstream\u2019ine kayd\u0131rmak,<\/li>\n<li>Belirli IP aral\u0131klar\u0131n\u0131 veya header\u2019lar\u0131 yeni s\u00fcr\u00fcme y\u00f6nlendirip k\u00fc\u00e7\u00fck bir kullan\u0131c\u0131 grubuyla denemek,<\/li>\n<li>Hata durumunda h\u0131zl\u0131 rollback yapabilecek bir konfig\u00fcrasyon haz\u0131rlamak<\/li>\n<\/ul>\n<p>Bu konuyu daha derinlemesine ele ald\u0131\u011f\u0131m\u0131z, Nginx a\u011f\u0131rl\u0131kl\u0131 canary da\u011f\u0131t\u0131m stratejilerini i\u00e7eren rehberlerimiz de mevcut; ihtiyac\u0131n\u0131za g\u00f6re DCHost ekibiyle birlikte size \u00f6zel bir plan da \u00e7\u0131karabiliriz.<\/p>\n<h2><span id=\"DCHost_Uzerinde_Ornek_Bir_Senaryo\">DCHost \u00dczerinde \u00d6rnek Bir Senaryo<\/span><\/h2>\n<p>Ger\u00e7ek\u00e7i bir \u00f6rnek kural\u0131m. Diyelim ki bir SaaS \u00fcr\u00fcn\u00fcn\u00fcz var:<\/p>\n<ul>\n<li><strong>M\u00fc\u015fteri aray\u00fcz\u00fc:<\/strong> React ile yaz\u0131lm\u0131\u015f, <code>\/app<\/code> alt\u0131nda.<\/li>\n<li><strong>Y\u00f6netim paneli:<\/strong> Vue ile yaz\u0131lm\u0131\u015f, <code>\/admin<\/code> alt\u0131nda.<\/li>\n<li><strong>Raporlama mod\u00fcl\u00fc:<\/strong> Angular ile yaz\u0131lm\u0131\u015f, <code>\/reports<\/code> alt\u0131nda.<\/li>\n<li><strong>REST API:<\/strong> Node.js + PostgreSQL, <code>\/api<\/code> alt\u0131nda.<\/li>\n<\/ul>\n<p>DCHost\u2019ta orta seviye bir NVMe VPS \u00fczerinde a\u015fa\u011f\u0131daki yap\u0131y\u0131 kurabilirsiniz:<\/p>\n<ul>\n<li>Nginx: 443 portunda TLS sonland\u0131rma, \/app, \/admin, \/reports i\u00e7in statik dosya servisi, \/api i\u00e7in reverse proxy,<\/li>\n<li>Node.js API: 127.0.0.1:4000 \u00fczerinde, PM2 veya systemd ile y\u00f6netiliyor,<\/li>\n<li>PostgreSQL: Ayn\u0131 VPS\u2019te veya ayr\u0131 bir veritaban\u0131 VPS\u2019inde,<\/li>\n<li>Yedekleme: G\u00fcnl\u00fck veritaban\u0131 dump\u2019\u0131 + haftal\u0131k tam yedek, S3 uyumlu depolama veya ikinci bir lokasyona kopyalan\u0131yor.<\/li>\n<\/ul>\n<p>Bu mimariyi \u00fcretim ortam\u0131na al\u0131rken; DNS, SSL, yedekleme ve RPO\/RTO hedeflerinizi de planlamay\u0131 unutmay\u0131n. \u00d6zellikle blog, e-ticaret veya SaaS projelerinde yedekleme stratejisini nas\u0131l planlayaca\u011f\u0131n\u0131z\u0131 merak ediyorsan\u0131z, <a href=\"https:\/\/www.dchost.com\/blog\/yedekleme-stratejisi-nasil-planlanir-blog-e-ticaret-ve-saas-siteleri-icin-rpo-rto-rehberi\/\">RPO\/RTO odakl\u0131 yedekleme rehberimizi<\/a> inceleyebilirsiniz.<\/p>\n<h2><span id=\"DNS_TTL_ve_Tasima_Senaryolari\">DNS, TTL ve Ta\u015f\u0131ma Senaryolar\u0131<\/span><\/h2>\n<p>Bazen var olan bir projeyi farkl\u0131 bir mimariye ta\u015f\u0131rken, \u00f6rne\u011fin \u00fc\u00e7 ayr\u0131 sunucuda \u00e7al\u0131\u015fan React, Vue ve Angular uygulamalar\u0131n\u0131 DCHost\u2019ta tek bir Nginx arkas\u0131nda toplarken, DNS ve TTL ayarlar\u0131 kritik hale gelir. Yanl\u0131\u015f planlanm\u0131\u015f bir DNS ge\u00e7i\u015fi; kullan\u0131c\u0131lar\u0131n bir k\u0131sm\u0131n\u0131n eski, bir k\u0131sm\u0131n\u0131n yeni ortama gitmesine yol a\u00e7abilir.<\/p>\n<p>Bu gibi ge\u00e7i\u015flerde:<\/p>\n<ul>\n<li>Ge\u00e7i\u015ften birka\u00e7 g\u00fcn \u00f6nce TTL de\u011ferlerini d\u00fc\u015f\u00fcrmek,<\/li>\n<li>Ta\u015f\u0131ma s\u0131ras\u0131nda kaynak IP de\u011fi\u015fimini dikkatlice zamanlamak,<\/li>\n<li>Ge\u00e7i\u015f tamamland\u0131ktan sonra TTL\u2019i tekrar makul seviyelere y\u00fckseltmek<\/li>\n<\/ul>\n<p>i\u015finizi \u00e7ok kolayla\u015ft\u0131r\u0131r. Zero-downtime DNS stratejilerini detayl\u0131 anlatt\u0131\u011f\u0131m\u0131z <a href=\"https:\/\/www.dchost.com\/blog\/zero-downtime-tasima-icin-ttl-stratejileri-dns-yayilimini-gercekten-nasil-hizlandirirsin\/\">TTL ve DNS yay\u0131l\u0131m\u0131 odakl\u0131 rehberimiz<\/a>, \u00f6zellikle SPA + API altyap\u0131s\u0131n\u0131 yeni bir ortama ta\u015f\u0131rken elinizin alt\u0131nda olmal\u0131.<\/p>\n<h2><span id=\"Guvenlik_ve_Bakim_Loglar_WAF_ve_Guncellemeler\">G\u00fcvenlik ve Bak\u0131m: Loglar, WAF ve G\u00fcncellemeler<\/span><\/h2>\n<p>Tek alan ad\u0131nda birden fazla SPA ve API bar\u0131nd\u0131r\u0131rken, g\u00fcvenlik perspektifini de b\u00fct\u00fcn olarak d\u00fc\u015f\u00fcnmek gerekir:<\/p>\n<ul>\n<li><strong>Access ve error log analizi:<\/strong> 4xx\u20135xx hatalar\u0131, beklenmedik pattern\u2019leri g\u00f6rmek i\u00e7in d\u00fczenli log incelemesi yap\u0131n.<\/li>\n<li><strong>WAF ve rate limiting:<\/strong> Brute-force, tarama (scan) ve k\u00f6t\u00fc niyetli bot trafi\u011fini s\u0131n\u0131rlamak i\u00e7in Nginx rate limiting veya harici bir WAF kullan\u0131n.<\/li>\n<li><strong>SSL ve protokol g\u00fcncellemeleri:<\/strong> TLS versiyonlar\u0131n\u0131 ve \u015fifre paketlerini periyodik olarak g\u00f6zden ge\u00e7irin.<\/li>\n<li><strong>Yedekler ve test restore:<\/strong> Sadece yedek almak de\u011fil, geri y\u00fckleme s\u00fcrecini test etmek de kritik.<\/li>\n<\/ul>\n<p>SSL taraf\u0131nda hangi t\u00fcr sertifikan\u0131n (DV, OV, EV, wildcard) hangi senaryoda mant\u0131kl\u0131 oldu\u011funu ve g\u00fcvenlik g\u00fcncellemelerini hangi s\u0131kl\u0131kla yapman\u0131z gerekti\u011fini anlamak i\u00e7in, <a href=\"https:\/\/www.dchost.com\/blog\/ssl-sertifikasi-nedir-web-sitenizi-guvence-altina-almanin-yollari\/\">SSL sertifikas\u0131n\u0131n temel kavramlar\u0131n\u0131 anlatt\u0131\u011f\u0131m\u0131z rehbere<\/a> ve <a href=\"https:\/\/www.dchost.com\/blog\/ssl-tls-protokol-guncellemeleri-modern-https-icin-net-yol-haritasi\/\">SSL\/TLS protokol g\u00fcncellemeleriyle ilgili yol haritas\u0131 yaz\u0131m\u0131za<\/a> da g\u00f6z atabilirsiniz.<\/p>\n<h2><span id=\"Sonuc_SPAlarinizi_Toplayin_Mimariniz_Sadelessin\">Sonu\u00e7: SPA\u2019lar\u0131n\u0131z\u0131 Toplay\u0131n, Mimariniz Sadelessin<\/span><\/h2>\n<p>React, Vue ve Angular ile geli\u015ftirdi\u011finiz farkl\u0131 SPA\u2019lar\u0131 ve bunlara hizmet veren API\u2019yi ayn\u0131 alan ad\u0131nda toplamak ilk bak\u0131\u015fta karma\u015f\u0131k g\u00f6r\u00fcnebilir; ama do\u011fru Nginx y\u00f6nlendirme kurallar\u0131 ve sa\u011flam bir SSL\/HTTPS mimarisiyle, asl\u0131nda i\u015fleri sadele\u015ftirirsiniz. CORS ve cookie problemleri azal\u0131r, da\u011f\u0131t\u0131m s\u00fcre\u00e7leriniz daha tutarl\u0131 hale gelir, monitoring ve g\u00fcvenlik politikalar\u0131n\u0131z\u0131 tek bir giri\u015f noktas\u0131nda merkezile\u015ftirebilirsiniz.<\/p>\n<p>DCHost\u2019ta, ister tek bir NVMe VPS \u00fczerinde, ister ayr\u0131 API ve veritaban\u0131 sunucular\u0131na b\u00f6l\u00fcnm\u00fc\u015f daha geli\u015fmi\u015f bir mimaride \u00e7al\u0131\u015f\u0131n; Nginx reverse proxy, TLS yap\u0131land\u0131rmas\u0131, yedekleme ve \u00f6l\u00e7eklendirme konular\u0131nda yan\u0131n\u0131zday\u0131z. Mevcut projenizi bu yap\u0131ya ta\u015f\u0131may\u0131 veya yeni projenizi ba\u015ftan b\u00f6yle kurgulamay\u0131 d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z, altyap\u0131 ihtiya\u00e7lar\u0131n\u0131z\u0131 birlikte de\u011ferlendirebilir, size \u00f6zel bir plan \u00e7\u0131karabiliriz.<\/p>\n<p>\u0130sterseniz bug\u00fcn k\u00fc\u00e7\u00fck bir pilot ortamla ba\u015flay\u0131n: Tek bir domain, tek bir Nginx, bir React veya Vue uygulamas\u0131 ve basit bir API. Mimarinin oturdu\u011funu g\u00f6rd\u00fck\u00e7e, Angular panelinizi, yeni mod\u00fcllerinizi ve ek servislerinizi de ayn\u0131 iskelete g\u00fcvenle ekleyebilirsiniz.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0130&ccedil;indekiler1 Tek Alan Ad\u0131, \u00c7oklu SPA ve API: Neden U\u011fra\u015fmaya De\u011fer?2 Genel Mimari: React, Vue, Angular ve API\u2019yi Nereye Yerle\u015ftiriyoruz?3 Nginx ile Y\u00f6nlendirme: \/react, \/vue, \/panel ve \/api Ayr\u0131m\u01313.1 Temel server blo\u011fu3.2 History Mode ve 404 Tuzaklar\u01313.3 API \u0130\u00e7in Reverse Proxy Ayr\u0131nt\u0131lar\u01314 SSL ve HTTPS Mimarisi: Tek Sertifika ile \u00c7oklu SPA4.1 HTTP\u2019den HTTPS\u2019e Y\u00f6nlendirme ve [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3117,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-3116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknoloji"],"_links":{"self":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/3116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/comments?post=3116"}],"version-history":[{"count":0,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/posts\/3116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media\/3117"}],"wp:attachment":[{"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/media?parent=3116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/categories?post=3116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dchost.com\/blog\/wp-json\/wp\/v2\/tags?post=3116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}