AWS Amplify ile Tam Yığınlı React Uygulaması Oluşturma

Rota özeti

Bu kılavuz, bir uygulama oluşturma sürecini adım adım anlatmaktadır. Tam Yığın React tabanlı olarak AWS Amplify Genel süreç, geliştirme ortamının hazırlanmasını, ön yüzün oluşturulmasını, Amplify ile arka yüzün eklenmesini, ön yüzün servislere bağlanmasını, dağıtımını, alan adının ve CDN'nin bağlanmasını ve güvenlik ile izleme ayarlarının yapılandırılmasını içerir.

Önkoşullar ve araçların kurulumu (Yerel)

Geliştirme makinesinde bulunması gerekenler:

• Düğüm.js (>=14) ve npm veya yarn
• Git
• Amplify CLI

Amplify CLI'yı yüklemek için örnek komutlar:

npm install -g @aws-amplify/cli
# or
yarn global add @aws-amplify/cli

İlk yapılandırma için:

amplify configure

React uygulaması oluşturma

Bir React projesi başlatmak için Create React App veya Vite kullanabilirsiniz. Create React App ile örnek:

npx create-react-app my-amplify-app
cd my-amplify-app
git init
git add .
git commit -m "initial commit"

Projeye Amplify kütüphanelerini yükleme:

npm install aws-amplify @aws-amplify/ui-react

Amplify ile Backend Ekleme

Proje klasöründe öncelikle Amplify'ı başlatın:

amplify init

Önemli parametreler yükseltme başlangıcı Ortam adını içerir (örneğin, geliştirici), editör, çerçeve (javascript, react), kaynak ve derleme yolları ve derleme/başlatma komutları.

1) Kimlik Doğrulama (Auth)

Kimlik doğrulama eklemek için:

amplify add auth

Özellikler: Varsayılan yapılandırma (Kullanıcı adı), sosyal sağlayıcılar (Google, Facebook) için manuel yapılandırma veya Cognito Kimlik Havuzu ile federasyon.

2) API (GraphQL veya REST)

GraphQL için:

amplify add api

GraphQL ve örnek bir şema seçimi:

type Todo @model {
  id: ID!
  title: String!
  completed: Boolean!
}

REST için (API Ağ Geçidi + Lambda):

amplify add api
# choose REST
# then add function for endpoint

3) Lambda Fonksiyonları

Yoğun işlem gücü gerektiren durumlar veya Webhook'lar için:

amplify add function

Dil: Node.js veya Python. Tür: Lambda fonksiyonu (CRUD, işleyici).

4) Dosya depolama (Depolama)

S3'ü dosya yüklemeye eklemek için:

amplify add storage

Tür: İçerik (Resimler, dosyalar).

Gerekli hizmetleri ekledikten sonra değişiklikleri uygulayın:

amplify push

Bu komut, Cognito, AppSync, Lambda, S3 gibi bulut kaynakları oluşturur ve yapılandırma dosyasını kaydeder. src/aws-exports.js Bu, ortaya koyuyor.

Ön Uçtan Arka Uca Bağlantı

Dosyada src/index.js Veya App.js Amplify yapılandırmasını ekleyin:

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

Auth kullanımına örnek:

import { Auth } from "aws-amplify";
// Sign up
await Auth.signUp({ username, password, attributes: { email } });
// Sign in
await Auth.signIn(username, password);

GraphQL kullanımına örnek:

import { API, graphqlOperation } from "aws-amplify";
import { listTodos } from "./graphql/queries";
const result = await API.graphql(graphqlOperation(listTodos));

Güvenlik İpuçları ve En İyi Uygulamalar

Önemli güvenlik ipuçları:

• Prensip En Az Ayrıcalıklı Dikkatli olun; IAM rollerine yalnızca gerekli izinleri verin.
• Kullanımı AWS Secrets Manager Veya Sistem Yöneticisi Parametre Deposu Sırları saklamak için.
• Hassas erişime sahip IAM kullanıcıları için çok faktörlü kimlik doğrulamayı (MFA) etkinleştirin.
• HTTPS ve HSTS'yi etkinleştirin ve Katman 7 saldırılarına karşı korunmak için WAF ve hız sınırlaması kullanın.
• Hizmetler için hem depolama hem de iletim sırasında şifreleme.
• React uygulamasında CORS kısıtlamaları ve İçerik Güvenlik Politikası uygulaması.

Dağıtım ve Sürekli Entegrasyon/Sürekli Dağıtım

Dağıtım için iki ana yöntem:

Yöntem 1: Amplify Console

En kolay yol: Amplify Konsolunda yeni bir uygulama oluşturun ve GitHub/GitLab/Bitbucket deponuzu bağlayın. Amplify otomatik olarak derleme -> test -> dağıtım için bir işlem hattı oluşturacaktır.

Örnek dosya amplify.yml CRA projesi için:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Ortam değişkenlerini ve gizli bilgileri Derleme ayarları bölümünde ayarlayın.

Yöntem 2: Harici CI/CD + Amplify Hosting API

GitLab CI/CD veya GitHub Actions ile derleme yapabilir ve derleme dosyasını S3 + CloudFront'a gönderebilir veya Amplify Hosting API'sini kullanabilirsiniz.

Alan adı ve CDN bağlantısı

Amplify Console, alan adı bağlantısı ve otomatik SSL yapılandırmasına olanak tanır. AWS Sertifika Yöneticisi Öyle oldu.

DNS için şunları kullanabilirsiniz: 53 Numaralı Rota Veya Anycast CDN ve birden fazla uç konum ile harici hizmetler kullanın. Gecikmeyi azaltmak ve yükleme hızını artırmak için bir CDN (CloudFront veya harici CDN) kullanmak şarttır.

Kararlılık, Gecikme ve Konum Seçimi

API gecikmesini azaltmak için uygun bölgeyi seçin ve yoğun işlem gücü gerekiyorsa, sunucusuz olmayan bir arka uç olarak GPU sunucuları veya bağlantı özelliğine sahip özel sunucular kullanın.

Alım satım yapanlar veya oyuncular için, gecikmeyi azaltmak adına Londra, Frankfurt ve New York gibi yerler genellikle iyi seçeneklerdir. Ayrıca, hassas durumlarda DDoS saldırılarına karşı koruma sağlayan bir sunucu kullanın.

Örnek: Sunucu tarafı işlemler için GPU Cloud kullanımı

Uygulamanız makine öğrenimi modellerinden çıkarım yapmayı gerektiriyorsa:

• Hafif modeller için Lambda'yı, ağır modeller için ise GPU sunucusunda çalışan bir hizmeti kullanın.
• Güvenli bir uç nokta (HTTPS) oluşturun ve bunu React'ten fetch veya axios kullanarak çağırın.
• Gerçek zamanlı bilgiye ihtiyacınız varsa, WebSocket kullanın.

İzleme, kayıt tutma ve sorun giderme

Önerilen araçlar:

• Lambda, API Gateway ve AppSync için CloudWatch Metrikleri ve Alarmları.
• İstek izleme için AWS X-Ray'i etkinleştirin.
• S3 günlüklerini ve CloudFront günlüklerini inceleyin.
• Ön uç hata ayıklama için Sentry gibi üçüncü taraf hizmetlerle entegrasyon.

Maliyet optimizasyonu

Maliyetleri düşürmeye yönelik öneriler:

• Boşta kalma maliyetlerini azaltmak için sunucusuz kaynaklar (Lambda, AppSync) kullanın.
• Sürekli yükler için uygun yapılandırmaya sahip bulut sunucuları veya VPS kullanın.
• Uzun vadeli maliyetleri azaltmak için otomatik ölçeklendirmeyi etkinleştirin ve Ayrılmış Örnekler veya Tasarruf Planları kullanın.
• Arka uca yapılan istek sayısını azaltmak için CDN ve önbellekleme kullanın.

DevOps ekipleri ve ağ yöneticileri için pratik ipuçları

Stratejiler:

• Kod Olarak Altyapı: Altyapı sürümleme için CloudFormation, Terraform veya Amplify'ın backend-config'ini kullanın.
• Özel bağlantıya ihtiyacınız varsa, Lambda fonksiyonlarını bir VPC ile kurun ve Transit Gateway veya VPN kullanın.
• Erişim kontrol listeleri (ACL) ve güvenlik grupları yapılandırmasını ince ayar yapın.
• GitLab barındırma hizmetine veya Runner'lar üzerinde tam kontrole ihtiyacınız varsa, GitLab'ı özel hizmetlerde barındırmak mümkündür.

Üretime başlamadan önce kontrol listesi

• Kimlik doğrulama ve yetkilendirme testleri yapıldı (Cognito, IAM politikaları).
• HTTPS ve SSL sertifikası etkinleştirildi.
• Aktif kayıt ve izleme
• Hız sınırlama ve WAF yapılandırıldı
• Ön uçta CORS ve CSP yapılandırılmıştır.
• Yedekleme ve kurtarma stratejisi (S3 sürümleme, anlık görüntüler)
• Yük testi ve performans optimizasyonu

Sonuç ve özet

Kullanımı AWS Amplify Modern uygulamaların geliştirilmesini ve dağıtımını hızlı ve tekrarlanabilir hale getirir. Üretim ortamları için güvenlik, izleme, konum seçimi ve maliyet modeline özel önem verilmelidir.

Yoğun işlem gücü gerektiren veya düşük gecikme süresine ihtiyaç duyan projeler için Amplify'ı bulut sunucuları, GPU Cloud veya özel VPS ile birleştirmek en uygun çözüm olabilir.

Sıkça Sorulan Sorular