Next.js, Docker ve IP Coğrafi Konumlandırma
Bu makalede, Next.js uygulamalarınızı Docker kullanarak nasıl dağıtacağınızı ve ziyaretçilerinizin coğrafi konumunu IP adresleri aracılığıyla nasıl belirleyeceğinizi ele alacağız. Bir Next.js uygulamasının Docker’da nasıl oluşturulduğunu, IP coğrafi konumlandırma API’leri ile entegrasyonunu ve bu bilgilerin nasıl kullanılabileceğini adım adım inceleyeceğiz.
Next.js Uygulaması Oluşturma
Öncelikle, yeni bir Next.js uygulaması oluşturalım. Bu işlem için Next.js resmi dokümantasyonunu kullanabiliriz. Bir terminal penceresinde aşağıdaki komutu çalıştırarak yeni bir proje oluşturabilirsiniz:
“`bash
npx create-next-app@latest my-next-app
“`
Bu komut, “my-next-app” adında yeni bir Next.js projesi oluşturacaktır. Projenin içine girip “npm run dev” komutunu çalıştırarak yerel olarak uygulamayı başlatabiliriz.
Docker Dosyası Oluşturma
Docker, uygulamalarımızın taşınabilir ve tutarlı bir şekilde çalışmasını sağlayan bir platformdur. Uygulamalarımızın Docker’da çalışabilmesi için bir Dockerfile oluşturmamız gerekir. Dockerfile, uygulamanın nasıl oluşturulacağına dair talimatlar içerir.
“`dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [“npm”, “run”, “build”]
CMD [“npm”, “run”, “start”]
“`
Bu Dockerfile, Node.js 16 taban görüntüsünü kullanarak bir Docker imajı oluşturacaktır. Ardından, projenin dosyalarını Docker imajına kopyalayacak ve bağımlılıkları yükleyecektir. Son olarak, Next.js uygulamasını çalıştıracak komutları çalıştıracaktır.
IP Coğrafi Konumlandırma API’si Entegrasyonu
Bir IP coğrafi konumlandırma API’si, bir IP adresinden coğrafi konum bilgisi almayı sağlar. Bu makalede, ip-api.com API’sini kullanacağız. IP adresini API’ye göndererek ülke, şehir, enlem ve boylam gibi bilgiler elde edebiliriz.
Next.js uygulamasına IP coğrafi konumlandırma API’sini entegre etmek için bir API çağrı fonksiyonu oluşturabiliriz.
“`javascript
import { useState, useEffect } from “react”;
export default function Home() {
const [location, setLocation] = useState(null);
useEffect(() => {
const fetchLocation = async () => {
const response = await fetch(“https://api.ipify.org?format=json”);
const data = await response.json();
const ip = data.ip;
const response2 = await fetch(`https://api.ip-api.com/json/${ip}`);
const locationData = await response2.json();
setLocation(locationData);
};
fetchLocation();
}, []);
return (
Konumunuz
Ülke: {location.country}
Şehir: {location.city}
Enlem: {location.lat}
Boylam: {location.lon}
)}
);
}
“`
Bu kod, IP adresini almak ve ip-api.com API’sine göndermek için useEffect hook’unu kullanır. API’den alınan veriler location state değişkenine kaydedilir. Daha sonra, bu bilgiler sayfada gösterilir.
Docker İmajını Oluşturma ve Dağıtma
Dockerfile’ımızı oluşturduktan sonra, Docker imajını oluşturup dağıtabiliriz. Bir terminal penceresinde aşağıdaki komutları çalıştırarak bunu yapabiliriz:
“`bash
docker build -t my-next-app .
docker push my-next-app
“`
Bu komutlar, Docker imajını oluşturacak ve Docker Hub gibi bir Docker kayıt deposuna yükleyecektir.
Uygulamayı Dağıtma
Uygulamayı dağıtmak için bir Docker konteynerine ihtiyacımız var. Docker konteyneri, Docker imajından oluşturulur. Uygulamayı bir sunucuya dağıtmak için aşağıdaki komutu çalıştırabiliriz:
“`bash
docker run -p 80:3000 my-next-app
“`
Bu komut, Docker imajından bir konteyner oluşturacak ve 80 numaralı porta 3000 numaralı porta yönlendirecektir. Bu, uygulamanın 80 numaralı port üzerinden erişilebilir olacağı anlamına gelir.
Sonuç
Bu makalede, Next.js uygulamalarınızı Docker kullanarak nasıl dağıtacağınızı ve ziyaretçilerinizin coğrafi konumunu IP adresleri aracılığıyla nasıl belirleyeceğinizi öğrendik. Uygulamalarınızı Docker’da dağıtmak, uygulamalarınızın taşınabilir ve tutarlı bir şekilde çalışmasını sağlar. IP coğrafi konumlandırma API’leri, ziyaretçilerinizin konumuna göre uygulamalarınızı kişiselleştirebilmenizi sağlar.
Daha fazla bilgi için fatihsoysal.com web sitesini ziyaret edebilirsiniz.
#Etiketler: Next.js, Docker, IP Coğrafi Konumlandırma, API, Dağıtım
