প্রতি মাসে $1-এর কম খরচে কীভাবে একটি স্ট্যাটিক, ব্যক্তিগত ওয়েবসাইট তৈরি করবেন

এই পোস্টের লক্ষ্য হল আপনাকে দেখানো যে আপনি কীভাবে আপনার নিজের স্ট্যাটিক ব্যক্তিগত ওয়েবসাইট তৈরি করতে পারেন প্রতি মাসে $1 এর কম। আমি জানি, আপনি সম্ভবত ভাবছেন: "আমি কি ঠিক পড়েছি?"। তুমি করেছ! অবশ্যই সেই লক্ষ্যে পৌঁছানোর জন্য সতর্কতা রয়েছে, কিন্তু আপনার ওয়েবসাইটের যাত্রার শুরুতে, আপনার নিজের স্ট্যাটিক ওয়েবসাইট হোস্ট করতে মাসে মাত্র $0.01 খরচ করতে হবে। এই পোস্টের টার্গেট শ্রোতা হল এমন কেউ যার কিছু জাভাস্ক্রিপ্ট অভিজ্ঞতা এবং ওয়েব ডেভেলপমেন্টের সাধারণ ধারণা রয়েছে। আপনার যদি সেই ব্যাকগ্রাউন্ড না থাকে, তাহলে ঘামবেন না! আমি এই পোস্টের মধ্যে ধারণা এবং ধারণা ব্যাখ্যা করার জন্য আমার যথাসাধ্য চেষ্টা করব যাতে কেউ অনুসরণ করতে পারে!

আমরা শুরু করার আগে, আমাদের প্রথম সাইট তৈরি করতে আমরা যে বিভিন্ন পদ ব্যবহার করব তা বুঝতে আমাদের সাহায্য করার জন্য কিছু সংজ্ঞা জেনে নেওয়া যাক। Google ক্লাউডে আমাদের সাইট যোগ করার প্রক্রিয়ার মধ্য দিয়ে যাওয়ার সময় এই সংজ্ঞাগুলিকে নির্দ্বিধায় উল্লেখ করুন:

• ওয়েবসাইট ডোমেন: ইন্টারনেটে একটি ওয়েবসাইট সনাক্ত করার জন্য ব্যবহৃত একটি ঠিকানা, যেমন yelp.com
• ডোমেন নিবন্ধন প্রদানকারী: ডোমেনের একটি প্রদানকারী, যেখানে আপনি একটি কাস্টম ডোমেন কিনতে পারেন
• স্ট্যাটিক ওয়েবসাইট: এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলের যেকোন সংমিশ্রণের একটি নির্দিষ্ট সংখ্যক দিয়ে তৈরি একটি ওয়েবসাইট
• Next.js: একটি React.js ফ্রেমওয়ার্ক যা সার্ভার সাইড রেন্ডারিং এবং স্ট্যাটিক সাইট জেনারেশন সমর্থন করে
• স্টোরেজ অবজেক্ট: স্টোরেজের জন্য ব্যবহৃত একটি সত্তা, ফটো বা ভিডিও বা সত্যিই অন্য কোনো ধরনের ফাইল
• Google ক্লাউড: একটি ক্লাউড কম্পিউটিং প্ল্যাটফর্ম যা বিভিন্ন পরিষেবা প্রদান করে, আমরা স্টোরেজ নিয়ে উদ্বিগ্ন
• গুগল ক্লাউড স্টোরেজ: গুগল ক্লাউডের অবজেক্ট স্টোরেজ পরিষেবা, আমরা আমাদের ওয়েবসাইটের স্ট্যাটিক ফাইলগুলি সংরক্ষণের জন্য এটি ব্যবহার করব
• বালতি (গুগল ক্লাউড স্টোরেজ): একটি ধারক যা আপনার ওয়েবসাইটের ফাইল ধারণ করে

এই নিবন্ধটি অনুমান করে যে পাঠকের ওয়েবসাইট বিকাশ এবং প্রোগ্রামিং সম্পর্কে কিছু মৌলিক জ্ঞান রয়েছে। আমি অনুমান করব যে প্রতিটি পাঠকের নিম্নলিখিত রয়েছে:

• ওয়েবসাইট ডেভেলপমেন্টের একটি বেসলাইন বোঝা - ওয়েব ডেভেলপমেন্টের ভূমিকা (freecodecamp.org)
• NPM এর সাথে অভিজ্ঞতা
• React.js এবং Next.js এর প্রাথমিক জ্ঞান
• একটি CLI সঙ্গে আরাম
• আপনার কম্পিউটারে একটি আইডিই ইনস্টল করা হয়েছে - VSCode হল আমি যা ব্যবহার করি

আমি কাজের ক্রমবর্ধমান অংশে একটি লক্ষ্য ভেঙ্গে আরও ভাল চিন্তা করতে ঝোঁক. আমরা আমাদের ওয়েবসাইট তৈরি করার সময় আমাদের কাজগুলিকে সেভাবে ফ্রেম করি:

1. সেটআপ
2. আমাদের সাইটের জন্য স্টার্টার কোড
3. আমাদের সাইটের জন্য একটি বালতি কনফিগার করা হচ্ছে
4. পরবর্তী পদক্ষেপ 😎

সেটআপ

আপনি যদি নিজের ব্যক্তিগত ওয়েবসাইট তৈরি করতে চান তাহলে শুরু করার জন্য আপনার একটি ডোমেন প্রয়োজন। যদিও আমরা প্রাথমিকভাবে এটি ব্যবহার করব না, তবে এখন এটি করা মূল্যবান যাতে আমরা পরবর্তী নিবন্ধে কাস্টম ডোমেনটি ব্যবহার করতে পারি। আমার জন্য, আমার ডোমেনটি ছিল afro-cloud.com , কিন্তু যতক্ষণ পর্যন্ত একজন রেজিস্ট্রেশন প্রদানকারীর কাছে ডোমেনটি উপলব্ধ থাকে ততক্ষণ আপনি যা মনে আসে তা বেছে নিতে পারেন। আপনি ব্যবহার করতে পারেন এমন অনেকগুলি ডোমেন নিবন্ধন প্রদানকারী রয়েছে, আমি ব্যক্তিগতভাবে GoDaddy ব্যবহার করেছি, তবে এখানে বিকল্পগুলির একটি উপসেট উপলব্ধ রয়েছে (আমি এই পরিষেবাগুলির কোনওটির সাথে সংযুক্ত নই):

• যাও বাবা
• ব্লুহোস্ট
• স্কোয়ারস্পেস

এখন যেহেতু আমরা আমাদের ডোমেন সেট আপ করেছি, আসুন একটি Google ক্লাউড অ্যাকাউন্ট তৈরি করি এবং বিলিং সক্ষম করি৷

1. Google ক্লাউড কনসোলে নেভিগেট করুন
2. একটি বিদ্যমান Google অ্যাকাউন্ট ব্যবহার করুন বা কনসোলে প্রবেশ করতে একটি নতুন একটি তৈরি করুন (এটি Google ক্লাউড ব্যবহার করার জন্য প্রয়োজন)
3. স্ক্রিনের উপরের বারে প্রকল্প নির্বাচন ড্রপডাউনে ক্লিক করে একটি নতুন প্রকল্প তৈরি করুন
4. "বিলিং" এ নেভিগেট করুন
5. Google ক্লাউড দ্বারা প্রদত্ত নির্দেশাবলী অনুসরণ করে একটি নতুন বিলিং অ্যাকাউন্ট তৈরি করুন৷

দারুণ! এখন বিলিং সক্ষম করে, আমরা Google ক্লাউড পরিষেবাগুলি ব্যবহার করা শুরু করতে পারি৷ আমরা আপাতত এই ট্যাবটির সাথে প্রস্তুত, কিন্তু আমরা নিবন্ধে পরে এই পৃষ্ঠায় ফিরে আসব তাই এটিকে কাজে রাখুন।

আমাদের সাইটের জন্য স্টার্টার কোড

এই নিবন্ধে আসা পদক্ষেপগুলি অনুসরণ করতে আপনার সমস্যা হলে অনুগ্রহ করে যোগাযোগ করুন এবং আমি সমস্যাটি ডিবাগ করতে আমার যথাসাধ্য চেষ্টা করব। ঠিক আছে, এটি সোজা করে দিয়ে চালিয়ে যাওয়া যাক। আমরা অন্যান্য React.js ফ্রেমওয়ার্কের বিপরীতে Next.js ব্যবহার করব (বা শুধুমাত্র প্রতিক্রিয়া) কারণ তাদের স্ট্যাটিক এক্সপোর্ট সমর্থন। সেখানে একটি React.js অ্যাপ্লিকেশন হোস্ট করার জন্য বিভিন্ন স্থাপনার বিকল্প রয়েছে কিন্তু আমি SEO সুবিধা এবং খরচ সাশ্রয়ের কারণে Google ক্লাউড স্টোরেজ এবং Next.js পদ্ধতি শেয়ার করা বেছে নিয়েছি। Next.js স্ট্যাটিক এক্সপোর্টের সাথে, যখন একটি প্রোডাকশন বিল্ড তৈরি করা হয়, তখন প্রতি রুটে একটি এইচটিএমএল ফাইল তৈরি করা হয়, সেই সাথে স্ট্যাটিক অ্যাসেট (সিএসএস এবং জেএস ফাইল) আলাদা আলাদা অংশে এইচটিএমএল ফাইলের সাথে মিলে যায়। এটি গুরুত্বপূর্ণ কারণ এটি পৃষ্ঠাটি দেখার জন্য অপ্রয়োজনীয় জাভাস্ক্রিপ্ট বান্ডেলগুলি লোড করা এড়াতে পারে যার অর্থ দ্রুত পৃষ্ঠা লোড হয়৷ "পরবর্তী বিল্ড" চালানো থেকে উত্পন্ন সমস্ত ফাইল "আউট" ফোল্ডারে রপ্তানি করা হবে। কিন্তু এই পরে। আসুন অ্যাপটি তৈরি করি।

প্রথমে, আসুন আমাদের মেশিনে একটি স্টার্টার Next.js প্রজেক্ট ইনস্টল করি। সৌভাগ্যবশত, Next.js-এর একটি "create-next-app" ইউটিলিটি আছে ঠিক যেমনটি Create React App যারা ব্যবহার করেছেন তাদের জন্য। ওয়ার্কফ্লো শুরু করতে আমরা নিম্নলিখিত কমান্ডটি চালাতে পারি:

npx create-next-app@latest

কমান্ডটি আমাদের প্রকল্পের জন্য কিছু কনফিগারেশন বিকল্পের মাধ্যমে আমাদের নিয়ে যাবে (আপনি যা খুশি তা বেছে নিতে নির্দ্বিধায়; আমাদের কেবল কোড জেনারেশন দরকার)। আমি এই নিবন্ধের জন্য যে বিকল্পগুলি ব্যবহার করব তা বোল্ড করেছি:

• আপনার প্রকল্পের নাম কি? my-app
• আপনি TypeScript ব্যবহার করতে চান? না /হ্যাঁ
• আপনি কি ESLint ব্যবহার করতে চান? না/ হ্যাঁ
• আপনি কি Tailwind CSS ব্যবহার করতে চান? না /হ্যাঁ
• আপনি কি `src/` ডিরেক্টরি ব্যবহার করতে চান? না/ হ্যাঁ
• আপনি কি অ্যাপ রাউটার ব্যবহার করতে চান? (প্রস্তাবিত) না / হ্যাঁ
• আপনি কি ডিফল্ট আমদানি উপনাম (@/*) কাস্টমাইজ করতে চান? না /হ্যাঁ

চমৎকার, আমরা এখন কিছু কোড আছে! আপনি লক্ষ্য করবেন যে আমাদের node_modules ফোল্ডারটি পপুলেটেড তাই আমাদের সমস্ত নির্ভরতা ইনস্টল করা আছে যা আমাদের অ্যাপ্লিকেশন চালানোর জন্য প্রয়োজন। সেই একই টার্মিনাল উইন্ডোতে যা আপনি প্রজেক্ট তৈরি করতে ব্যবহার করেছিলেন, আসুন নিম্নলিখিত কমান্ডটি চালান: npm run dev । এটি Next.js ডেভেলপমেন্ট ওয়ার্কফ্লো শুরু করবে যাতে আমরা স্থানীয়ভাবে আমাদের অ্যাপ্লিকেশন দেখতে পারি। Next.js আপনার কম্পিউটারে প্রকল্পটি দেখার জন্য একটি URL প্রদান করবে। বেশিরভাগ ক্ষেত্রেই এটি হবে http://localhost:3000 , কিন্তু আপনার যদি অন্য কোনো ওয়েব অ্যাপ চালু থাকে তবে এটি 3001-এর মতো অন্য একটি পোর্ট নির্বাচন করতে পারে। লিঙ্কটিতে ক্লিক করার পরে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাবেন:

চমৎকার! আমরা একটি স্টার্টার অ্যাপ্লিকেশন আপ এবং চলমান আছে! তবে আসুন আরও ক্লাসিক্যাল "হ্যালো ওয়ার্ল্ড" উদাহরণটি করতে স্টার্টার পৃষ্ঠাটি ছেড়ে দেওয়া যাক। নিম্নলিখিতগুলি ধারণ করতে src/app/page.tsx (বা page.jsx) ফাইলটি আপডেট করুন:

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

ফাইলটি সংরক্ষণ করুন এবং আপনার অ্যাপ্লিকেশনটিতে চলমান ব্রাউজার ট্যাবে ফিরে যান এবং পৃষ্ঠাটি পুনরায় লোড করুন৷ আপনার স্ক্রিনে "হ্যালো ওয়ার্ল্ড" দেখতে হবে! এখন স্থির রপ্তানি কাজ করার জন্য ফিরে বৃত্তাকার করা যাক. বৈশিষ্ট্যটি সক্ষম করতে আমাদের পরবর্তী. কনফিগার ফাইলটি কনফিগার করতে হবে। পরবর্তী কনফিগ ঘোষণা আপডেট করুন:

const nextConfig = { output: "export", };

এটি বিল্ড প্রক্রিয়া চলাকালীন Next.js কে আমাদের অ্যাপ্লিকেশনের প্রতিটি রুটের সাথে সম্পর্কিত পৃথক HTML ফাইল তৈরি করার নির্দেশ দেবে। আপাতত আমাদের কাছে শুধুমাত্র একটি পৃষ্ঠা আছে তাই স্ট্যাটিক এক্সপোর্টের সুবিধাগুলি বোঝাতে আরেকটি পৃষ্ঠা যুক্ত করা যাক। অ্যাপ/ ডিরেক্টরির মধ্যে, "টেস্ট" নামে একটি নতুন ডিরেক্টরি তৈরি করুন। নতুন তৈরি ডিরেক্টরির মধ্যে একটি page.tsx (বা page.jsx) ফাইল যোগ করুন এবং নিম্নলিখিত কোড যোগ করুন:

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

এখন যেহেতু আমাদের একটি পরীক্ষার পৃষ্ঠা আছে, আসুন আমাদের হোম পেজ থেকে এটিতে একটি লিঙ্ক যুক্ত করি। src/app/page.tsx (বা page.jsx) খুলুন এবং ফাইলটি আপডেট করুন যাতে এটির মত দেখায়:

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

নতুন আপডেট করা ফাইলগুলি সংরক্ষণ করুন এবং আমাদের অ্যাপ্লিকেশনটি চালানো ব্রাউজার ট্যাবে ফিরে যান এবং পৃষ্ঠাটি পুনরায় লোড করুন৷ আপনি "পরীক্ষা পৃষ্ঠা!" এর সাথে একটি নতুন লিঙ্ক দেখতে পাবেন! এবং সেই লিঙ্কে ক্লিক করার পরে, স্ক্রিনের বিষয়বস্তু "হ্যালো পরীক্ষা!" দেখানোর জন্য পরিবর্তিত হওয়া উচিত। চমৎকার কাজ, এখন আমাদের অ্যাপ্লিকেশনে দুটি রুট আছে। এখন আমরা যে স্ট্যাটিক এক্সপোর্ট ফিচারের কথা বলছি তার আউটপুট চেকআউট করা যাক। আপনার টার্মিনাল উইন্ডোতে ফিরে যাচ্ছেন "npm run build" চালান। এই কমান্ডটি "next build" কমান্ড চালাবে যা আমাদের কাজের জন্য একটি উত্পাদন প্রস্তুত বিল্ড তৈরি করবে এবং ফলাফলটি আমাদের প্রকল্পের মূলে বলা একটি ডিরেক্টরিতে সংরক্ষণ করবে। যদি আমরা আউট ডিরেক্টরি পরিদর্শন করি তবে আমাদের এরকম কিছু দেখতে হবে:

• _next: আমাদের সাইট চালানোর জন্য আমাদের প্রয়োজনীয় স্ট্যাটিক সম্পদ রয়েছে, প্রতিটি HTML পৃষ্ঠার জন্য জাভাস্ক্রিপ্ট এবং CSS-এর অংশগুলি মনে করুন (যেমন 404.html: ডিফল্ট 404 পৃষ্ঠা Next.js আমাদের জন্য তৈরি করে
• favicon.ico: আমাদের সাইটের ওয়েবসাইট আইকন
• index.html: আমাদের রুট পৃষ্ঠার জন্য HTML ফাইল (src/app/page.tsx বা page.jsx)
• index.txt: ফাইল যাতে index.html পৃষ্ঠার জন্য সম্পদের ম্যাপিং থাকে
• test.html: আমাদের রুট পেজের জন্য HTML ফাইল (src/app/test/page.tsx বা page.jsx)
• test.txt: ফাইল যাতে test.html পৃষ্ঠার জন্য সম্পদের ম্যাপিং থাকে

মহান কাজ লোকেরা. এখন গুগল ক্লাউডে আমাদের কোড আপলোড করার জন্য গিয়ারগুলি স্থানান্তর করা যাক যাতে আমরা সাইটটি লাইভ দেখতে পারি।

আমাদের সাইটের জন্য একটি বালতি কনফিগার করা হচ্ছে

এখন যেহেতু আমাদের কোড প্রস্তুত আছে, আমাদের এটিকে Google ক্লাউড স্টোরেজে আপলোড করতে হবে যাতে Google ক্লাউড ইন্টারনেটে আমাদের সাইট পরিবেশন করতে পারে। গুগল ক্লাউড ট্যাবে ফিরে যাওয়া যাক।

স্ক্রিনের বাম দিকে হ্যামবার্গার মেনু খুলুন এবং "ক্লাউড স্টোরেজ" নির্বাচন করুন। স্ক্রিনের শীর্ষে আপনি একটি "তৈরি করুন" বোতাম দেখতে পাবেন৷ আমরা সেটিতে ক্লিক করব যা তৈরির কর্মপ্রবাহ শুরু করবে। যেহেতু আমরা এখনও একটি কাস্টম ডোমেন ব্যবহার করব না, আপনি যা চান বাকেটের নাম দিন কিন্তু স্বতন্ত্রতা সীমাবদ্ধতা সম্পর্কে সচেতন থাকুন৷ আমার জন্য, আমি "somerandombucket123" ব্যবহার করব। এরপরে আমরা ইউএস-এর মধ্যে বহু-অঞ্চল বিকল্পটি ব্যবহার করব (যেখানে আমি এই পোস্টটি লিখছি) তবে আপনার ব্যবহারের ক্ষেত্রে বিনা দ্বিধায় সামঞ্জস্য করুন। তারপরে আমরা স্ট্যান্ডার্ড ডিফল্ট ক্লাস বিকল্পটি নির্বাচন করব যা আপনার জন্য আগে থেকে জনবহুল হওয়া উচিত। পরবর্তী বিকল্পটি আমরা আমাদের বালতিটি ইন্টারনেটের মাধ্যমে সর্বজনীনভাবে অ্যাক্সেসযোগ্য হতে চাই কিনা তার সাথে সম্পর্কিত। এই ক্ষেত্রে, যেহেতু আমরা আমাদের দর্শকদের কাছে এই ফাইলগুলি পরিবেশন করতে চাই আমরা "এই বালতিতে সর্বজনীন অ্যাক্সেস প্রতিরোধ প্রয়োগ করুন" টিক চিহ্ন মুক্ত করতে চাই যাতে সমস্ত ফাইল ইন্টারনেটের মাধ্যমে অ্যাক্সেসযোগ্য হয়৷ আমরা "ইউনিফর্ম" অ্যাক্সেস নিয়ন্ত্রণ নির্বাচন করব এবং খরচ কম রাখতে "ডেটা সুরক্ষা" অফারগুলি নির্বাচন করব না। তারপর আমরা "তৈরি করুন" বোতাম টিপুন।

এখন যেহেতু আমরা বালতি তৈরি করেছি আমাদের একটি নতুন অনুমতি যোগ করতে হবে যাতে ব্যবহারকারীরা আমাদের বালতি ফাইলগুলি দেখতে পারে। "অনুমতি" ট্যাবটি নির্বাচন করুন এবং "অ্যাক্সেস মঞ্জুর করুন" বোতামে ক্লিক করুন৷ "allUsers"-এ "নতুন প্রিন্সিপাল" ইনপুট টাইপ করুন এবং "পরিবেশ এবং স্টোরেজ অবজেক্ট ভিউয়ার" এর জন্য "ক্লাউড স্টোরেজ" এর অধীনে ভূমিকা নির্বাচন করুন।

একটি ডায়ালগ খুলবে যে আমরা আমাদের বালতিকে সর্বজনীন করতে চাই কি না, যা আমরা করি, তাই "পাবলিক অ্যাক্সেসের অনুমতি দিন" নির্বাচন করুন তাই "পাবলিক অ্যাক্সেসের অনুমতি দিন" নির্বাচন করুন। এখন এই বালতির ফাইলগুলি সর্বজনীনভাবে অ্যাক্সেসযোগ্য হবে৷ আপনার বালতি বিশদ পৃষ্ঠা থেকে পিছনের তীরটিতে ক্লিক করে ওভারভিউ পৃষ্ঠায় ফিরে যান। আমরা ব্যবহার করেছি কনফিগারেশন বিকল্পগুলির সাথে আপনার নতুন তৈরি করা বালতিটি দেখতে হবে। পরবর্তীতে আমাদের ওয়েবসাইটের বালতি নির্দেশ করতে হবে এবং আমরা নতুন তৈরি বাকেটের সারির তিনটি বিন্দুতে ক্লিক করে এটি করতে পারি। "ওয়েবসাইট কনফিগারেশন সম্পাদনা করুন" নির্বাচন করুন এবং আপনি এই মত কিছু দেখতে হবে:

ইনডেক্স পেজ ইনপুটের জন্য, "index.html" টাইপ করুন এবং ত্রুটি পেজ ইনপুটের জন্য "404.html" এ টাইপ করুন। আপনি লক্ষ্য করবেন যে এই ফাইলগুলি আমাদের Next.js অ্যাপ্লিকেশনের বিল্ড আউটপুটের সাথে মেলে যা আমরা চাই এবং শীঘ্রই ব্যবহার করব। সংরক্ষণে ক্লিক করে পরিবর্তনটি শেষ করুন।

এখন আমাদের এই বালতিতে আমাদের কোডের আউট ডিরেক্টরির মধ্যে থাকা আমাদের ফাইলগুলি আপলোড করতে হবে যাতে আমাদের ওয়েবসাইটটি লাইভ হতে পারে! আমরা আমাদের বালতির জন্য বালতির বিবরণ পৃষ্ঠায় নেভিগেট করে এবং প্রতিটি ফাইল বা ফোল্ডার পৃথকভাবে নির্বাচন করে ম্যানুয়ালি এটি করতে পারি। কিন্তু, আসুন এটি সম্পর্কে প্রোগ্রাম্যাটিক হই এবং এটি করার জন্য কিছু কোড লিখি। আপনার IDE-এ বা যেখানেই আপনি আপনার কোড আপডেট করছেন সেখানে ফিরে যান এবং আমাদের প্রকল্পের মূলে upload.sh নামে একটি নতুন ফাইল তৈরি করি। নিম্নলিখিত বিষয়বস্তু যোগ করুন:

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

আপনার বালতি নামের সাথে "somerandombucket123" প্রতিস্থাপন করতে ভুলবেন না। এখানে কোডের শব্দার্থবিদ্যা নিয়ে খুব বেশি চিন্তা করবেন না। মূলত আমরা যা করছি তা হল:

1. কোন বাসি উত্পাদন বিল্ড অপসারণ
2. একটি নতুন উত্পাদন বিল্ড তৈরি করা হচ্ছে
3. আমাদের বালতিতে আমাদের প্রোডাকশন বিল্ডের বিষয়বস্তু আপলোড করতে Google Cloud CLI ব্যবহার করে

আমরা এই স্ক্রিপ্টটি চালানোর আগে আমাদের Google ক্লাউড CLI ডাউনলোড করতে হবে। আপনি এখানে নির্দেশাবলী অনুসরণ করতে পারেন. ইনস্টলেশনের পরে, আপনাকে চালাতে হবে: আপনার টার্মিনালে gcloud auth লগইন করুন । এটি আমাদের জন্য Google ক্লাউড CLI ব্যবহার করার জন্য অ্যাক্সেস অনুমোদন করবে। যে বিষয়ে আরও নির্দেশাবলী এবং পটভূমি তাদের ডকুমেন্টেশনে পাওয়া যাবে। একবার আপনি সফলভাবে অনুমোদিত হয়ে গেলে, আসুন আমাদের package.json-এ একটি নতুন রান স্ক্রিপ্ট যোগ করি। আমাদের আপলোড স্ক্রিপ্ট নিবন্ধন করতে "স্ক্রিপ্ট" অবজেক্টের মধ্যে একটি নতুন স্ক্রিপ্ট এন্ট্রি যোগ করুন:

"upload": "sh upload.sh"

পরবর্তী, এর এটি পরীক্ষা করা যাক. আবার আপনার টার্মিনাল খুলুন এবং চালান: "npm রান আপলোড"। এটি আমাদের স্ক্রিপ্ট চালাবে এবং আপনি আপনার বালতিতে ঘটছে আপলোড সম্পর্কে কিছু আউটপুট দেখতে পাবেন। যদি আমরা Google ক্লাউড স্টোরেজ পৃষ্ঠাটি নেভিগেট করি এবং আপনার বালতি খুলি তাহলে আপনি আমাদের এইমাত্র আপলোড করা ফাইলগুলি দেখতে পাবেন৷ আপনি যদি এখানে নেভিগেট করেন: https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (যেখানে YOUR_BUCKET_NAME আপনার বাকেটের নাম) আপনার সাইটটি দেখতে হবে। কিন্তু আপনি লক্ষ্য করবেন যে ডিফল্ট Next.js স্টাইলিং চলে গেছে এবং আমাদের পরীক্ষার পৃষ্ঠার লিঙ্কটি ভেঙে গেছে। কোন ধারনা কেন?

আপনি যদি আপনার ব্রাউজার কনসোলটি খুলেন তবে আপনি অনেকগুলি সংস্থান দেখতে পাবেন যা ত্রুটি পাওয়া যায়নি। অন্য কথায়, ব্রাউজারটি আপনার সাইটের জন্য লোড করার জন্য নির্দেশিত ফাইলগুলি খুঁজে পায় না। আপনি যদি ঘনিষ্ঠভাবে তাকান, আপনি দেখতে পাবেন যে সংস্থানের URLটি পুরোপুরি সঠিক নয়, এটি পথে আমাদের বালতির নাম অনুপস্থিত। আমরা যদি একটি কাস্টম ডোমেন ব্যবহার করতাম এবং সঠিকভাবে DNS কনফিগার করতাম, তাহলে আমরা এই সমস্যায় পড়তাম না। কিন্তু এই পোস্টের উদ্দেশ্যে, রাউটিং ঠিক করতে কিছু অতিরিক্ত কোড যোগ করা যাক। src/app/page.tsx (বা page.jsx) খুলুন এবং ফাইলটি আপডেট করুন যাতে এটির মত দেখায়:

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

আপনার বালতি নামের সাথে "somerandombucket123" প্রতিস্থাপন করতে ভুলবেন না। পরবর্তী আপডেট next.config ফাইলের মত দেখতে:

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

আবার, আপনার বালতির নামের সাথে "somerandombucket123" প্রতিস্থাপন করতে ভুলবেন না। আপনি উপরের কোড স্নিপেটে লক্ষ্য করবেন যে যখন নোড এনভায়রনমেন্ট ভেরিয়েবল প্রোডাকশন হয় (Next.js দ্বারা সেট) তখন আমরা আমাদের বাকেট নামের অ্যাকাউন্টে অতিরিক্ত যুক্তি যোগ করেছি। আমরা কনফিগার ফাইলে রিসোর্স না পাওয়া ত্রুটিগুলি ঠিক করতে একটি অ্যাসেট প্রিফিক্স যোগ করছি এবং আমাদের হোম পেজে আমাদের বালতির নামের সাথে রুটটি প্রিফিক্স করে রাউটিং ত্রুটির জন্য অ্যাকাউন্টিং করছি৷ এখন আমাদের কোড আপলোড করা যাক এবং এটি কাজ করে কিনা তা দেখুন। আবার, কিক অফ: npm রান আপলোড। আপনার ওয়েবসাইটে ফিরে যান এবং পৃষ্ঠাটি পুনরায় লোড করুন৷ আমরা কিভাবে করলাম? আমাদের এখন স্থানীয়ভাবে যা আছে তা সাইটটির প্রতিফলন করা উচিত। প্রক্রিয়ার শুরুতে যদি আমরা আমাদের ডোমেন নামের সাথে মেলে বালতি তৈরি করি তবে আমাদের সংস্থান ত্রুটি থাকবে তবে ক্লায়েন্ট রাউটিং সমস্যা থাকবে। তাই দুর্ভাগ্যবশত, এই পদ্ধতির একটি অপূর্ণতা হল প্রোডাকশন পরিবেশনের জন্য রুটে .html প্রত্যয় যোগ করার জন্য প্রয়োজনীয় অতিরিক্ত কোড।

পরবর্তী পদক্ষেপ 😎

পরবর্তী তারিখে, আমি একটি কাস্টম ডোমেন পরিবেশন করার জন্য আমাদের বালতিতে প্রয়োজনীয় DNS রেকর্ড এবং কনফিগারেশন পরিবর্তনগুলি যোগ করার পাশাপাশি আমাদের ওয়েবসাইটের জন্য SSL কনফিগার করার বিষয়গুলি কভার করব৷ আশা করি আপনি আজ কিছু শিখেছেন এবং ভবিষ্যতে আমি আশেপাশে কিছু ধারণার মাধ্যমে কথা বলব:

• পৃষ্ঠা পুনঃনির্দেশ এবং SSL-এর জন্য Cloudflare-এর বিনামূল্যের স্তর ব্যবহার করা
• গুগল অ্যানালিটিক্স কনফিগার করা এবং এসইও অপ্টিমাইজ করা

পড়ার জন্য ধন্যবাদ এবং চিয়ার্স!