ক্লাউড রানে সমস্ত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক কীভাবে স্থাপন করবেন

1. ভূমিকা

ওভারভিউ

এই কোডল্যাবে, ক্লাউড রানে আটটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন স্থাপন করুন:

  • কৌণিক SSR - কৌণিক উপর ভিত্তি করে
  • Nuxt.js - Vue.js এর উপর ভিত্তি করে
  • Next.js - প্রতিক্রিয়ার উপর ভিত্তি করে
  • রিমিক্স - প্রতিক্রিয়ার উপর ভিত্তি করে
  • SvelteKit - Svelte এর উপর ভিত্তি করে
  • SolidStart - Solid.js এর উপর ভিত্তি করে
  • অ্যাস্ট্রো
  • কুইক

কৌণিক অ্যাপ্লিকেশন স্ক্রিনশটNuxt.js অ্যাপ্লিকেশনের স্ক্রিনশটNext.js অ্যাপ্লিকেশনের স্ক্রিনশটরিমিক্স অ্যাপ্লিকেশন স্ক্রিনশটSvelteKit অ্যাপ্লিকেশন স্ক্রিনশটসলিডস্টার্ট অ্যাপ্লিকেশন স্ক্রিনশটঅ্যাস্ট্রো অ্যাপ্লিকেশন স্ক্রিনশটQwik অ্যাপ্লিকেশন স্ক্রিনশট

আপনি কি শিখবেন

  • ক্লাউড বিল্ড স্বয়ংক্রিয়ভাবে সমর্থন করে এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
  • কনফিগারেশন প্রয়োজন যে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্থাপন কিভাবে

পূর্বশর্ত

2. ক্লাউড শেল সক্রিয় করুন

  1. ক্লাউড শেল টার্মিনালে নেভিগেট করুন: https://shell.cloud.google.com/?show=terminal যদি এটি আপনার প্রথমবার ক্লাউড শেল শুরু হয়, তাহলে এটি কী তা বর্ণনা করে আপনাকে একটি মধ্যবর্তী স্ক্রীন উপস্থাপন করা হবে। যদি আপনি একটি মধ্যবর্তী স্ক্রীনের সাথে উপস্থাপিত হয়ে থাকেন, তাহলে চালিয়ে যান ক্লিক করুন। ক্লাউড শেলের সাথে সংযোগ করতে এবং সংযোগ করতে এটি শুধুমাত্র কয়েক মুহূর্ত লাগবে।
  2. আপনার gcloud প্রকল্প সেট করতে ক্লাউড শেলে নিম্নলিখিত কমান্ডটি চালান:
    gcloud config set project <PROJECT_ID>
    আপনার প্রকল্প আইডি দিয়ে <PROJECT_ID> প্রতিস্থাপন করুন। উদাহরণ:
    gcloud config set project js-frameworks
    অনুমোদন করার জন্য অনুরোধ করা হলে, অনুমোদন ক্লিক করুন।

3. API সক্রিয় করুন৷

আপনি এই কোডল্যাব ব্যবহার শুরু করার আগে, আপনাকে সক্রিয় করতে হবে এমন বেশ কয়েকটি API আছে। এই কোডল্যাবের জন্য নিম্নলিখিত API ব্যবহার করা প্রয়োজন। আপনি নিম্নলিখিত কমান্ডটি চালিয়ে সেই APIগুলি সক্ষম করতে পারেন:

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

তারপর আপনি পরিবেশ ভেরিয়েবল সেট করতে পারেন যা এই কোডল্যাব জুড়ে ব্যবহার করা হবে।

4. ডিফল্ট অঞ্চল কনফিগার করুন

আপনি প্রতিটি স্থাপনার জন্য পৃথকভাবে অঞ্চল সেট করতে পারেন। এই কমান্ডটি ডিফল্ট অঞ্চলটিকে us-central1 এ সেট করবে যাতে আপনাকে প্রতিটির জন্য এটি সেট করতে না হয়। 

gcloud config set run/region us-central1

5. গিট কনফিগার করুন

কিছু লাইব্রেরি ডিফল্টরূপে সংস্করণ নিয়ন্ত্রণের জন্য git ব্যবহার করা আশা করে। আপনি যদি ইতিমধ্যেই আপনার মেশিনে git কনফিগার করে থাকেন (উদাহরণ: আপনি স্থানীয়ভাবে এই ল্যাবটি চালাচ্ছেন), আপনাকে এই পদক্ষেপগুলি চালানোর দরকার নেই। 

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. কৌণিক SSR (কৌণিক)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. সার্ভার সাইড রেন্ডারিং (SSR) ব্যবহার করে একটি কৌণিক অ্যাপ্লিকেশন তৈরি করুন 
    npx @angular/cli new angular-app --ssr
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd angular-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন: 

https://angular-app-xxxxxxxxxx-uc.a.run.app

কৌণিক অ্যাপ্লিকেশন স্ক্রিনশট

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে কৌণিক প্রকল্প মুছুন 
    cd ..
rm -rf angular-app
  2. কৌণিক ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete angular-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

7. Nuxt.js (Vue.js)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি Nuxt.js অ্যাপ্লিকেশন তৈরি করুন 
    npx nuxi init nuxt-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd nuxt-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url প্রদান করবে যেমন:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

Nuxt.js অ্যাপ্লিকেশনের স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে Nuxt.js প্রকল্প মুছুন 
    cd ..
rm -rf nuxt-app
  2. Nuxt.js ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete nuxt-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

8. Next.js (প্রতিক্রিয়া)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি Next.js অ্যাপ্লিকেশন তৈরি করুন 
    npx create-next-app next-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd next-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন:

https://next-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

Next.js অ্যাপ্লিকেশনের স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে Next.js প্রকল্পটি মুছুন 
    cd ..
rm -rf next-app
  2. Next.js ক্লাউড রান পরিষেবাটি মুছুন 
    gcloud run services delete next-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

9. রিমিক্স (প্রতিক্রিয়া)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি রিমিক্স অ্যাপ্লিকেশন তৈরি করুন 
    npx create-remix remix-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd remix-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন:

https://remix-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

রিমিক্স অ্যাপ্লিকেশন স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে রিমিক্স প্রকল্প মুছুন 
    cd ..
rm -rf remix-app
  2. রিমিক্স ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete remix-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

10. ক্লাউড শেল পরিষ্কার করা

আপনি যদি ক্লাউড শেল ব্যবহার না করেন বা আপনি শুধুমাত্র একটি একক অ্যাপ্লিকেশন স্থাপন করছেন, এই পদক্ষেপটি ঐচ্ছিক

ক্লাউড শেল একটি স্থায়ী 5 জিবি হোম ডিরেক্টরি অফার করে এবং Google ক্লাউডে চলে।

ক্লাউড শেল সহ সমস্ত আটটি ফ্রেমওয়ার্ক স্থাপন করতে, আপনাকে অবশিষ্ট অ্যাপ্লিকেশনগুলির জন্য স্থান তৈরি করতে হবে।

ক্লাউড শেল থেকে প্রজেক্টগুলি মুছে ফেলার ফলে আপনি মোতায়েন করা ক্লাউড রান পরিষেবাগুলি মুছে ফেলবে না।

আপনি ইতিমধ্যে তৈরি করা অ্যাপ্লিকেশনগুলি সাফ করতে, এই কমান্ডগুলি চালান: 

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি SvelteKit অ্যাপ্লিকেশন তৈরি করুন 
    npx create-svelte svelte-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd svelte-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

SvelteKit অ্যাপ্লিকেশন স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে SvelteKit প্রকল্প মুছুন 
    cd ..
rm -rf svelte-app
  2. SvelteKit ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete svelte-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

12. সলিডস্টার্ট (সলিড)

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি সলিডস্টার্ট অ্যাপ্লিকেশন তৈরি করুন 
    npx create-solid solid-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd solid-app
  4. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন:

https://solid-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

সলিডস্টার্ট অ্যাপ্লিকেশন স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে SolidStart প্রকল্প মুছুন 
    cd ..
rm -rf solid-app
  2. সলিডস্টার্ট ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete solid-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

13. অ্যাস্ট্রো

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি Astro অ্যাপ্লিকেশন তৈরি করুন 
    npx create-astro astro-app
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd astro-app
  4. Node.js-এর জন্য Astro অ্যাডাপ্টার যোগ করুন 
    npx astro add node
  5. package.json এ start স্ক্রিপ্ট আপডেট করুন
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি url প্রদান করবে যেমন:

https://astro-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

অ্যাস্ট্রো অ্যাপ্লিকেশন স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে অ্যাস্ট্রো প্রকল্পটি মুছুন 
    cd ..
rm -rf astro-app
  2. অ্যাস্ট্রো ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete astro-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

14. কুইক

  1. ডিরেক্টরিতে নেভিগেট করুন যেখানে আপনি আপনার কৌণিক অ্যাপ্লিকেশন তৈরি করতে চান 
    cd ~
  2. একটি Qwik অ্যাপ্লিকেশন তৈরি করুন 
    npx create-qwik
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।
  3. আপনার তৈরি করা নতুন প্রোজেক্ট ফোল্ডারে নেভিগেট করুন 
    cd qwik-app
  4. ক্লাউড রানের জন্য Qwik অ্যাডাপ্টার যোগ করুন 
    npm run qwik add cloud-run
  5. অ্যাপ্লিকেশন স্থাপন 
    gcloud run deploy --allow-unauthenticated
    আপনার পছন্দের জন্য অনুরোধ করা হলে, ডিফল্টগুলি গ্রহণ করতে Enter কী টিপুন।

আপনার আবেদন দেখুন

স্থাপনে কয়েক মিনিট সময় লাগবে। সম্পূর্ণ হলে, ক্লাউড রান একটি ইউআরএল ফিরিয়ে দেবে যেমন:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

আপনার স্থাপন করা অ্যাপ্লিকেশন দেখতে একটি নতুন ব্রাউজার ট্যাবে প্রদত্ত URLটি খুলুন৷

Qwik অ্যাপ্লিকেশন স্ক্রিনশট

ঐচ্ছিক ক্লিন আপ

  1. স্থানীয়ভাবে Qwik প্রকল্প মুছুন 
    cd ..
rm -rf qwik-app
  2. Qwik ক্লাউড রান পরিষেবা মুছুন 
    gcloud run services delete qwik-app
    আপনি যদি চালিয়ে যেতে চান তাহলে অনুরোধ করা হলে, চালিয়ে যেতে Enter কী টিপুন।

15. অভিনন্দন!

কোডল্যাব সম্পূর্ণ করার জন্য অভিনন্দন!

আমরা Quickstart-এ ডকুমেন্টেশন পর্যালোচনা করার পরামর্শ দিই: একটি গিট রিপোজিটরি থেকে ক্লাউড রানে স্থাপন করুন যাতে আপনার ভবিষ্যত বিল্ডগুলি সংস্করণ নিয়ন্ত্রণে প্রতিটি পুশের সাথে স্বয়ংক্রিয়ভাবে স্থাপন করতে পারে।

আমরা কি কভার

  • ক্লাউড বিল্ড স্বয়ংক্রিয়ভাবে সমর্থন করে এমন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি কীভাবে স্থাপন করবেন
    • কৌণিক SSR - কৌণিক উপর ভিত্তি করে
    • Nuxt.js - Vue.js এর উপর ভিত্তি করে
    • Next.js - প্রতিক্রিয়ার উপর ভিত্তি করে
    • রিমিক্স - প্রতিক্রিয়ার উপর ভিত্তি করে
    • SvelteKit - Svelte এর উপর ভিত্তি করে
    • SolidStart - Solid.js এর উপর ভিত্তি করে
  • কনফিগারেশন প্রয়োজন যে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্থাপন কিভাবে
    • অ্যাস্ট্রো
    • কুইক

16. পরিষ্কার করুন

অসাবধানতাবশত চার্জ এড়াতে, (উদাহরণস্বরূপ, যদি এই ক্লাউড রান পরিষেবাটি আপনার মাসিক ক্লাউড রান ইনভোকমেন্ট বরাদ্দের চেয়ে অজান্তেই ফ্রি টিয়ারে বেশি বার আহ্বান করা হয়), আপনি হয় ক্লাউড রানের কাজটি মুছে ফেলতে পারেন বা ধাপ 1 এ আপনার তৈরি করা প্রকল্পটি মুছে ফেলতে পারেন।

ক্লাউড রান পরিষেবাগুলি মুছতে, https://console.cloud.google.com/run/- এ ক্লাউড রান ক্লাউড কনসোলে যান এবং ক্লাউড রান পরিষেবাগুলি মুছুন৷

আপনি যদি সম্পূর্ণ প্রকল্প মুছে ফেলার সিদ্ধান্ত নেন, আপনি https://console.cloud.google.com/cloud-resource-manager- এ যেতে পারেন, ধাপ 2-এ আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন এবং মুছুন নির্বাচন করুন৷ আপনি যদি প্রকল্পটি মুছে ফেলেন, তাহলে আপনাকে আপনার ক্লাউড SDK-এ প্রকল্পগুলি পরিবর্তন করতে হবে৷ আপনি gcloud projects list চালিয়ে সমস্ত উপলব্ধ প্রকল্পের তালিকা দেখতে পারেন।