{"id":8282,"date":"2025-01-01T06:00:13","date_gmt":"2025-01-01T03:00:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/awsde-cdk-ve-typescript-ile-basit-statik-web-sitesi-yayinlama\/"},"modified":"2025-01-01T06:00:13","modified_gmt":"2025-01-01T03:00:13","slug":"awsde-cdk-ve-typescript-ile-basit-statik-web-sitesi-yayinlama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/awsde-cdk-ve-typescript-ile-basit-statik-web-sitesi-yayinlama\/","title":{"rendered":"AWS’de CDK ve TypeScript ile Basit Statik Web Sitesi Yay\u0131nlama"},"content":{"rendered":"

<\/p>\n

AWS’de CDK ve TypeScript ile Basit Statik Web Sitesi Yay\u0131nlama<\/p>\n

Merhaba! Bu makalede, AWS Cloud Development Kit (CDK) ve TypeScript kullanarak basit bir statik web sitesini nas\u0131l kolayca Amazon S3 ve Amazon CloudFront kullanarak yay\u0131nlayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m anlataca\u011f\u0131m. Bu y\u00f6ntem, geleneksel y\u00f6ntemlere g\u00f6re daha otomatik ve y\u00f6netilebilir bir s\u00fcre\u00e7 sunar. \u00d6ncelikle, gerekli olan AWS hesap bilgilerinizin ve Node.js ile npm’nin kurulu oldu\u011fundan emin olmal\u0131s\u0131n\u0131z. Ba\u015flayal\u0131m!<\/p>\n

Gerekli Haz\u0131rl\u0131klar<\/h2>\n

\u00d6ncelikle, bir AWS hesab\u0131n\u0131z olmal\u0131 ve AWS CLI’n\u0131z\u0131 yap\u0131land\u0131rm\u0131\u015f olmal\u0131s\u0131n\u0131z. Ayr\u0131ca, Node.js ve npm’nin sisteminizde kurulu oldu\u011fundan emin olun. CDK’y\u0131 global olarak kurmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n

npm install -g aws-cdk<\/code><\/pre>\n
Sonras\u0131nda, yeni bir proje olu\u015ftural\u0131m.  Proje dizinine ge\u00e7tikten sonra a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
cdk init app --language typescript<\/code><\/pre>\n
Projenin Yap\u0131land\u0131r\u0131lmas\u0131<\/h2>\n
 Olu\u015fturulan proje i\u00e7inde,  lib\/<\/code> dizininde bulunan stack.ts<\/filename><\/code> dosyas\u0131n\u0131 a\u00e7\u0131n.  Bu dosya, AWS kaynaklar\u0131n\u0131z\u0131 tan\u0131mlayaca\u011f\u0131n\u0131z yerdir. A\u015fa\u011f\u0131daki kod, bir S3 bucket’\u0131 ve bir CloudFront da\u011f\u0131t\u0131m\u0131n\u0131 tan\u0131mlar. Bu kod, statik web sitenizi bar\u0131nd\u0131racak ve h\u0131zl\u0131 bir \u015fekilde sunacakt\u0131r.<\/p>\n
import * as cdk from 'aws-cdk-lib';\nimport * as s3 from 'aws-cdk-lib\/aws-s3';\nimport * as cloudfront from 'aws-cdk-lib\/aws-cloudfront';\nimport * as origins from 'aws-cdk-lib\/aws-cloudfront-origins';\nimport { Construct } from 'constructs';\n\nexport class MyStack extends cdk.Stack {\n  constructor(scope: Construct, id: string, props?: cdk.StackProps) {\n    super(scope, id, props);\n\n    const bucket = new s3.Bucket(this, 'MyWebsiteBucket', {\n      websiteIndexDocument: 'index.html',\n      publicReadAccess: true,\n    });\n\n    new cloudfront.Distribution(this, 'MyWebsiteDistribution', {\n      defaultBehavior: {\n        origin: new origins.S3Origin(bucket),\n        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,\n      },\n    });\n  }\n}\n<\/code><\/pre>\n
Bu kodda,  s3.Bucket<\/code> ile bir S3 bucket’\u0131 olu\u015fturuyoruz.  websiteIndexDocument<\/code> \u00f6zelli\u011fi, ana sayfan\u0131n ad\u0131n\u0131 belirler.  publicReadAccess<\/code> ise, herkesin eri\u015febilmesini sa\u011flar.  Ard\u0131ndan, cloudfront.Distribution<\/code> ile bir CloudFront da\u011f\u0131t\u0131m\u0131 olu\u015fturarak S3 bucket’\u0131n\u0131 CDN olarak kullan\u0131yoruz.  Bu, i\u00e7eri\u011fin daha h\u0131zl\u0131 bir \u015fekilde sunulmas\u0131n\u0131 sa\u011flar.<\/p>\n
Kodun Yay\u0131nlanmas\u0131<\/h2>\n
Kodunuz haz\u0131r olduktan sonra,  a\u015fa\u011f\u0131daki komut ile  AWS’ye yay\u0131nlayabilirsiniz:<\/p>\n
cdk deploy<\/code><\/pre>\n
Bu komut,  CDK taraf\u0131ndan tan\u0131mlanan kaynaklar\u0131 AWS hesab\u0131n\u0131za da\u011f\u0131t\u0131r.  Da\u011f\u0131t\u0131m tamamland\u0131ktan sonra, CloudFront da\u011f\u0131t\u0131m\u0131n\u0131n URL’sini  alabilirsiniz. Bu URL, statik web sitenizin eri\u015fim adresidir. Bu adres, h\u0131zl\u0131 ve g\u00fcvenli bir \u015fekilde web sitenize eri\u015fmenizi sa\u011flayacakt\u0131r.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede,  CDK ve TypeScript kullanarak basit bir statik web sitesini AWS’ye nas\u0131l yay\u0131nlayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterdim.  Bu y\u00f6ntem,  kod tabanl\u0131 altyap\u0131 y\u00f6netimi sa\u011flad\u0131\u011f\u0131 i\u00e7in daha otomatik ve \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm sunar. Daha karma\u015f\u0131k projeler i\u00e7in bu temel yap\u0131 \u00fczerine ek \u00f6zellikler ekleyebilirsiniz.  Umar\u0131m bu makale faydal\u0131 olmu\u015ftur!  Daha fazla AWS ve CDK e\u011fitimi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 Kaynaklar:<\/b><\/p>\n