১. ভূমিকা
সংক্ষিপ্ত বিবরণ
এই কোডল্যাবে, ক্লাউড রান-এ আটটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ডেপ্লয় করুন:
- অ্যাঙ্গুলার এসএসআর - অ্যাঙ্গুলারের উপর ভিত্তি করে
- Nuxt.js - Vue.js এর উপর ভিত্তি করে
- Next.js - React-এর উপর ভিত্তি করে
- রিমিক্স - রিঅ্যাক্ট-এর উপর ভিত্তি করে
- SvelteKit - Svelte-এর উপর ভিত্তি করে
- সলিডস্টার্ট - সলিড.জেএস (Solid.js) ভিত্তিক
- অ্যাস্ট্রো
- কুইক








আপনি যা শিখবেন
- ক্লাউড বিল্ড দ্বারা সমর্থিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্বয়ংক্রিয়ভাবে স্থাপন করবেন
- কনফিগারেশন প্রয়োজন এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
পূর্বশর্ত
- আপনি ক্লাউড শেল টার্মিনালে লগ ইন করেছেন।
- আপনার একটি গুগল ক্লাউড প্রজেক্ট আছে, যেটিতে বিলিং চালু করা আছে এবং ক্লাউড রান-এ ডিপ্লয় করার অনুমতিও রয়েছে।
- আপনি যদি আগে কোনো ক্লাউড রান সার্ভিস ডেপ্লয় করে থাকেন, তবে এটি নিশ্চিত করতে পারেন। উদাহরণস্বরূপ, শুরু করার জন্য আপনি ‘ডিপ্লয় এ নোড.জেএস ওয়েব সার্ভিস ফ্রম সোর্স কোড’ কুইকস্টার্টটি অনুসরণ করতে পারেন।
২. ক্লাউড শেল সক্রিয় করুন
- ক্লাউড শেল টার্মিনালে যান: https://shell.cloud.google.com/?show=terminal। আপনি যদি প্রথমবারের মতো ক্লাউড শেল চালু করেন, তাহলে এটি কী তা বর্ণনা করে একটি মধ্যবর্তী স্ক্রিন প্রদর্শিত হবে। যদি একটি মধ্যবর্তী স্ক্রিন প্রদর্শিত হয়, তাহলে 'Continue ' ক্লিক করুন। ক্লাউড শেল প্রোভিশন এবং কানেক্ট হতে মাত্র কয়েক মুহূর্ত সময় লাগবে।
- আপনার
gcloudপ্রজেক্ট সেট করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান: <PROJECT_ID> এর জায়গায় আপনার প্রজেক্ট আইডি বসান। উদাহরণ:gcloud config set project <PROJECT_ID>
অনুমোদন করতে বলা হলে, Authorize-এ ক্লিক করুন।gcloud config set project js-frameworks
৩. এপিআই সক্রিয় করুন
এই কোডল্যাবটি ব্যবহার শুরু করার আগে, আপনাকে কয়েকটি এপিআই (API) সক্রিয় করতে হবে। এই কোডল্যাবটির জন্য নিম্নলিখিত এপিআইগুলো ব্যবহার করা প্রয়োজন। আপনি নিম্নলিখিত কমান্ডটি চালিয়ে সেই এপিআইগুলো সক্রিয় করতে পারেন:
gcloud services enable \
cloudbuild.googleapis.com \
artifactregistry.googleapis.com \
run.googleapis.com
তারপর আপনি এনভায়রনমেন্ট ভেরিয়েবল সেট করতে পারবেন, যেগুলো এই কোডল্যাব জুড়ে ব্যবহৃত হবে।
৪. ডিফল্ট অঞ্চল কনফিগার করুন
আপনি প্রতিটি ডেপ্লয়মেন্টের জন্য আলাদাভাবে অঞ্চল নির্ধারণ করতে পারেন। এই কমান্ডটি ডিফল্ট অঞ্চল us-central1 এ সেট করে দেবে, ফলে আপনাকে প্রতিটির জন্য আলাদাভাবে এটি সেট করতে হবে না।
gcloud config set run/region us-central1
৫. গিট কনফিগার করুন
কিছু লাইব্রেরি ডিফল্টভাবে ভার্সন কন্ট্রোলের জন্য git ব্যবহার করার কথা ধরে নেয়। যদি আপনার মেশিনে আগে থেকেই git কনফিগার করা থাকে (উদাহরণস্বরূপ: আপনি এই ল্যাবটি স্থানীয়ভাবে চালাচ্ছেন), তাহলে আপনার এই ধাপগুলো চালানোর প্রয়োজন নেই।
git config --global user.email "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
৬. অ্যাঙ্গুলার এসএসআর (অ্যাঙ্গুলার)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- সার্ভার সাইড রেন্ডারিং (SSR) ব্যবহার করে এমন একটি অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করুন।
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx @angular/cli new angular-app --ssr
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd angular-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://angular-app-xxxxxxxxxx-uc.a.run.app

আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।
ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে অ্যাঙ্গুলার প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf angular-app - Angular Cloud Run পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete angular-appEnterকী চাপুন।
৭. Nuxt.js (Vue.js)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি Nuxt.js অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx nuxi init nuxt-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd nuxt-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://nuxt-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে Nuxt.js প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf nuxt-app - Nuxt.js ক্লাউড রান পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete nuxt-appEnterকী চাপুন।
৮. নেক্সট.জেএস (রিঅ্যাক্ট)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি Next.js অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-next-app next-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd next-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://next-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে Next.js প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf next-app - Next.js ক্লাউড রান পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete next-appEnterকী চাপুন।
৯. রিমিক্স (প্রতিক্রিয়া)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি রিমিক্স অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-remix remix-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd remix-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://remix-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে রিমিক্স প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf remix-app - Remix Cloud Run পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete remix-appEnterকী চাপুন।
১০. ক্লাউড শেল পরিষ্কার করা
আপনি যদি ক্লাউড শেল ব্যবহার না করেন অথবা শুধুমাত্র একটি অ্যাপ্লিকেশন ডেপ্লয় করেন, তাহলে এই ধাপটি ঐচ্ছিক।
ক্লাউড শেল একটি স্থায়ী ৫ জিবি হোম ডিরেক্টরি প্রদান করে এবং এটি গুগল ক্লাউডে চলে।
ক্লাউড শেলের মাধ্যমে আটটি ফ্রেমওয়ার্কই ডেপ্লয় করতে হলে, আপনাকে বাকি অ্যাপ্লিকেশনগুলোর জন্য জায়গা তৈরি করতে হবে।
ক্লাউড শেল থেকে প্রজেক্টগুলো মুছে ফেললেও আপনার ডেপ্লয় করা ক্লাউড রান সার্ভিসগুলো ডিলিট হবে না।
আপনার তৈরি করা অ্যাপ্লিকেশনগুলো মুছে ফেলার জন্য, এই কমান্ডগুলো চালান:
cd ~ rm -rf angular-app/ rm -rf nuxt-app/ rm -rf next-app/ rm -rf remix-app/
১১. স্ভেল্টকিট (স্ভেল্ট)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি SvelteKit অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-svelte svelte-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd svelte-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://svelte-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে SvelteKit প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf svelte-app - SvelteKit ক্লাউড রান পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete svelte-appEnterকী চাপুন।
১২. সলিডস্টার্ট (সলিড)
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি সলিডস্টার্ট অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-solid solid-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd solid-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://solid-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে SolidStart প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf solid-app - SolidStart Cloud Run পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete solid-appEnterকী চাপুন।
১৩. জ্যোতির্বিদ্যা
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি জ্যোতিষ অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-astro astro-app
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd astro-app
- Node.js-এর জন্য Astro অ্যাডাপ্টারটি যোগ করুন
npx astro add node
-
package.jsonএstartস্ক্রিপ্ট আপডেট করুন।npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://astro-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে অ্যাস্ট্রো প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf astro-app - অ্যাস্ট্রো ক্লাউড রান পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে চাইলে,gcloud run services delete astro-appEnterকী চাপুন।
১৪. কুইক
- সেই ডিরেক্টরিতে যান যেখানে আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি তৈরি করতে চান।
cd ~
- একটি কুইক অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেnpx create-qwik
Enterকী চাপুন। - আপনার তৈরি করা নতুন প্রজেক্ট ফোল্ডারটিতে প্রবেশ করুন।
cd qwik-app
- ক্লাউড রানের জন্য কুইক অ্যাডাপ্টার যোগ করুন
npm run qwik add cloud-run
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দ জানতে চাওয়া হলে, ডিফল্ট পছন্দগুলো গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী চাপুন।
আপনার অ্যাপ্লিকেশনটি দেখুন
ডেপ্লয়মেন্ট হতে কয়েক মিনিট সময় লাগবে। সম্পন্ন হলে, ক্লাউড রান নিচের মতো একটি ইউআরএল ফেরত দেবে:
https://qwik-app-xxxxxxxxxx-uc.a.run.app
আপনার ডেপ্লয় করা অ্যাপ্লিকেশনটি দেখতে, প্রদত্ত URL-টি একটি নতুন ব্রাউজার ট্যাবে খুলুন।

ঐচ্ছিক পরিচ্ছন্নতা
- স্থানীয়ভাবে Qwik প্রজেক্টটি মুছে ফেলুন
cd .. rm -rf qwik-app - Qwik Cloud Run পরিষেবাটি মুছে ফেলুন
চালিয়ে যেতে বলা হলে,gcloud run services delete qwik-appEnterকী চাপুন।
১৫. অভিনন্দন!
কোডল্যাবটি সম্পন্ন করার জন্য অভিনন্দন!
আমরা Quickstart: Deploy to Cloud Run from a git repository- এর ডকুমেন্টেশন পর্যালোচনা করার পরামর্শ দিচ্ছি, যাতে ভার্সন কন্ট্রোলে প্রতিটি পুশের সাথে আপনার ভবিষ্যতের বিল্ডগুলো স্বয়ংক্রিয়ভাবে ডেপ্লয় হতে পারে।
আমরা যা আলোচনা করেছি
- ক্লাউড বিল্ড দ্বারা সমর্থিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্বয়ংক্রিয়ভাবে স্থাপন করবেন
- অ্যাঙ্গুলার এসএসআর - অ্যাঙ্গুলারের উপর ভিত্তি করে
- Nuxt.js - Vue.js এর উপর ভিত্তি করে
- Next.js - React-এর উপর ভিত্তি করে
- রিমিক্স - রিঅ্যাক্ট-এর উপর ভিত্তি করে
- SvelteKit - Svelte-এর উপর ভিত্তি করে
- সলিডস্টার্ট - সলিড.জেএস (Solid.js) ভিত্তিক
- কনফিগারেশন প্রয়োজন এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
- অ্যাস্ট্রো
- কুইক
১৬. পরিষ্কার করা
অনিচ্ছাকৃত চার্জ এড়াতে (উদাহরণস্বরূপ, যদি এই ক্লাউড রান পরিষেবাটি আপনার ফ্রি টিয়ারের মাসিক ক্লাউড রান ব্যবহারের বরাদ্দের চেয়ে বেশিবার অনিচ্ছাকৃতভাবে চালু হয়ে যায়), আপনি হয় ক্লাউড রান জবটি অথবা ধাপ ১-এ তৈরি করা প্রজেক্টটি ডিলিট করে দিতে পারেন।
Cloud Run পরিষেবাগুলি মুছে ফেলার জন্য, https://console.cloud.google.com/run/ ঠিকানায় Cloud Run ক্লাউড কনসোলে যান এবং Cloud Run পরিষেবাগুলি ডিলিট করে দিন।
আপনি যদি পুরো প্রজেক্টটি মুছে ফেলতে চান, তাহলে আপনি https://console.cloud.google.com/cloud-resource-manager -এ গিয়ে, ধাপ ২-এ তৈরি করা প্রজেক্টটি নির্বাচন করে 'ডিলিট' (Delete) বিকল্পটি বেছে নিতে পারেন। প্রজেক্টটি মুছে ফেললে, আপনাকে আপনার ক্লাউড এসডিকে (Cloud SDK)-তে প্রজেক্ট পরিবর্তন করতে হবে। আপনি gcloud projects list চালিয়ে সমস্ত উপলব্ধ প্রজেক্টের তালিকা দেখতে পারেন।