در این مقاله، به شما نشان میدهیم که چگونه میتوانید یک سرور localhost را در پروژه React با استفاده از SSL راهاندازی کنید. این فرآیند به شما کمک میکند تا برنامه خود را در محیطی ایمنتر توسعه دهید و از پروتکل HTTPS حتی در محیط لوکال بهرهمند شوید. با ما همراه باشید تا مراحل تنظیم و پیکربندی گواهینامه SSL در پروژه React و نصب mkcert را گام به گام بررسی کنیم.
ساخت برنامه :
در قدم اول باید یک پروژه با react درست کنیم که برای این کار بعد از نصب npm از دستور پایین استفاده میکنیم
npx create-react-app example
cd example
( در این دستور example اسم پروژه ما هستش ، شما میتونید اسم دلخواه خودتونو انتخاب کنید و استفاده از example الزامی نیست )
بعد از اجرا دستورات و ساخت شدن پروژه از دستور زیر برای اجرای برنامه استفاده میکنیم
npm start
بعد از وارد کردن دستور مرورگر شما باز میشه و باید چنین صفحه ای رو مشاهده کنید که نشان دهنده اجرای درست پروژه ما هستش
حالا اگر دقت کنید کنار اسم دامنه ایکون قفل رو نداریم و به جاش ایکون ( ! ) نمایش داده شده که اگر موس رو روی این آیکون قرار بدین چنین پیغامی برای شما نمایش میده
connection to this site is not secure
که نشون میده ما از SSL استفاده نمیکنیم !
چرا روی لوکال هاست به SSL نیاز داریم ؟
جواب این سئوال بستگی به کار شما داره ، ولی در کل یکسری قابلیت ها وجود داره که فقط با SSL میشه ازشون استفاده کرد ، برای مثال برای استفاده WebRTC حتما باید SSL داشته باشید و روی HTTP کار نمیکنه یا اگر در پروژه خودتون از سرویس هایی مثل Google OAuth استفاده میکنید حتما باید ssl داشته باشید
با توجه به این موارد منطقی نیست که برای هر تست یکبار از پروژه build بگیرید و روی محیط پروداکشن ازش استفاده کنید ، در برخی مواقع سرور یا سایت شما رو هم به خطر مینداز
چطوری روی localhost از SSL استفاده کنیم ؟
قدم اول نصب mkcert هستش که ما روی ویندوز انجام میدیم
( برای سیستم عامل های دیگه میتونید از این لینک( mkcert ) داکیومنت رو مطالعه بفرمایید )
برای نصب mkcert دستور
choco install mkcert
وارد کنید ، و صبر بفرمایید تا نصب تموم بشه .
( choco یک پکیج منیجر برای ویندوز هستش و قبل از اجرا دستور باید این پکیج منیجر رو نصب کنید )
قدم دوم ساخت Certificate
بعد از نصب، این دستور را وارد تا Certificate ها ساخته بشه
mkcert localhost
توجه داشته باشید در زمان اجرای این دستور در مسیر اصلی پروژه خودتون قرار داشته باشید . بعد از اجرا در پوشه پروژه دو تا فایل ساخته میشه ( CA , Key ) که باید آدرس این دو فایل رو به react بدیم ، میتونیم همیشه در زمان اجرا پروژه به صورت دستی آدرس ها رو بدیم ولی راه بهتر اینکه دستور خودمونو در در فایل package.json قرا بدیم
برای این کار فایل package.json رو باز کنید و قسمت start رو به این صورت تغییر بدین
"start": "set \"HTTPS=true\" && set \"SSL_CRT_FILE=./localhost.pem\" && set \"SSL_KEY_FILE=./localhost-key.pem\" && react-scripts start"
بعد از تغییر دستور npm start رو وارد کنید
و بعد مشاهده میکنید که لوکال هاست شما با SSLباز میشه
پروژههای React با SSL با سرویسهای وان سرور
برای اجرای پروژه React با SSL روی لوکالهاست، اگر به یک محیط پایدار و سریع برای توسعه نیاز دارید، میتوانید از سرویسهای وان سرور استفاده کنید. وان سرور امکان ارائه سرورهای مجازی و اختصاصی با منابع بالا، پشتیبانی حرفهای، و امنیت کامل را فراهم میکند. با استفاده از این سرویسها میتوانید:
- پروژههای React خود را بدون نگرانی از محدودیتهای لوکال توسعه دهید.
- SSL و گواهینامههای امنیتی را بهراحتی پیکربندی کنید.
- به قابلیتهایی مانند WebRTC و Google OAuth بدون مشکلات پیکربندی در محیط محلی دسترسی پیدا کنید.
نتیجه گیری پیکربندی SSL در React
با اجرای localhost با SSL در react، میتوانید امنیت برنامه خود را افزایش داده و قابلیتهایی مانند WebRTC یا Google OAuth را بدون محدودیت تجربه کنید. این روش نهتنها فرآیند توسعه را سادهتر میکند، بلکه شما را برای انتقال به محیطهای پروداکشن آمادهتر میسازد. با ابزارهایی مانند mkcert و تنظیمات ساده در React، میتوانید محیط توسعهای امن و حرفهای ایجاد کنید و از تجربهای بدون دغدغه لذت ببرید.