Yazılım konusunda ilerlemeye devam ediyorum. Bu makalede yeni edindiğim bilgileri paylaşacağım.
Öncelikle Backendi .NET Core olan Frontendi Angular Universal olarak bir e-ticaret sitesi hazırlıyor olsaydanız katmanlar nasıl olurdu hızlıca bir göz atalım tekrardan:
- Commerce.Buyer / Angular Universal SSR projesi (web sitesi)
- Commerce.Seller / Angular Universal proje
- Commerce.Api / .NET Core Web API projesi
- Commerce.Service / .NET Core sınıf kitaplığı
- Commerce.Infrastructure / .NET Core sınıf kitaplığı
- Commerce.Data / .NET Core sınıf kitaplığı
- Commerce.Model / .NET Core sınıf kitaplığı
- Commerce.Tests / .NET Core NUnit proje
Tüm katmanları gördünüz. Ancak yakın zamanda .NET Core’un Application Insights ve Telemetery kütüphanelerinin casusluk yaptığına dair bilgiye ulaştım. Windows 10’da bulunan Telemetery hizmeti bilgisayarınızda bilgileri arka planda Microsoft sunucularına gönderiyor. Bu bilgileri yapay zekaları eğitmek için kullanıyorlar diye tahmin ediyorum. Bill Gates geçenlerde bu işi 20 yıl önce yapmadığına pişman olduğunu ifade etmişti.
Anlayacağınız Windows KVKK açısından güvenli bir işletim sistemi değil. .NET Core ‘da aynı şekilde.
Ancak .NET Core’u Linux üzerinde kullandığınızda Application Insights/Telemetery entegrasyonu çalışmıyor.
Bu durumda KVKK uyumlu yazılım geliştirmek istiyorsanız şunlara dikkat etmelisiniz.
- Pardus işletim sistemini kullanın, Pardus’u hem backend sunucusu hem de geliştirim ortamı olarak kullanabilirsiniz.
- SQL Server’ı ve .NET Core’u Pardus'(lar)a yükleyin.
- SQL Server’ı TDE ile şifreleyin ve güvenlik özelliklerini aktifleştirin.
- SQL Server’daki ApplicationUser entity’sindeki ve varsa diğer entitylerdeki kişisel verileri ProtectedPersonalData attribute’unu kullanarak şifreleyin.
- Şifreleme algoritmalarında RSA, SHA1, SHA256 eski algoritmalar yerine post-kuantum güvenlik algoritmalarını tercih edin.
- Yurtdışı bulutları yerine yurtiçi bulutları tercih edin.
- Veritabanı AuditLog’unu etkinleştirin.
- EntityFramework için AuditLog geliştirin.
- Oturum açma/kapama işlemlerini ve kişisel verilere erişimleri loglayın.
- Loglardaki tarih/saat verilerini güvenli zaman-damgalarıyla üretip kaydedin.
- Logları koruyun.
Kaspersky siber saldırıların artış göstereceği bir döneme gireceğimiz konusunda bizleri uyarmıştı. Gerekli önlemleri aldığınızda hem kişisel verileri korumuş olacak hem de siber saldırılara dirençli olacaksınız.
Şimdi gelelim asıl konumuza…
Angular Universal ile bir e-ticaret sitesi hazırlıyorsanız Ionic ve Cordova sayesinde kolaylıkla hibrit mobil uygulamaları hazırlayabiliyorsunuz. Ayrıca Angular Universal ile web sitesi de hazırlamış oluyorsunuz. Fakat siteniz komple JavaScript projesi olduğundan Google gibi arama motorları web sitenizdeki sayfaları indeksleyemiyor. SSR ile bu problemi çözebiliyoruz.
Web sitesini Firebase’te yayınlayacaksanız bu kez de SSR’la nasıl yayınlayacağız diye bir soru işareti oluşuyor. Aşağıdaki maddeleri takip ederek Angular Universal SSR projesini Firebase Hosting’de deploy edebilirsiniz. Aşağıdaki komutları Terminal’de Commerce.Buyer dizinindeyken çalıştırmalısınız:
- Öncelikle SSR’ın gerçekten çalıştığından emin olun:
npm run build:ssr ve npm run serve:ssr komutları ile test edin. - Eğer daha önce yüklemediyseniz npm install -g firebase-tools komutu ile Firebase Araçlarını yükleyin.
- firebase login komutu ile eğer talep edilirse e-posta ve parolanızla oturum açın.
- firebase init komutunu çalıştırın
- Çıkan soruları cevaplayın:
- “Are you ready to proceed?”
y yazıp ENTER’a basın. - “Which firebase CLI features do you want to setup?”
Space tuşuyla Functions ve Hosting’i seçip ENTER’a basın. - “Select a default Firebase project for this directory?”
Ok tuşları ile uygun olanı seçip ENTER’a basın. - “What language would you like to use to write Cloud Functions?”
Ok tuşları ile TypeScript’i seçip ENTER’a basın. - “Do you want to use TSLint?”
y yazıp ENTER’a basın. - “Do you want to install dependencies with npm now?”
y yazıp ENTER’a basın. - “What do you want to use as your public directory?”
dist/browser yazıp ENTER’a basın. (Dikkat: Angular Universal olmayan projede bu kısım farklıdır) - “Configure as a single page app?”
y yazıp ENTER’a basın. - File index.html already exists. Overwrite?
n yazıp (önemli!) ENTER’a basın.
- Şimdi bazı dosyaları düzenleyin:
- firebase.json dosyasında
"destination": "/index.html" ifadesini "function": "ssr" olarak değiştirin.
(ssr, export const ssr = functions.https.onRequest(universal); değişkenini ifade eder, bunu aşağıda göreceksiniz.) - server.ts dosyasına
export to the app başlatısını ekleyin: const app = express(); yerine export const app = express(); - server.ts dosyasında son üç satırı yorum satırı yapın (
app.listen(...)) or ya da onları aşağıdaki ile değiştirin:
// If we're not in the Cloud Functions environment, spin up a Node server
if (!process.env.FUNCTION_NAME) {
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
}
Bu kodları Firebase deploy ederken kaldırabilirsiniz fakat bu kodlar localhost üzerinde npm run serve:ssr ile uygulamayı çalıştırabilmek için gereklidir.
4. webpack.server.config.js dosyasında output aşağıdaki gibi değiştirin:
output: {
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
// Export a UMD of the webpacked server.ts & dependencies for rendering in Cloud Functions
library: 'app',
libraryTarget: 'umd',
filename: '[name].js',
},
ve externals’ı aşağıdaki gibi değiştirin:
externals: [
// Firebase has some troubles being webpacked when it's in the Node environment, so we will skip it.
/^firebase/
],
Bu npm run serve:ssr or firebase serve komutlarıyla çalıştırında oluşan aşağıdaki hatayı düzeltecektir:
Cannot find module ‘require(“./server/main”)’
5. npm run build:ssr komutunu çalıştırarak uygulamayı tekrar derleyin.
6. cd functions ile functions dizine girin.
7. Dosya sistemi erişimi için npm pakedi yükleyin: npm i fs-extra
8. functions dizini içinde copy-angular-app.js adında yeni bir dosya oluşturun içine şunları yazın:
const fs = require('fs-extra');
fs.copy('../dist', './dist').then(() => {
// We should remove the original "index.html" since Firebase will use it when SSR is enabled (instead of calling SSR functions),
// and because of that, SSR won't work for the initial page.
fs.remove('../dist/browser/index.html').catch(e => console.error('REMOVE ERROR: ', e));
}).catch(err => {
console.error('COPY ERROR: ', err)
});
Bu SSR ile ilgili ilk sayfanın yüklenememe problemini düzeltir.
Not: index.html dosyasını kaldırdığımız için, npm run serve:ssr çalışmayacaktır (npm run build:ssr -> bunu çalıştırırsanız index.html dosyasını tekrar oluşturacaktır.
9. functions/package.json dosyasında (projenin package.json dosyası DEĞİL!) build satırını aşağıdaki şekilde değiştirin:
"build": "node copy-angular-app && tsc",
10. functions/src/index.ts dosyasında içeriği şöyle değiştirin:
import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app;
export const ssr = functions.https.onRequest(universal);
11. Terminaldeyken functions dizininde olduğunuzdan emin olun ve npm run build komutunu çalışıtırın böylece dist klasörü functions klasörüne kopyalanacaktır.
Ek not: Build işlemini kolaylaştırmak için ana projenin package.json dosyasında şunları düzenleyebilirsiniz:
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server", // this one should already exist
"build:ssr-firebase": "npm run build:ssr && npm --prefix functions/ run build",
Bu script öncelikle Angular SSR uygulamasını derleyecektir (npm run build:ssr) ve sonra functions dizininde npm run build çalıştıracaktır (böylece dist dizini functions a kopyalanacaktır ve projenin index.html dosyasını kaldıracatır)
Şimdi uygulamayı yayınlayın …
firebase serve komutu ile localhost:5000 üzerinden yerel yayınlama yapabilirsiniz (eğer isterseniz).- Sunucuyu durdurun (Ctrl + C).
firebase deploy uygulamayı yayınlayabilir ve terminalde çıkan adresten uygulamayı ziyaret edebilirsiniz.
NOT: Tüm bunlar yerine yeni çıkan ng deploy‘u kullanmayı deneyin. Bu daha basit yol, her ne kadar bugları olabilse de.
Mutlu kodlamalar 🙂
Murat Demirci 