NgSysV2-3.6: A Serious Svelte InfoSys: استقرار در Google Cloud

Summarize this content to 400 words in Persian Lang
این مجموعه پست در NgateSystems.com نمایه شده است. یک ابزار جستجوی کلید واژه فوق العاده مفید نیز در آنجا خواهید یافت.

آخرین بررسی: نوامبر 24

1. مقدمه

تمام کارهای توسعه شما تا کنون در محلی انجام شده است npm run dev سرور هیچ کس دیگری جز شما نمی توانید برنامه وب خود را اینجا ببینید! برای راه‌اندازی آن به دنیای آینده، باید:

نسخه ای از پروژه خود را بسازید که برای عملیات از راه دور مناسب است
این را به یک میزبان ابری راه دور “استقرار” کنید

2. ساخت پروژه شما

بیت “ساخت” آسان است. فقط یک جلسه ترمینال VSCode جدید برای پروژه خود شروع کنید و موارد زیر را وارد کنید:

npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این ابزار ساخت “Vite” را راه اندازی می کند که به طور خودکار در پروژه شما در طول مراحل نصب Svelte نصب می شود.

Vite با ایجاد یک ساخت تولید بهینه از کد Svelte سمت کلاینت و سمت سرور شما شروع می شود. سپس یک “آداپتور” را اعمال می کند که این ساخت تولید را برای محیط هدف شما تنظیم می کند.

آداپتور یک پلاگین کوچک است (فایلی که در پروژه شما کپی شده است) که برنامه ساخته شده را به عنوان ورودی می گیرد و خروجی را برای استقرار تولید می کند – یعنی برای آپلود شما در هاست Cloud. Google Cloud انواع مختلفی از محیط های میزبانی را ارائه می دهد. “Google App Engine” (GAE) محیطی است که در این مجموعه پست استفاده شده است.

موتور برنامه گوگل:

خانه ای برای کد “ساخته شده” شما فراهم می کند
نسخه ای از ترتیبی که قبلاً با آن کار کرده اید را اجرا می کند npm run dev هنگامی که توسط URL ارسال شده به یک مرورگر وب “پاک” می شود،
وقتی چندین کاربر به طور همزمان به آن دسترسی دارند، منابع مورد نیاز برای اجرای کارآمد این ترتیب را “مقیاس” می کند.

به عبارت دیگر، GAE یک مجموعه سخت افزاری و نرم افزاری بسیار پیچیده است. خوشبختانه، از آنجایی که این سریال کار پیچیده‌ای را انجام نمی‌دهد (اگرچه نظر شما ممکن است متفاوت باشد)، لازم نیست نگران این موضوع باشید. اما چیزی که باعث می‌شود شما بنشینید این است که به شما می‌گویم این نقطه‌ای است که باید از آن شروع کنید پرداخت می کند گوگل برای خدماتش

اگر این شما را می‌ترساند، لطفاً آرام باشید – صورت‌حساب خودم در سال‌های اخیر به طور متوسط ​​کمتر از 1 دلار در ماه بوده است.

اگر شما هستید واقعا نگران احتمال پرداخت به Google هستید و قبلاً با ایجاد یک برنامه وب “مناسب قوانین” همانطور که در پست 3.4 توضیح داده شد، از سادگی منصرف شده اید، ممکن است بخواهید بدانید که یک برنامه وب که فقط حاوی کد سمت مشتری است نیز این گزینه را دارد: استقرار در هاست رایگان Firebase. من قصد ندارم در اینجا وارد جزئیات شوم زیرا آنها فقط باعث حواس پرتی می شوند، اما chatGPT با خوشحالی آنها را در صورت درخواست ارائه می دهد.

بنابراین، همانطور که در بالا نشان داده شد، باید یک “آداپتور” App Engine برای پروژه خود پیدا کنید. در حالی که آداپتور رسمی Google Svelte وجود ندارد، یک انجمن پر رونق Svelte چندین آداپتور مختلف را به عنوان نرم افزار باز در مخازن Git ارسال کرده است.

چیزی که من توصیه می کنم، svelte-adapter-appengine است. این را می توان با:

npm install –save-dev svelte-adapter-appengine

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای استفاده از آداپتور در پروژه خود، محتوای فعلی خود را جایگزین کنید svelte.config.js فایل با کد زیر:

import { vitePreprocess } from ‘@sveltejs/vite-plugin-svelte’;
import adapter from “svelte-adapter-appengine”;
/** @type {import(‘@sveltejs/kit’).Config} */
const config = {
preprocess: vitePreprocess(),

kit: {
adapter: adapter(),
},
};

export default config;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و اکنون پروژه خود را دوباره با npm run build.

این باید خروجی ای شبیه به زیر تولید کند:

> svelte-dev@0.0.1 build
> vite build

vite v5.4.0 building SSR bundle for production…
✓ 110 modules transformed.
page.server.js initialised
firebaseConfig.apiKey AIzaSyDOVyss6etYIswpmVLsT6n-tWh0GZoPQhM
heartbeats undefined
heartbeats undefined
heartbeats undefined
vite v5.4.0 building for production…
✓ 112 modules transformed.
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/.vite/manifest.json 8.92 kB │ gzip: 0.94 kB

………

.svelte-kit/output/server/entries/pages/login-with-cookie/_page.svelte.js 6.90 kB
.svelte-kit/output/server/chunks/internal.js 7.01 kB
.svelte-kit/output/server/entries/pages/inventory-maintenance-all_client-version/_page.svelte.js 7.09 kB
.svelte-kit/output/server/index.js 93.25 kB
✓ built in 4.75s

Run npm run preview to preview your production build locally.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. استقرار پروژه شما

این npm run build اکنون در پروژه شما جای داده شده است build پوشه شما می توانید این را با یک دستور ساده “deploy” در وب آپلود کنید، اما برخی از تنظیمات اولیه صحنه مورد نیاز است. شما باید:

پروژه خود را به طرح قیمت گذاری Google “Blaze” منتقل کنید
استفاده پروژه خود از AppEngine را پیکربندی کنید
ابزار GCloud را که استقرار را انجام می دهد، نصب کنید
به حساب Gmail خود نقش App Engine Deployer (roles/appengine.deployer) را در ماژول IAM کنسول Cloud بدهید.

3.1 انتقال پروژه به قیمت گذاری “Blaze”.

در صفحه “نمای کلی پروژه” کنسول Firebase برای پروژه خود، ماوس را روی پشته ابزار در ستون سمت چپ قرار دهید و در پایین آن، بخش “ابزارهای توسعه مرتبط” را که نشان می دهد پروژه در حال حاضر در “Spark” است، یادداشت کنید. “طرح رایگان. روی دکمه “ارتقا” در کنار این دکمه و سپس “انتخاب طرح” در پنجره “Blaze” که اکنون ظاهر می شود کلیک کنید.

این از شما دعوت می‌کند تا یک کارت اعتباری ثبت کنید و یک محدودیت ماهانه برای مبلغی که Google می‌تواند از شما دریافت کند تعیین می‌کند. محدودیت من روی 2 دلار تنظیم شده است و هرگز نقض نشده است

3.2 پیکربندی App Engine برای پروژه شما

شما این کار را از طریق کنسول Google Cloud انجام می دهید. این یک چتر برای «کنسول‌های فرعی» متعددی فراهم می‌کند که به شما امکان پیکربندی و مدیریت سرویس‌های Cloud را می‌دهد.

متأسفانه، App Engine در فهرست دسترسی سریع “پین شده” که در صفحه “Welcome” IAM نمایش داده می شود، فهرست نشده است. اما با وارد کردن “app engine” در کادر جستجو و کلیک بر روی دکمه “جستجو” به راحتی می توانید آن را پیدا کنید. «داشبورد» را از لیست کنسول‌ها و اسنادی که بدین ترتیب نشان داده شده‌اند، انتخاب کنید.

اکنون بررسی کنید که نام پروژه شما در کادر “نقطه سه گانه” در سمت چپ بالای صفحه نمایش داده شود و روی دکمه “ایجاد برنامه” کلیک کنید.با این کار شما را دعوت می کند تا یک منطقه (محل سرور) را برای پروژه خود انتخاب کنید. احتمالاً می‌خواهید از همان مناطقی که برای پایگاه داده خود استفاده می‌کنید، استفاده کنید، و قسمت حساب سرویس را روی «App Engine Default Service Account» بگذارید، «انجام شد» را فشار دهید تا راه‌اندازی کامل شود.

3.3 تنظیم نقش App Engine/App Engine Deployer در IAM

IAM (کنسول مدیریت هویت و دسترسی) «نقش‌هایی» را فهرست می‌کند که برای پروژه شما به «اصول» داده شده است. ممکن است افراد اصلی (که توسط حساب‌های Google آنها مشخص می‌شوند) یا موجودیت‌های سیستمی انتزاعی (که توسط حساب‌های سرویس مشخص می‌شوند) باشند. اگر ایمیل Google شما به عنوان یک IAM اصلی با نقش “App Engine Deployer” ظاهر نمی شود، تلاش شما برای اجرای یک deploy دستور رد خواهد شد. برای دسترسی به IAM، به صفحه خوش آمدگویی کنسول Cloud برگردید و “IAM and admin” را از لیست دسترسی سریع انتخاب کنید.

اکنون روی دکمه “Grant Access” کلیک کنید، ID Gmail خود را در قسمت “New Principals” وارد کنید و سپس در قسمت Role، به سمت “App Engine” در پنل سمت چپ بروید و “App Engine Deployer” را انتخاب کنید. پانل سمت راست”. این را “ذخیره” کنید و کارتان تمام شد.

3.4 نصب ابزار Gcloud بر روی سیستم شما

ابزار Gcloud شما را قادر می سازد تا ترمینال را اجرا کنید gcloud دستور استقرار نرم افزار شما در میزبان App Engine شما. مراحل نصب Google Cloud CLI (واسط خط فرمان) در نصب Google CLI مستند شده است.

کاربران ویندوز باید در اینجا به زیر منوی “Windows” بروید، جایی که سند یک دکمه “دانلود” را ارائه می دهد که یک فایل Windows Installer را در فهرست دانلود ایجاد می کند. روی آن کلیک کنید و گزینه های از پیش انتخاب شده را بپذیرید. اسناد نشان می‌دهد که باید صریحاً درخواست درج ماژول‌های لازم برای پشتیبانی از App Engine را داشته باشید، اما در زمان نگارش این مقاله (سپتامبر 2024)، به نظر می‌رسد که دیگر اینطور نیست.

3.5 استقرار برنامه وب خود

این یک لحظه بزرگ است! دستور زیر را در جلسه ترمینال VSCode خود اجرا کنید:

gcloud app deploy build/app.yaml –project=[project-id]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا، [project-id] نسخه منحصربه‌فرد نام پروژه است که Google هنگام تنظیم اولیه پروژه خود در پست 2.3 ایجاد کرد. به عنوان مثال، پروژه “svelte-dev” خود من با آن مستقر شده است

gcloud app deploy build/app.yaml –project=svelte-dev-80286

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این build.yaml فایل یکی از ویژگی های جالب دستور است. این یک فایل پیکربندی است که توسط Vite قبلی “build” بود. این به gcloud می‌گوید که کجا می‌تواند مصنوعات و پیکربندی‌های مختلف را در پوشه «build» پیدا کند.

اگر همه چیز خوب پیش برود، باید چیزی شبیه به زیر را ببینید:

Beginning deployment of service [default]…
#============================================================#
#= Uploading 19 files to Google Cloud Storage =#
#============================================================#
File upload done.
Updating service [default]…-WARNING: *** Improve build performance by generating and committing package-lock.json.

Updating service [default]…done.
Setting traffic split for service [default]…done.
Deployed service [default] to [https://svelte-dev-80286.nw.r.appspot.com]

You can stream logs from the command line by running:
$ gcloud app logs tail -s default

To view your application in the web browser run:
$ gcloud app browse –project=svelte-dev-80286

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این یک است لحظه بزرگ. وب‌اپ شما اکنون می‌تواند در وب اجرا شود https://[Your Project Id].nw.r.appspot.com (https://svelte-dev-80286.nw.r.appspot.com در مورد من). به عنوان یک میانبر، می توانید از پیشنهاد جلسات ترمینال برای اجرای آن با کپی و جایگذاری “gcloud app browse –project=svelte-dev-80286” در جلسه ترمینال استفاده کنید.

4. خلاصه

امیدوارم همه چیز برای شما خوب پیش رفته باشد. متأسفانه، من انتظار دارم که اگر شما دارند تا اینجای کار به قیمت ریزش مو و احتمالاً اشک تمام شده است. با این حال، من مطمئن هستم که ارزش آن را داشته است.

این مجموعه در بخش بعدی با پست هایی به پایان می رسد که برای بیان برخی از جنبه های موضوعات قبلی طراحی شده اند. اینها به سادگی آن را به روشی که قبلاً آنها را معرفی کرده بودم، دریافت می کردند. در حال حاضر، ممکن است برای شما مفید باشد که نگاهی به پست 4.5 بیندازید که به شما می‌گوید چگونه می‌توانید به برنامه وب زنده یک URL هوشمند «دامنه سفارشی» بدهید تا جایگزین نسخه پیش‌فرض بداخلاقی که از فرآیند توسعه خارج شده است.

پس‌نوشته: وقتی همه چیز اشتباه می‌شود

یک لحظه فکر به شما می گوید که پس از استقرار، پیام های گزارش در صفحات زنده شما دیگر به جلسه ترمینال محلی پروژه شما نمی روند. در عوض، آنها به Google Cloud می‌روند و متأسفم که می‌گویم این بدان معناست که شما باید از ابزار دیگری مبتنی بر وب برای دیدن آنها استفاده کنید.

بنابراین، به “Google Logs Explorer” خوش آمدید!

کاوشگر را در Google Logs Explorer پیدا خواهید کرد. بررسی کنید که نام پروژه شما در قسمت “سه نقطه” در بالا سمت چپ نمایش داده شود و سعی کنید در مجموعه منوها و پنجره های فرعی بیش از حد غرق نشوید.

مشکل شما اینجاست که گوگل لاگ می کند کاملا همه چیز که در پروژه شما اتفاق می افتد. وقتی به دنبال console.log پیام‌ها، متوجه خواهید شد که این پیام‌ها در پیام‌های تولید شده توسط Google درباره فعالیت‌های ساخت پروژه و راه‌اندازی صفحه و غیره دفن شده‌اند. علاوه بر این، Google این اطلاعات را با جزئیات جزئی به سپیده‌دم زمان ثبت می‌کند. پیدا کردن آنچه می خواهید می تواند یک چالش باشد.

برای کمک به شما در عبور از این پیچ و خم، اکسپلورر به شما اجازه می‌دهد تا ورودی‌های گزارش را با استفاده از «پرسش‌ها» بر اساس مقادیر فیلد ورودی گزارش فیلتر کنید. اگر یک ورودی گزارش را به صورت تصادفی باز کنید (با کلیک کردن بر روی > دکمه در حاشیه سمت چپ آن)، خواهید دید که یک شی حاوی ویژگی هایی مانند logName و textPayload. الف console.log(“In Actions 1”) برای مثال، عبارت در برنامه وب شما، یک ورودی گزارش با یک ایجاد می کند textPayload مقدار “در اقدامات 1”.

یک پرس و جو با ایجاد لیستی از معیارهای “تطابق” برای ویژگی های گزارش مشخص می شود. مثال زیر با ورودی‌های گزارش مطابقت دارد console.log پیام هایی برای من svelte-dev پروژه App Engine که دارای مقدار “In Actions” هستند.

resource.type=”gae_app”
log_name=”projects/svelte-dev-80286/logs/stdout”
textPayload =”In Actions”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Logs Explorer روش های مختلفی را برای تنظیم پرس و جو به شما ارائه می دهد. ابتدایی ترین روش این است که مشخصات درخواست خود را مستقیماً در پنجره “مشخصات پرس و جو” که با جابجایی نماد کادر مربعی “گیج” روی RHS صفحه نمایش داده می شود تایپ کنید و نوار لغزنده “Show query” را فعال کنید.

برای ذخیره تایپ کردن، منوهای کشویی مختلف به شما امکان می‌دهند فیلترهای استاندارد را برای «نوع منبع» و «سطح شدت» و غیره انتخاب کنید. تنظیم آن‌ها روی «برنامه GAE» و «همه شدت‌ها» ایده خوبی برای اهداف فعلی به نظر می‌رسد.

علاوه بر این، البته، شما می خواهید محدوده زمانی فیلتر را تنظیم کنید. این کار را به طور جداگانه با کلیک کردن روی کادر “انتخاب محدوده زمانی” در بالای صفحه و تنظیم زمان شروع/پایان انجام می‌دهید.

در نهایت، برای اجرای مشخصات پرس و جو، روی دکمه آبی بزرگ “Run Query” در بالا سمت راست کلیک کنید.

در مثال زیر، من از یک “عبارت منظم” در آن استفاده کرده ام textPayload مشخصات برای انتخاب console.log پیام هایی که شروع کنید با عبارت “در عمل”. بنابراین پیام‌های «در عمل 2» و «عمل 3» و همچنین مطابقت‌های دقیق «در عمل» را دریافت می‌کند.

resource.type=”gae_app”
log_name=”projects/svelte-dev-80286/logs/stdout”
textPayload =~ “^In Actions”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا یک اسکرین شات برای این پرس و جو وجود دارد که خروجی ورود به سیستم را برای یک سری از برنامه های وب اجرا شده در App Engine نشان می دهد.

npm run build

npm install --save-dev svelte-adapter-appengine

import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import adapter from "svelte-adapter-appengine";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),

kit: {
adapter: adapter(),
},
};

export default config;

> svelte-dev@0.0.1 build
> vite build

vite v5.4.0 building SSR bundle for production...
✓ 110 modules transformed.
page.server.js initialised
firebaseConfig.apiKey  AIzaSyDOVyss6etYIswpmVLsT6n-tWh0GZoPQhM
heartbeats undefined
heartbeats undefined
heartbeats undefined
vite v5.4.0 building for production...
✓ 112 modules transformed.
.svelte-kit/output/client/_app/version.json                                        0.03 kB │ gzip:   0.05 kB
.svelte-kit/output/client/.vite/manifest.json                                      8.92 kB │ gzip:   0.94 kB

.........

.svelte-kit/output/server/entries/pages/login-with-cookie/_page.svelte.js                                  6.90 kB
.svelte-kit/output/server/chunks/internal.js                                                               7.01 kB
.svelte-kit/output/server/entries/pages/inventory-maintenance-all_client-version/_page.svelte.js           7.09 kB
.svelte-kit/output/server/index.js                                                                        93.25 kB
✓ built in 4.75s

Run npm run preview to preview your production build locally.

gcloud app deploy build/app.yaml --project=[project-id]

gcloud app deploy build/app.yaml --project=svelte-dev-80286

Beginning deployment of service [default]...
#============================================================#
#= Uploading 19 files to Google Cloud Storage                =#
#============================================================#
File upload done.
Updating service [default]...-WARNING: *** Improve build performance by generating and committing package-lock.json.

Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://svelte-dev-80286.nw.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse --project=svelte-dev-80286

resource.type="gae_app"
log_name="projects/svelte-dev-80286/logs/stdout"
textPayload ="In Actions"

resource.type="gae_app"
log_name="projects/svelte-dev-80286/logs/stdout"
textPayload =~ "^In Actions"