Node.js Admin SDK'sını kullanarak Firestore ile Cloud Run'a tam yığın Next.js uygulaması dağıtma

1. Genel Bakış

Cloud Run, kodunuzu doğrudan Google'ın ölçeklenebilir altyapısı üzerinde çalıştırmanıza olanak tanıyan, tümüyle yönetilen bir platformdur. Bu Codelab'de, Cloud Run'daki bir Next.js uygulamasını Node.js Admin SDK'yı kullanarak Firestore veritabanına bağlama işlemi gösterilecektir.

Bu laboratuvarda şunları öğreneceksiniz:

Firestore veritabanı oluşturma
Firestore veritabanınıza bağlanan bir uygulamayı Cloud Run'a dağıtma

2. Ön koşullar

Google Hesabınız yoksa Google Hesabı oluşturmanız gerekir.
- İş veya okul hesabı yerine kişisel hesap kullanıyorsanız. İş ve okul hesaplarında, bu laboratuvar için gereken API'leri etkinleştirmenizi engelleyen kısıtlamalar olabilir.

3. Proje ayarlama

Google Cloud Console'da oturum açın.
Cloud Console'da faturalandırmayı etkinleştirin.
- Bu laboratuvarı tamamlamak için 1 ABD dolarından daha az tutarda bulut kaynağı kullanmanız gerekir.
- Daha fazla ücret ödememek için bu laboratuvarın sonundaki adımları uygulayarak kaynakları silebilirsiniz.
- Yeni kullanıcılar 300 ABD doları değerinde ücretsiz deneme sürümünden yararlanabilir.
Yeni bir proje oluşturun veya mevcut bir projeyi yeniden kullanmayı seçin.

4. Cloud Shell Düzenleyici'yi açma

Cloud Shell Düzenleyici'ye gidin.
Terminal ekranın alt kısmında görünmüyorsa açın:
- Hamburger menüsünü tıklayın.
- Terminal'i tıklayın.
- Yeni Terminal'i tıklayın.

Terminalde şu komutla projenizi ayarlayın:

Biçim:
```
gcloud config set project [PROJECT_ID]
```

Örnek:

gcloud config set project lab-project-id-example

Proje kimliğinizi hatırlamıyorsanız:
- Tüm proje kimliklerinizi şu komutla listeleyebilirsiniz:
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```

Yetkilendirmeniz istenirse devam etmek için Yetkilendir'i tıklayın.
Şu mesajı görmeniz gerekir:
```
Updated property [core/project].
```
WARNING simgesini görüyorsanız ve Do you want to continue (Y/N)? soruluyorsa proje kimliğini yanlış girmiş olabilirsiniz. N tuşuna, Enter tuşuna basın ve gcloud config set project komutunu tekrar çalıştırmayı deneyin.

5. API'leri etkinleştir

Terminalde API'leri etkinleştirin:

gcloud services enable \
  firestore.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com

Yetkilendirmeniz istenirse devam etmek için Yetkilendir'i tıklayın. Cloud Shell'e yetki vermek için tıklayın.

Bu komutun tamamlanması birkaç dakika sürebilir ancak sonunda aşağıdakine benzer bir başarılı mesaj üretmesi gerekir:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Firestore veritabanı oluşturma

Firestore veritabanı oluşturmak için gcloud firestore databases create komutunu çalıştırın.
```
gcloud firestore databases create --location=nam5
```

7. Uygulamayı hazırlama

HTTP isteklerine yanıt veren bir Next.js uygulaması hazırlayın.

task-app adlı yeni bir Next.js projesi oluşturmak için şu komutu kullanın:

npx --yes create-next-app@15 task-app \
  --ts \
  --eslint \
  --tailwind \
  --no-src-dir \
  --turbopack \
  --app \
  --no-import-alias

Dizini task-app olarak değiştirin:
```
cd task-app
```

Firestore veritabanıyla etkileşim kurmak için firebase-admin yükleyin.
```
npm install firebase-admin
```

actions.ts dosyasını Cloud Shell Düzenleyici'de açın:
```
cloudshell edit app/actions.ts
```
Ekranın üst kısmında artık boş bir dosya görünmelidir. Bu actions.ts dosyasını buradan düzenleyebilirsiniz.

Aşağıdaki kodu kopyalayın ve açılan actions.ts dosyasına yapıştırın:

'use server'
import { initializeApp, applicationDefault, getApps } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
const credential = applicationDefault();

// Only initialize app if it does not already exist
if (getApps().length === 0) {
  initializeApp({ credential });
}

const db = getFirestore();
const tasksRef = db.collection('tasks');

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

// CREATE
export async function addNewTaskToDatabase(newTask: string) {
  await tasksRef.doc().create({
    title: newTask,
    status: 'IN_PROGRESS',
    createdAt: Date.now(),
  });
  return;
}

// READ
export async function getTasksFromDatabase() {
  const snapshot = await tasksRef.orderBy('createdAt', 'desc').limit(100).get();
  const tasks = await snapshot.docs.map(doc => ({
    id: doc.id,
    title: doc.data().title,
    status: doc.data().status,
    createdAt: doc.data().createdAt,
  }));
  return tasks;
}

// UPDATE
export async function updateTaskInDatabase(task: Task) {
  await tasksRef.doc(task.id).set(task);
  return;
}

// DELETE
export async function deleteTaskFromDatabase(taskId: string) {
  await tasksRef.doc(taskId).delete();
  return;
}

page.tsx dosyasını Cloud Shell Düzenleyici'de açın:
```
cloudshell edit app/page.tsx
```
Mevcut bir dosya, ekranın üst kısmında görünür. Bu page.tsx dosyasını buradan düzenleyebilirsiniz.
page.tsx dosyasının mevcut içeriğini silin.

Aşağıdaki kodu kopyalayın ve açılan page.tsx dosyasına yapıştırın:

'use client'
import React, { useEffect, useState } from "react";
import { addNewTaskToDatabase, getTasksFromDatabase, deleteTaskFromDatabase, updateTaskInDatabase } from "./actions";

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

export default function Home() {
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [tasks, setTasks] = useState<Task[]>([]);

  async function getTasks() {
    const updatedListOfTasks = await getTasksFromDatabase();
    setTasks(updatedListOfTasks);
  }

  useEffect(() => {
    getTasks();
  }, []);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    await addNewTaskToDatabase(newTaskTitle);
    await getTasks();
    setNewTaskTitle('');
  };

  async function updateTask(task: Task, newTaskValues: Partial<Task>) {
    await updateTaskInDatabase({ ...task, ...newTaskValues });
    await getTasks();
  }

  async function deleteTask(taskId: string) {
    await deleteTaskFromDatabase(taskId);
    await getTasks();
  }

  return (
    <main className="p-4">
      <h2 className="text-2xl font-bold mb-4">To Do List</h2>
      <div className="flex mb-4">
        <form onSubmit={handleSubmit} className="flex mb-8">
          <input
            type="text"
            placeholder="New Task Title"
            value={newTaskTitle}
            onChange={(e) => setNewTaskTitle(e.target.value)}
            className="flex-grow border border-gray-400 rounded px-3 py-2 mr-2 bg-inherit"
          />
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-nowrap"
          >
            Add New Task
          </button>
        </form>
      </div>
      <table className="w-full">
        <tbody>
          {tasks.map(function (task) {
            const isComplete = task.status === 'COMPLETE';
            return (
              <tr key={task.id} className="border-b border-gray-200">
                <td className="py-2 px-4">
                  <input
                    type="checkbox"
                    checked={isComplete}
                    onChange={() => updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })}
                    className="transition-transform duration-300 ease-in-out transform scale-100 checked:scale-125 checked:bg-green-500"
                  />
                </td>
                <td className="py-2 px-4">
                  <span
                    className={`transition-all duration-300 ease-in-out ${isComplete ? 'line-through text-gray-400 opacity-50' : 'opacity-100'}`}
                  >
                    {task.title}
                  </span>
                </td>
                <td className="py-2 px-4">
                  <button
                    onClick={() => deleteTask(task.id)}
                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </main>
  );
}

Uygulama artık dağıtılmaya hazır.

8. Uygulamayı Cloud Run'a dağıtma

Uygulamanızı Cloud Run'a dağıtmak için aşağıdaki komutu çalıştırın:

gcloud run deploy helloworld \
  --region=us-central1 \
  --source=.

İstenirse devam etmek istediğinizi onaylamak için Y ve Enter tuşlarına basın:
```
Do you want to continue (Y/n)? Y
```

Birkaç dakika sonra uygulama, ziyaret etmeniz için bir URL sağlar.

Uygulamanızı çalışırken görmek için URL'ye gidin. URL'yi her ziyaret ettiğinizde veya sayfayı her yenilediğinizde görev uygulamasını görürsünüz.

9. Tebrikler

Bu laboratuvarda şunları yapmayı öğrendiniz:

PostgreSQL için Cloud SQL örneği oluşturma
Cloud SQL veritabanınıza bağlanan bir uygulamayı Cloud Run'a dağıtma

Temizleme

Cloud SQL'in ücretsiz katmanı yoktur ve kullanmaya devam ederseniz sizden ücret alınır. Ek ücret ödememek için Cloud projenizi silebilirsiniz.

Cloud Run, hizmet kullanılmadığında ücret almaz ancak container görüntüsünü Artifact Registry'de depoladığınız için ücretlendirilebilirsiniz. Cloud projenizi sildiğinizde, bu projede kullanılan tüm kaynaklar için faturalandırma durdurulur.

İsterseniz projeyi silebilirsiniz:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Ayrıca, gereksiz kaynakları cloudshell diskinizden de silebilirsiniz. Şunları yapabilirsiniz:

Codelab proje dizinini silin:
```
rm -rf ~/task-app
```
Uyarı! Bu işlem geri alınamaz. Yer açmak için Cloud Shell'inizdeki her şeyi silmek istiyorsanız tüm ana dizininizi silebilirsiniz. Saklamak istediğiniz her şeyin başka bir yere kaydedildiğinden emin olun.
```
sudo rm -rf $HOME
```