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








তুমি কি শিখবে
- ক্লাউড বিল্ড স্বয়ংক্রিয়ভাবে সমর্থন করে এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
- কনফিগারেশন প্রয়োজন এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক কীভাবে স্থাপন করবেন
পূর্বশর্ত
- আপনি ক্লাউড শেল টার্মিনালে লগ ইন করেছেন।
- আপনার কাছে একটি Google ক্লাউড প্রোজেক্ট আছে যার বিলিং সক্ষম করা আছে এবং ক্লাউড রানে স্থাপনের অনুমতি আছে।
- আপনি যদি আগে কোনও ক্লাউড রান পরিষেবা স্থাপন করে থাকেন তবে আপনি এটি নিশ্চিত করতে পারেন। উদাহরণস্বরূপ, শুরু করার জন্য আপনি সোর্স কোড কুইকস্টার্ট থেকে একটি Node.js ওয়েব পরিষেবা স্থাপন করতে পারেন।
2. ক্লাউড শেল সক্রিয় করুন
- ক্লাউড শেল টার্মিনালে নেভিগেট করুন: https://shell.cloud.google.com/?show=terminal যদি আপনি প্রথমবার ক্লাউড শেল শুরু করেন, তাহলে আপনাকে একটি মধ্যবর্তী স্ক্রিন দেখানো হবে যা এটি কী তা বর্ণনা করবে। যদি আপনার একটি মধ্যবর্তী স্ক্রিন দেখানো হয়, তাহলে চালিয়ে যান ক্লিক করুন। ক্লাউড শেল তৈরি এবং সংযোগ করতে মাত্র কয়েক মিনিট সময় লাগবে।
- আপনার
gcloudপ্রজেক্ট সেট করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান: <PROJECT_ID> কে আপনার প্রোজেক্ট আইডি দিয়ে প্রতিস্থাপন করুন। উদাহরণ:gcloud config set project <PROJECT_ID>
অনুমোদনের জন্য অনুরোধ করা হলে, অনুমোদন করুন এ ক্লিক করুন।gcloud config set project js-frameworks
৩. API গুলি সক্ষম করুন
এই কোডল্যাব ব্যবহার শুরু করার আগে, আপনাকে বেশ কয়েকটি API সক্রিয় করতে হবে। এই কোডল্যাবটির জন্য নিম্নলিখিত API ব্যবহার করা প্রয়োজন। আপনি নিম্নলিখিত কমান্ডটি চালিয়ে এই 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
৬. কৌণিক SSR (কৌণিক)
- আপনি যে ডিরেক্টরিতে আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করতে চান সেখানে নেভিগেট করুন।
cd ~
- সার্ভার সাইড রেন্ডারিং (SSR) ব্যবহার করে এমন একটি অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতেnpx @angular/cli new angular-app --ssr
Enterকী টিপুন। - আপনার তৈরি করা নতুন প্রকল্প ফোল্ডারে নেভিগেট করুন।
cd angular-app
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
https://angular-app-xxxxxxxxxx-uc.a.run.app

আপনার ব্যবহৃত অ্যাপ্লিকেশনটি দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন।
ঐচ্ছিক পরিষ্কার আপ
- স্থানীয়ভাবে অ্যাঙ্গুলার প্রকল্পটি মুছুন
cd .. rm -rf angular-app - অ্যাঙ্গুলার ক্লাউড রান পরিষেবাটি মুছুন
আপনি কি চালিয়ে যেতে চান তা জিজ্ঞাসা করা হলে, চালিয়ে যেতে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কী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
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কী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
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কী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
https://remix-app-xxxxxxxxxx-uc.a.run.app
আপনার ব্যবহৃত অ্যাপ্লিকেশনটি দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন।

ঐচ্ছিক পরিষ্কার আপ
- রিমিক্স প্রকল্পটি স্থানীয়ভাবে মুছুন
cd .. rm -rf remix-app - রিমিক্স ক্লাউড রান পরিষেবাটি মুছুন
আপনি কি চালিয়ে যেতে চান তা জিজ্ঞাসা করা হলে, চালিয়ে যেতে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কী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
https://svelte-app-xxxxxxxxxx-uc.a.run.app
আপনার ব্যবহৃত অ্যাপ্লিকেশনটি দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন।

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

ঐচ্ছিক পরিষ্কার আপ
- স্থানীয়ভাবে SolidStart প্রকল্পটি মুছুন
cd .. rm -rf solid-app - সলিডস্টার্ট ক্লাউড রান পরিষেবাটি মুছুন
আপনি কি চালিয়ে যেতে চান তা জিজ্ঞাসা করা হলে, চালিয়ে যেতে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কী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
https://astro-app-xxxxxxxxxx-uc.a.run.app
আপনার ব্যবহৃত অ্যাপ্লিকেশনটি দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন।

ঐচ্ছিক পরিষ্কার আপ
- স্থানীয়ভাবে অ্যাস্ট্রো প্রকল্পটি মুছুন
cd .. rm -rf astro-app - অ্যাস্ট্রো ক্লাউড রান পরিষেবাটি মুছুন
আপনি কি চালিয়ে যেতে চান তা জিজ্ঞাসা করা হলে, চালিয়ে যেতেgcloud run services delete astro-appEnterকী টিপুন।
১৪. কিউইক
- আপনি যে ডিরেক্টরিতে আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশন তৈরি করতে চান সেখানে নেভিগেট করুন।
cd ~
- একটি Qwik অ্যাপ্লিকেশন তৈরি করুন
আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতেnpx create-qwik
Enterকী টিপুন। - আপনার তৈরি করা নতুন প্রকল্প ফোল্ডারে নেভিগেট করুন।
cd qwik-app
- ক্লাউড রানের জন্য Qwik অ্যাডাপ্টার যোগ করুন
npm run qwik add cloud-run
- অ্যাপ্লিকেশনটি স্থাপন করুন
আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতেgcloud run deploy --allow-unauthenticated
Enterকী টিপুন।
আপনার আবেদনটি দেখুন
স্থাপনাটি কয়েক মিনিট সময় নেবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url ফেরত দেবে যেমন:
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- এর ডকুমেন্টেশন পর্যালোচনা করার পরামর্শ দিচ্ছি যাতে আপনার ভবিষ্যতের বিল্ডগুলি প্রতিটি পুশ টু ভার্সন কন্ট্রোলের সাথে স্বয়ংক্রিয়ভাবে স্থাপন করতে পারে।
আমরা কী কভার করেছি
- ক্লাউড বিল্ড স্বয়ংক্রিয়ভাবে সমর্থন করে এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
- অ্যাঙ্গুলার SSR - অ্যাঙ্গুলারের উপর ভিত্তি করে
- Nuxt.js - Vue.js এর উপর ভিত্তি করে
- Next.js - React এর উপর ভিত্তি করে
- রিমিক্স - রিঅ্যাক্টের উপর ভিত্তি করে
- SvelteKit - Svelte এর উপর ভিত্তি করে
- SolidStart - Solid.js এর উপর ভিত্তি করে
- কনফিগারেশন প্রয়োজন এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক কীভাবে স্থাপন করবেন
- অ্যাস্ট্রো
- কিউইক
১৬. পরিষ্কার করা
অসাবধানতাবশত চার্জ এড়াতে, (উদাহরণস্বরূপ, যদি এই ক্লাউড রান পরিষেবাটি আপনার মাসিক ফ্রি টিয়ারে ক্লাউড রান ইনভোকমেন্ট বরাদ্দের চেয়ে বেশিবার অসাবধানতাবশত চালু করা হয়), আপনি হয় ক্লাউড রান কাজটি মুছে ফেলতে পারেন অথবা ধাপ ১-এ তৈরি করা প্রকল্পটি মুছে ফেলতে পারেন।
ক্লাউড রান পরিষেবাগুলি মুছে ফেলার জন্য, https://console.cloud.google.com/run/ এ ক্লাউড রান ক্লাউড কনসোলে যান এবং ক্লাউড রান পরিষেবাগুলি মুছে ফেলুন।
যদি আপনি সম্পূর্ণ প্রকল্পটি মুছে ফেলতে চান, তাহলে আপনি https://console.cloud.google.com/cloud-resource-manager এ যেতে পারেন, ধাপ ২-এ তৈরি করা প্রকল্পটি নির্বাচন করুন এবং মুছে ফেলুন নির্বাচন করুন। যদি আপনি প্রকল্পটি মুছে ফেলেন, তাহলে আপনাকে আপনার ক্লাউড SDK-তে প্রকল্পগুলি পরিবর্তন করতে হবে। আপনি gcloud projects list চালিয়ে সমস্ত উপলব্ধ প্রকল্পের তালিকা দেখতে পারেন।