বেশিরভাগ সময়, ডেভেলপমেন্টের উদ্দেশ্যে http://localhost, HTTPS-এর মতো
কাজ করে। তবে, কিছু বিশেষ পরিস্থিতি আছে,
যেমন কাস্টম হোস্টনেম বা বিভিন্ন ব্রাউজার জুড়ে নিরাপদ কুকি ব্যবহার করা, যেখানে আপনার সাইট প্রোডাকশনে কীভাবে কাজ করে তা সঠিকভাবে উপস্থাপন করার জন্য
আপনাকে স্পষ্টভাবে আপনার ডেভেলপমেন্ট সাইটকে HTTPS-এর মতো আচরণ করার জন্য
সেট-আপ করতে হবে। (আপনার প্রোডাকশন ওয়েবসাইট HTTPS ব্যবহার না করলে, HTTPS-এ পরিবর্তন করার বিষয়টি অগ্রাধিকার দিন)।
HTTPS-এর মাধ্যমে কীভাবে আপনার সাইট লোকালভাবে রান করবেন তা এই পৃষ্ঠায় ব্যাখ্যা করা হয়েছে।
সংক্ষিপ্ত নির্দেশাবলীর জন্য, mkcert দ্রুত রেফারেন্স দেখুন।**
mkcert ব্যবহার করে HTTPS-এর মাধ্যমে আপনার সাইট লোকালি চালান (সাজেস্ট করা হয়)
আপনার লোকাল ডেভেলপমেন্ট সাইটের সাথে HTTPS ব্যবহার করতে এবং https://localhost বা
https://mysite.example (কাস্টম হোস্টনেম) অ্যাক্সেস করতে, আপনার ডিভাইস ও ব্রাউজার বিশ্বাস করে এমন এন্টিটি দ্বারা স্বাক্ষরিত
TLS সার্টিফিকেট
আপনার প্রয়োজন হবে, যাকে বিশ্বস্ত
সার্টিফিকেট অথরিটি (CA) বলা হয়।
HTTPS কানেকশন তৈরি করার আগে ব্রাউজার চেক করে দেখে যে আপনার ডেভেলপমেন্ট সার্ভারের সার্টিফিকেট কোনও বিশ্বস্ত CA দ্বারা স্বাক্ষরিত কিনা।
আপনার সার্টিফিকেট তৈরি ও স্বাক্ষর করার জন্য আমরা ক্রস-প্ল্যাটফর্ম CA, mkcert ব্যবহার করার সাজেশন দিই। অন্যান্য সহায়ক বিকল্পের জন্য, HTTPS-এর মাধ্যমে আপনার সাইট লোকালি রান করুন: অন্যান্য বিকল্প দেখুন।
অনেক অপারেটিং সিস্টেমে সার্টিফিকেট তৈরি করার জন্য লাইব্রেরি থাকে, যেমন openssl। তবে, এগুলি mkcert-এর চেয়ে বেশি জটিল ও কম নির্ভরযোগ্য এবং ক্রস-প্ল্যাটফর্ম নাও হতে পারে, যার ফলে বড় ডেভেলপার টিমের পক্ষে এগুলি অ্যাক্সেস করা কঠিন হয়ে পড়ে।
সেট-আপ করুন
mkcert ইনস্টল করুন (শুধুমাত্র একবার)।
আপনার অপারেটিং সিস্টেমে mkcert ইনস্টল করার জন্য নির্দেশাবলী অনুসরণ করুন। যেমন, macOS-এ:
brew install mkcert brew install nss # if you use Firefoxআপনার স্থানীয় রুট CA-তে mkcert যোগ করুন।
আপনার টার্মিনালে, এই কমান্ড রান করুন:
mkcert -installএটি একটি লোকাল সার্টিফিকেট অথরিটি (CA) তৈরি করে। আপনার mkcert-জেনারেটেড লোকাল CA শুধুমাত্র আপনার ডিভাইসে লোকালি বিশ্বস্ত।
mkcert দ্বারা স্বাক্ষরিত আপনার সাইটের জন্য একটি সার্টিফিকেট তৈরি করুন।
আপনার টার্মিনালে, আপনার সাইটের রুট ডিরেক্টরি বা আপনি যে ডিরেক্টরিতে আপনার সার্টিফিকেট রাখতে চান, সেটিতে নেভিগেট করুন।
তারপর, রান করুন:
mkcert localhostআপনি
mysite.example-এর মতো কাস্টম হোস্টনেম ব্যবহার করলে, এটি রান করুন:mkcert mysite.exampleএই কমান্ড দুটি কাজ করে:
- আপনার উল্লেখ করা হোস্টনেমের জন্য সার্টিফিকেট তৈরি করে।
- mkcert-কে সার্টিফিকেট সাইন করতে দেয়।
আপনার সার্টিফিকেট এখন প্রস্তুত এবং আপনার ব্রাউজার স্থানীয়ভাবে বিশ্বাস করে এমন একটি সার্টিফিকেট কর্তৃপক্ষ দ্বারা স্বাক্ষরিত।
আপনার সার্ভার কনফিগার করুন যাতে আপনি এইমাত্র তৈরি করা TLS সার্টিফিকেট HTTPS ব্যবহার করতে পারেন।
এটি কীভাবে করবেন তার বিবরণ আপনার সার্ভারের উপর নির্ভর করে। কয়েকটি উদাহরণ নিচে দেওয়া হল:
👩🏻💻 নোডের সাথে:
server.js({PATH/TO/CERTIFICATE...}এবং{PORT}-এর পরিবর্তে):const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});👩🏻💻 http-server-এর সাথে:
নিম্নলিখিত উপায়ে আপনার সার্ভার চালু করুন (
{PATH/TO/CERTIFICATE...}পরিবর্তন করুন):http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem-SHTTPS-এর মাধ্যমে আপনার সার্ভার চালায়, যেখানে-Cসার্টিফিকেট সেট করে এবং-Kকী সেট করে।👩🏻💻 React ডেভেলপমেন্ট সার্ভারের সাথে:
নিচে উল্লেখ করা পদ্ধতি অনুযায়ী আপনার
package.jsonএডিট করুন এবং{PATH/TO/CERTIFICATE...}পরিবর্তন করুন:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"যেমন, আপনি যদি নিজের সাইটের রুট ডিরেক্টরিতে
localhost-এর জন্য সার্টিফিকেট তৈরি করে থাকেন:|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...তাহলে আপনার
startস্ক্রিপ্টটি এইরকম দেখতে হবে:"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"👩🏻💻 অন্যান্য উদাহরণ:
আপনার ব্রাউজারে
https://localhostবাhttps://mysite.exampleখুলুন এবং আপনার সাইট HTTPS-এর মাধ্যমে লোকালি চলছে কিনা তা ডবল-চেক করুন। আপনি কোনও ব্রাউজার সতর্কতা দেখতে পাবেন না, কারণ আপনার ব্রাউজার mkcert-কে একটি স্থানীয় সার্টিফিকেট কর্তৃপক্ষ হিসাবে বিশ্বাস করে।
mkcert দ্রুত রেফারেন্স
HTTPS-এর মাধ্যমে আপনার লোকাল ডেভেলপমেন্ট সাইট চালাতে:
-
mkcert সেট-আপ করুন।
আপনি এখনও mkcert ইনস্টল না করে থাকলে, macOS-এ এটি ইনস্টল করুন:
brew install mkcert
Windows ও Linux-এর জন্য নির্দেশাবলী পেতে mkcert ইনস্টল করুন বিকল্প চেক করুন।
তারপর, একটি লোকাল সার্টিফিকেট অথরিটি তৈরি করুন:
mkcert -install -
একটি বিশ্বস্ত সার্টিফিকেট তৈরি করুন।
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
এটি একটি বৈধ সার্টিফিকেট তৈরি করে যা mkcert অটোমেটিক সাইন করে।
-
HTTPS এবং ২ নম্বর ধাপে আপনার তৈরি করা সার্টিফিকেট ব্যবহার করার জন্য ডেভেলপমেন্ট সার্ভার কনফিগার করুন।
আপনি এখন কোনও সতর্কতা ছাড়াই আপনার ব্রাউজারে https://{YOUR HOSTNAME} অ্যাক্সেস করতে পারবেন
</div>
HTTPS সহ আপনার সাইট লোকালি রান করুন: অন্যান্য বিকল্প
আপনার সার্টিফিকেট সেট-আপ করার অন্যান্য উপায় নিচে দেওয়া হল। এগুলি সাধারণত mkcert ব্যবহার করার চেয়ে বেশি জটিল বা ঝুঁকিপূর্ণ।
সেল্ফ-সাইনড সার্টিফিকেট
এছাড়াও, আপনি mkcert-এর মতো স্থানীয় সার্টিফিকেট অথরিটি ব্যবহার না করার সিদ্ধান্ত নিতে পারেন এবং পরিবর্তে আপনার সার্টিফিকেট নিজেই সাইন করতে পারেন। এই পদ্ধতিতে কিছু অসুবিধা দেখা যায়:
- ব্রাউজার আপনাকে সার্টিফিকেট অথরিটি হিসেবে বিশ্বাস করে না, তাই এটি আপনাকে সতর্কতা দেখাবে
যা আপনাকে ম্যানুয়ালি বাইপাস করতে হবে। Chrome-এ, আপনি
localhost-এ অটোমেটিক এই সতর্কতা বাইপাস করতে#allow-insecure-localhostফ্ল্যাগ ব্যবহার করতে পারবেন। - আপনি যদি কোনও অসুরক্ষিত নেটওয়ার্কে কাজ করেন, তাহলে এটি নিরাপদ নয়।
- mkcert-এর মতো লোকাল CA ব্যবহার করার থেকে এটি সহজ বা দ্রুত নাও হতে পারে।
- সেল্ফ-সাইন করা সার্টিফিকেট বিশ্বস্ত সার্টিফিকেটের মতো একইভাবে কাজ করবে না।
- আপনি যদি ব্রাউজারের প্রসঙ্গে এই কৌশলটি ব্যবহার না করেন, তাহলে আপনার সার্ভারের জন্য সার্টিফিকেট যাচাইকরণ বন্ধ করতে হবে। প্রোডাকশনে এটি আবার চালু করতে ভুলে গেলে নিরাপত্তা সংক্রান্ত সমস্যা হতে পারে।
আপনি কোনও সার্টিফিকেট উল্লেখ না করলে, React এবং Vue ডেভেলপমেন্ট সার্ভার HTTPS বিকল্প ব্যাকগ্রাউন্ডে একটি সেল্ফ-সাইনড সার্টিফিকেট তৈরি করে। এটি দ্রুত করা যায়, তবে এতে একই ব্রাউজার সংক্রান্ত সতর্কতা এবং সেল্ফ-সাইন করা সার্টিফিকেটের অন্যান্য সমস্যা থাকে। তবে, আপনি ফ্রন্টএন্ড ফ্রেমওয়ার্কের বিল্ট-ইন HTTPS বিকল্প ব্যবহার করতে এবং mkcert বা একই ধরনের টুল ব্যবহার করে তৈরি করা স্থানীয়ভাবে বিশ্বস্ত সার্টিফিকেট উল্লেখ করতে পারেন। আরও তথ্যের জন্য, React-এর সাথে mkcert উদাহরণ দেখুন।
HTTPS ব্যবহার করে আপনার ব্রাউজারে স্থানীয়ভাবে চলা সাইট খুললে, আপনার ব্রাউজার আপনার স্থানীয় ডেভেলপমেন্ট সার্ভারের সার্টিফিকেট চেক করে। এটি যখন দেখে যে আপনি নিজেই সার্টিফিকেটে স্বাক্ষর করেছেন, তখন এটি চেক করে দেখে যে আপনি বিশ্বস্ত সার্টিফিকেট কর্তৃপক্ষ হিসেবে রেজিস্টার করেছেন কিনা। আপনি তা না করায়, আপনার ব্রাউজার সার্টিফিকেটকে বিশ্বাস করতে পারছে না এবং এটি একটি সতর্কতা দেখাচ্ছে যে আপনার কানেকশন সুরক্ষিত নয়। আপনি এগিয়ে গেলে এটি এখনও HTTPS কানেকশন তৈরি করে, তবে আপনি নিজের ঝুঁকিতে তা করেন।
নিয়মিত সার্টিফিকেট অথরিটির দ্বারা স্বাক্ষরিত সার্টিফিকেট
এছাড়াও, আপনি অফিসিয়াল CA-এর স্বাক্ষর করা সার্টিফিকেট ব্যবহার করতে পারবেন। এতে নিম্নলিখিত জটিলতা রয়েছে:
- mkcert-এর মতো স্থানীয় CA টেকনিক ব্যবহার করার চেয়ে আপনাকে আরও বেশি সেট-আপের কাজ করতে হবে।
- আপনাকে এমন একটি সঠিক ডোমেন নাম ব্যবহার করতে হবে যা আপনি নিয়ন্ত্রণ করেন। এর অর্থ হল আপনি নিম্নলিখিত ক্ষেত্রে
অফিসিয়াল CA ব্যবহার করতে পারবেন না:
localhostএবংexampleবাtest-এর মতো অন্যান্য রিজার্ভ করা ডোমেন নাম।- আপনি নিয়ন্ত্রণ করেন না এমন যেকোনও ডোমেন নাম।
- ভুল টপ-লেভেল ডোমেন। আরও তথ্যের জন্য, সঠিক টপ-লেভেল ডোমেনের তালিকা দেখুন।
রিভার্স প্রক্সি
HTTPS সহ লোকালভাবে চলা সাইট অ্যাক্সেস করার আরেকটি বিকল্প হল ngrok-এর মতো রিভার্স প্রক্সি ব্যবহার করা। এতে নিম্নলিখিত ঝুঁকি রয়েছে:
- আপনি যার সাথে রিভার্স প্রক্সি URL শেয়ার করবেন, তিনি আপনার লোকাল ডেভেলপমেন্ট সাইট অ্যাক্সেস করতে পারবেন। এটি ক্লায়েন্টদের আপনার প্রোজেক্টের ডেমো দেখানোর জন্য সহায়ক হতে পারে, তবে এটি অননুমোদিত ব্যক্তিদের সংবেদনশীল তথ্য শেয়ার করার অনুমতিও দিতে পারে।
- কিছু রিভার্স প্রক্সি পরিষেবা ব্যবহারের জন্য চার্জ করে, তাই পরিষেবা বেছে নেওয়ার ক্ষেত্রে দাম একটি ফ্যাক্টর হতে পারে।
- ব্রাউজারে নতুন নিরাপত্তা ব্যবস্থা এইসব টুলের কাজ করার পদ্ধতিকে প্রভাবিত করতে পারে।
ফ্ল্যাগ (সাজেস্ট করা হয় না)
আপনি Chrome-এ mysite.example-এর মতো কাস্টম হোস্টনেম ব্যবহার করলে, ব্রাউজারকে mysite.example-কে নিরাপদ হিসেবে বিবেচনা করতে বাধ্য করার জন্য আপনি একটি ফ্ল্যাগ ব্যবহার করতে পারেন। নিম্নলিখিত কারণে
এটি করা এড়িয়ে চলুন:
- আপনাকে ১০০% নিশ্চিত হতে হবে যে
mysite.exampleসবসময় লোকাল অ্যাড্রেসে রিজলভ হয়। অন্যথায়, প্রোডাকশন ক্রেডেনশিয়াল ফাঁস হয়ে যাওয়ার ঝুঁকি থাকে। - এই ফ্ল্যাগ শুধুমাত্র Chrome-এ কাজ করে, তাই আপনি বিভিন্ন ব্রাউজার জুড়ে ডিবাগ করতে পারবেন না।
সমস্ত পর্যালোচক এবং অবদানকারীদের অবদান এবং প্রতিক্রিয়ার জন্য অনেক ধন্যবাদ—বিশেষ করে রায়ান স্লিভি, ফিলিপ্পো ভালসোর্দা, মিলিকা মিহাজলিজা এবং রোয়ান মেরেউড। 🙌