פריסת אפליקציית Angular מלאה ב-Cloud Run עם Firestore באמצעות Node.js Admin SDK
מידע על Codelab זה
subjectהעדכון האחרון: אפר׳ 2, 2025
1. סקירה כללית
Cloud Run היא פלטפורמה מנוהלת שמאפשרת להריץ את הקוד ישירות מעל התשתית הניתנת להתאמה של Google. ב-Codelab הזה תלמדו איך לחבר אפליקציית Angular ב-Cloud Run למסד נתונים של Firestore באמצעות ה-SDK של Node.js Admin.
בשיעור ה-Lab הזה תלמדו איך:
- יצירת מסד נתונים ב-Firestore
- פריסת אפליקציה ב-Cloud Run שמתחבר למסד הנתונים של Firestore
2. דרישות מוקדמות
- אם עדיין אין לכם חשבון Google, עליכם ליצור חשבון Google.
- משתמשים בחשבון אישי במקום בחשבון לצורכי עבודה או בחשבון בית ספרי. יכול להיות שבחשבונות לצורכי עבודה ובחשבונות בית ספריים יש הגבלות שמונעות מכם להפעיל את ממשקי ה-API הנדרשים לסדנה הזו.
3. הגדרת הפרויקט
- נכנסים למסוף Google Cloud.
- מפעילים את החיוב במסוף Cloud.
- השלמת ה-Lab הזה אמורה לעלות פחות מ-1 $בארה"ב במשאבי Cloud.
- כדי למנוע חיובים נוספים, תוכלו לפעול לפי השלבים שמפורטים בסוף שיעור ה-Lab הזה כדי למחוק את המשאבים.
- משתמשים חדשים זכאים לתקופת ניסיון בחינם בשווי 300$.
- יוצרים פרויקט חדש או בוחרים לעשות שימוש חוזר בפרויקט קיים.
4. פתיחת Cloud Shell Editor
- עוברים אל Cloud Shell Editor.
- אם מסוף ה-SSH לא מופיע בחלק התחתון של המסך, פותחים אותו:
- לוחצים על תפריט שלושת הקווים
. - לוחצים על Terminal (מסוף).
- לוחצים על מסוף חדש
- לוחצים על תפריט שלושת הקווים
- בטרמינל, מגדירים את הפרויקט באמצעות הפקודה הבאה:
- פורמט:
gcloud config set project [PROJECT_ID] - דוגמה:
gcloud config set project lab-project-id-example - אם לא זוכרים את מזהה הפרויקט:
- אפשר להציג את כל מזהי הפרויקטים באמצעות:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- אפשר להציג את כל מזהי הפרויקטים באמצעות:
- פורמט:
- אם מתבקשים לאשר, לוחצים על Authorize (מתן הרשאה) כדי להמשיך.
- אמורה להופיע ההודעה הבאה:
Updated property [core/project].
WARNINGונשאלת השאלהDo you want to continue (Y/N)?, סביר להניח שהזנתם את מזהה הפרויקט בצורה שגויה. לוחצים עלN, לוחצים עלEnterומנסים להריץ שוב את הפקודהgcloud config set project.
5. הפעלת ממשקי API
מפעילים את ממשקי ה-API בטרמינל:
gcloud services enable \
firestore.googleapis.com \
run.googleapis.com \
artifactregistry.googleapis.com \
cloudbuild.googleapis.com
אם מתבקשים לאשר, לוחצים על Authorize (מתן הרשאה) כדי להמשיך.
השלמת הפקודה עשויה להימשך כמה דקות, אבל בסופו של דבר אמורה להופיע הודעה על השלמה, בדומה להודעה הבאה:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. יצירת מסד נתונים ב-Firestore
- מריצים את הפקודה
gcloud firestore databases createכדי ליצור מסד נתונים של Firestoregcloud firestore databases create --location=nam5
7. הכנת הבקשה
מכינים אפליקציית Next.js שמגיבה לבקשות HTTP.
- כדי ליצור פרויקט Next.js חדש בשם
task-app, משתמשים בפקודה:npx --yes @angular/cli@19.2.5 new task-app \
--minimal \
--inline-template \
--inline-style \
--ssr \
--server-routing \
--defaults - עוברים לספרייה
task-app:cd task-app
- מתקינים את
firebase-adminכדי ליצור אינטראקציה עם מסד הנתונים של Firestore.npm install firebase-admin
- פותחים את הקובץ
server.tsב-Cloud Shell Editor:cloudshell edit src/server.tsserver.ts.
- מוחקים את התוכן הקיים בקובץ
server.ts. - מעתיקים את הקוד הבא ומדביקים אותו בקובץ
server.tsהפתוח:import {
AngularNodeAppEngine,
createNodeRequestHandler,
isMainModule,
writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { initializeApp, applicationDefault, getApps } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
type Task = {
id: string;
title: string;
status: 'IN_PROGRESS' | 'COMPLETE';
createdAt: number;
};
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');
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const app = express();
const angularApp = new AngularNodeAppEngine();
app.use(express.json());
app.get('/api/tasks', async (req, res) => {
const snapshot = await tasksRef.orderBy('createdAt', 'desc').limit(100).get();
const tasks: Task[] = snapshot.docs.map(doc => ({
id: doc.id,
title: doc.data()['title'],
status: doc.data()['status'],
createdAt: doc.data()['createdAt'],
}));
res.send(tasks);
});
app.post('/api/tasks', async (req, res) => {
const newTaskTitle = req.body.title;
if(!newTaskTitle){
res.status(400).send("Title is required");
return;
}
await tasksRef.doc().create({
title: newTaskTitle,
status: 'IN_PROGRESS',
createdAt: Date.now(),
});
res.sendStatus(200);
});
app.put('/api/tasks', async (req, res) => {
const task: Task = req.body;
if (!task || !task.id || !task.title || !task.status) {
res.status(400).send("Invalid task data");
return;
}
await tasksRef.doc(task.id).set(task);
res.sendStatus(200);
});
app.delete('/api/tasks', async (req, res) => {
const task: Task = req.body;
if(!task || !task.id){
res.status(400).send("Task ID is required");
return;
}
await tasksRef.doc(task.id).delete();
res.sendStatus(200);
});
/**
* Serve static files from /browser
*/
app.use(
express.static(browserDistFolder, {
maxAge: '1y',
index: false,
redirect: false,
}),
);
/**
* Handle all other requests by rendering the Angular application.
*/
app.use('/**', (req, res, next) => {
angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next);
});
/**
* Start the server if this module is the main entry point.
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
*/
if (isMainModule(import.meta.url)) {
const port = process.env['PORT'] || 4000;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
/**
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
*/
export const reqHandler = createNodeRequestHandler(app); - פותחים את הקובץ
angular.jsonב-Cloud Shell Editor:cloudshell edit angular.json"externalDependencies": ["firebase-admin"]לקובץangular.json. - מוחקים את התוכן הקיים בקובץ
angular.json. - מעתיקים את הקוד הבא ומדביקים אותו בקובץ
angular.jsonהפתוח:{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"task-app": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true,
"inlineStyle": true,
"skipTests": true
},
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:resolver": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/task-app",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
],
"scripts": [],
"server": "src/main.server.ts",
"outputMode": "server",
"ssr": {
"entry": "src/server.ts"
},
"externalDependencies": ["firebase-admin"]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "task-app:build:production"
},
"development": {
"buildTarget": "task-app:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
}
}
}
}
}
"externalDependencies": ["firebase-admin"]
- פותחים את הקובץ
app.component.tsב-Cloud Shell Editor:cloudshell edit src/app/app.component.tsapp.component.ts. - מוחקים את התוכן הקיים בקובץ
app.component.ts. - מעתיקים את הקוד הבא ומדביקים אותו בקובץ
app.component.tsהפתוח:import { afterNextRender, Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
type Task = {
id: string;
title: string;
status: 'IN_PROGRESS' | 'COMPLETE';
createdAt: number;
};
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
template: `
<section>
<input
type="text"
placeholder="New Task Title"
[(ngModel)]="newTaskTitle"
class="text-black border-2 p-2 m-2 rounded"
/>
<button (click)="addTask()">Add new task</button>
<table>
<tbody>
@for (task of tasks(); track task) {
@let isComplete = task.status === 'COMPLETE';
<tr>
<td>
<input
(click)="updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })"
type="checkbox"
[checked]="isComplete"
/>
</td>
<td>{{ task.title }}</td>
<td>{{ task.status }}</td>
<td>
<button (click)="deleteTask(task)">Delete</button>
</td>
</tr>
}
</tbody>
</table>
</section>
`,
styles: '',
})
export class AppComponent {
newTaskTitle = '';
tasks = signal<Task[]>([]);
constructor() {
afterNextRender({
earlyRead: () => this.getTasks()
});
}
async getTasks() {
const response = await fetch(`/api/tasks`);
const tasks = await response.json();
this.tasks.set(tasks);
}
async addTask() {
await fetch(`/api/tasks`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: this.newTaskTitle,
status: 'IN_PROGRESS',
createdAt: Date.now(),
}),
});
this.newTaskTitle = '';
await this.getTasks();
}
async updateTask(task: Task, newTaskValues: Partial<Task>) {
await fetch(`/api/tasks`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ...task, ...newTaskValues }),
});
await this.getTasks();
}
async deleteTask(task: any) {
await fetch('/api/tasks', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(task),
});
await this.getTasks();
}
}
האפליקציה מוכנה עכשיו לפריסה.
8. פריסת האפליקציה ב-Cloud Run
- מריצים את הפקודה הבאה כדי לפרוס את האפליקציה ב-Cloud Run:
gcloud run deploy helloworld \
--region=us-central1 \
--source=. - אם מופיעה בקשה, מקישים על
Yו-Enterכדי לאשר את המשך הפעולה:Do you want to continue (Y/n)? Y
אחרי כמה דקות, האפליקציה אמורה לספק כתובת URL שאפשר להיכנס אליה.
עוברים לכתובת ה-URL כדי לראות את האפליקציה בפעולה. בכל פעם שתכנסו לכתובת ה-URL או תחדשו את הדף, תראו את אפליקציית המשימות.
9. מזל טוב
בשיעור ה-Lab הזה למדתם:
- יצירת מכונות של Cloud SQL ל-PostgreSQL
- פריסת אפליקציה ב-Cloud Run שמתחבר למסד הנתונים של Cloud SQL
הסרת המשאבים
ל-Cloud SQL אין שכבה חינמית, וייחויב אותך אם תמשיך להשתמש בו. כדי להימנע מחיובים נוספים, אפשר למחוק את הפרויקט ב-Cloud.
אמנם אין חיוב ב-Cloud Run כשלא משתמשים בשירות, אבל יכול להיות שתחויבו על אחסון קובץ האימג' בקונטיינר ב-Artifact Registry. מחיקת הפרויקט ב-Cloud תפסיק את החיוב על כל המשאבים שבהם נעשה שימוש באותו פרויקט.
אם רוצים, מוחקים את הפרויקט:
gcloud projects delete $GOOGLE_CLOUD_PROJECT
מומלץ גם למחוק משאבים לא נחוצים מהדיסק של cloudshell. אפשר:
- מוחקים את הספרייה של פרויקט ה-codelab:
rm -rf ~/task-app - אזהרה! אי אפשר לבטל את הפעולה הבאה! אם רוצים למחוק את כל התוכן ב-Cloud Shell כדי לפנות מקום, אפשר למחוק את כל ספריית הבית. חשוב לוודא שכל מה שרוצים לשמור נשמר במקום אחר.
sudo rm -rf $HOME