AWS S3 statik web sitesi kurma problemi

[lovecraft0Z]

Benim AWS de domain name im ve sertifikası approved olarak bulunmakta, S3 te statik olarak depoladığım bir web sitesini bu domain den sunmak istiyorum. Gerekli bağlantıları yaptım, S3 teki linkten site açılıyor ama domain im çalışmıyor, yardımcı olabilecek var mıdır

[reampage]

 

alias olarak sectigin zaman sana direk s3 website enpointini yonlendiriyor o zaman. ama s3 bucket ismi ile subdomain ismi tutmali sanirim sart degil ama bucket isimleri uniq oldugu icin sorun olabiliyormus. Bide s3u disari acmak gerekli. 

Nisan 19, 2023 reampage tarafından düzenlendi

[lovecraft0Z]

Abi hepsini yaptım

1. s3 bucket açtım public yaptım, gerekli policy ımı yazdım

2. certification manager dan certificate im hazır

3. Route 53 ten domain name im zaten aws den almıştım, içinde A record açtım alias tan direk s3 linkine yönlendiriyorum

4. s3 buvket ismi ile domain ismi direk aynı

 

Olmuyor yav bir türlü. Farklı farklı şekillerde denedim, http yapabildim bir ara ama https olmuyor. Cloudfront tan bile distribution açtım falan yine yok

[reampage]

abi ayni makineden olmayabiliyor, sey denermisin telefondan filan isp degistirip.

[lovecraft0Z]

Aa hakkaten telden wifi yı kapatıp celular girdim oldu yav https

çerezleri vs sileyim temizleyeyim modem restart falan pc den de olur heralde, çok sağol usta 

Nisan 19, 2023 lovecraft0Z tarafından düzenlendi

[roket adam]

Sorunun çözülmüş ama bir tavsiye vereyim, eğer amacın free tier'dan faydalanmaksa bence S3 üzerinden statik web sitesi sunmak riskli, çünkü kart bilgini veriyorsun ve siten çok hit alırsa free tier'ın dışında kalma ihtimalin yüksek. 

Onun yerine Cloudflare Pages çok daha iyi görünüyor şu an, ve github üzerinden direkt senkronize olabildiği için tertemiz bir workflow sunuyor. Üstelik bele$

[sequoi]

 

roket adam, 20.04.2023 11:28 tarihinde dedi ki:

Sorunun çözülmüş ama bir tavsiye vereyim, eğer amacın free tier'dan faydalanmaksa bence S3 üzerinden statik web sitesi sunmak riskli, çünkü kart bilgini veriyorsun ve siten çok hit alırsa free tier'ın dışında kalma ihtimalin yüksek. 

Onun yerine Cloudflare Pages çok daha iyi görünüyor şu an, ve github üzerinden direkt senkronize olabildiği için tertemiz bir workflow sunuyor. Üstelik bele$

Cloudflare'inde olayı şu beleş evet aa şuanlık bir anda 5$ zorunluluk getirceklerdir bir kaç aya hep aynısını yapiyor once topluyor herkesi sonra 5$ istiyor insanlar mecbur odemek zorundakalıyor. Ama react bilyorsanız github kullanarak ömür boyu clloudflare'i bedava kullanabileceğiniz bir alan var neredir workersler.

 

Bir workers oluşturup onu bir domaine atayıp workers içinde before fetch fonksiyonu yzarsanız domaine gelenistekleri fetch etmeden önce githubdan dilediğiniz urlyi raw olarak okuyup ona göre dizayn oluşturabilirsiniz. 

örneğin 

async function handleRequest(req) {
  const res = await fetch(req, {
      headers: {
        'Referer': 'https://github.com/', //and this for referer
        'Cache-Control': 'no-cache',
        'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36'
      }
    })
  return new Response(
        res.body,
        {
            status: res.status,
            statusText: res.statusText,
            headers: translateResponseLocation(res.headers),
            cf: { cacheTtlByStatus: { "200-299": 1296000, 404: 1, "500-599": 0 } } 
        }
    )  
}

addEventListener('fetch', event => {
   //normal istek yapilan url event.request.url ama biz bunu salliyoruz  
  let url = "https://raw.github.com/hobele/dubele/page.ext";
  let request = new Request(url, event.request);
  event.respondWith(handleRequest(request));
})

şeklinde worker yaratıyorus bu workeri domainimize alias olarak https://domain.com/* şeklide ekliyoruz daha soınra page rules den https://Domain.com/* cache everyting = yes seçiyoruz normal caching  bölümnden browser cache ttl i respect existing headers yapyoruz.

 

bu kadar.

[sequoi]

bu arada translateResponseLocation(); fonksiyonunu eklemeyiunutmuşun gelen headerleri silmek yada değiştirmek için kullancağınız fonksiyon

function translateResponseLocation(headers) {
  const newHeaders = new Headers(headers);
  newHeaders.delete("access-contol-allow-origin")
  newHeaders.delete("Access-Control-Allow-Origin")       
  newHeaders.delete("content-security-policy") 
  newHeaders.delete("set-cookie")
  newHeaders.delete("x-connection-hash")
  newHeaders.delete("server")
  newHeaders.delete("x-powered-by")
  newHeaders.delete("x-tw-cdn")
  newHeaders.delete("etag")
  newHeaders.delete("strict-transport-security")
  newHeaders.delete("vary")
  newHeaders.delete("x-frame-options")
  newHeaders.delete("x-xss-protection")
  newHeaders.delete("x-cache")
  newHeaders.delete("last-modified")
  newHeaders.delete("date")
  newHeaders.delete("x-response-time")
  newHeaders.delete("Cache-Control")  
  newHeaders.set("Access-Control-Allow-Origin","https://domaininiz.com")       
  return newHeaders;
}