راهنمای راه‌اندازی IDE ابری code server بر روی سرور مجازی اوبونتو 22.04

با گسترش ابزارهای برنامه نویسی، IDE های ابری نیز بیشتر مورد استفاده قرار گرفته اند. محیط های برنامه نویسی آنلاین به توسعه دهندگان کمک می‌کند که بدون هیچ گونه دردسری تنظیمات سخت و پیچیده ای از هر جایی به پروژه های خود دسترسی داشته باشند و به صورت تیمی کار کنند.

code server نسخه‌ای از Visual Studio Code است. که روی یک سرور اجرا می‌شود و از طریق مرورگر در دسترس است. این به این معنی است که شما می‌توانید بدون نیاز به نصب هیچ گونه برنامه ای بر روی سیستم خود، از یک محیط برنامه نویسی حرفه ای استفاده کنید. این ابزار امکانات کاملی مانند پشتیبانی از Git، اشکال زدایی، تکمیل خودکار کد و قابلیت های سفارشی دارد.

برنامه‌ی code server را تنها با یک کلیک نصب و راه‌اندازی کنید.
✅ نصب سریع و آسان
✅ بدون نیاز به تنظیمات پیچیده
✅ دسترسی به ابزارهای توسعه‌ متن‌باز

خرید هاست code server

در این آموزش از لیارا، یاد خواهیم گرفت که چگونه code server را بر روی سرور Ubuntu 22.04 راه‌اندازی کنیم و آن را بر روی دامنه اختصاصی خود بگذارید.

آنچه در ادامه خواهید خواند:

پیش نیاز ها
مرحله اول: نصب code server
مرحله دوم: دسترسی به code server از طریق دامنه
مرحله سوم: ایمن‌ سازی دامنه شما
مرحله چهارم: استفاده از رابط کاربری code server
سوالات متداول
جمع بندی

پیش نیاز ها:

برای راه‌اندازی code server روی سرور Ubuntu 22.04، باید موارد زیر را در اختیار داشته باشید:

یک سرور با Ubuntu 22.04 که حداقل ۲ گیگابایت رم داشته باشد و به آن دسترسی روت (root access) و یک کاربر غیر روت با دسترسی sudo داشته باشید.
یک دامنه معتبر که به سرور متصل شده باشد را در اختیار داشته باشید. این دامنه برای میزبانی code server استفاده می‌شود. در این آموزش، از code-server.your-domain به‌عنوان نمونه استفاده می‌شود.

همین الان، بدون کمترین پیچیدگی، سرور مجازی خودتون رو در کمتر از ۳۰ ثانیه، راه‌اندازی کنید.
✅ عملکرد پایدار ✅ ترافیک نامحدود ✅ هزینه به‌صرفه
خرید سرور مجازی ابری

مرحله اول: نصب code server

در این مرحله، code server را روی سرور راه‌اندازی می‌کنید. این کار شامل دانلود جدیدترین نسخه و ایجاد یک سرویس systemd است که باعث می‌شود code server همیشه در پس‌زمینه اجرا شود. همچنین، یک سیاست راه‌اندازی مجدد تنظیم می‌شود تا در صورت crash یا ری‌استارت سرور، دوباره اجرا شود.

ابتدا، پوشه‌ای برای ذخیره تمام داده‌های مربوط به code server ایجاد کنید.

mkdir ~/code-server

سپس وارد این پوشه شوید.

cd ~/code-server

دانلود آخرین نسخه code server

باید آخرین نسخه code server را از Github دریافت کنید.

wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

حالا فایل دانلودشده را از حالت فشرده خارج کنید:

tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

پس از استخراج، پوشه‌ای با نام code-server-4.8.2-linux-amd64 ایجاد می‌شود که شامل سورس کد code-server است. حالا آن را در مسیر /usr/lib/code-server/ کپی کنید تا در سطح سیستم قابل دسترسی باشد.

sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

سپس، یک لینک سمبولیک در مسیر /usr/bin/code-server بسازیر تا اجرای code-server در هر جای سیستم راحت باشد.

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

ایجاد مسیر ذخیره‌ سازی داده‌ های code server

برای ذخیره داده‌های کاربران، یک پوشه در /var/lib/code-server/ بسازید.

sudo mkdir /var/lib/code-server

ایجاد سرویس systemd برای اجرای code server در پس‌ زمینه

حالا که code server را دانلود و در سیستم قابل دسترس کردید، یک سرویس systemd خواهید ساخت تا این برنامه همیشه در پس‌زمینه اجرا شود.

برای این کار، یک فایل پیکربندی سرویس به نام code-server.service در مسیر /lib/systemd/system/ ایجاد کنید.

sudo nano /lib/systemd/system/code-server.service

سپس محتوای زیر را در آن قرار دهید.

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

📍بیشتر بخوانید: Code Server، توسعه قدرتمند از هر مکان با مرورگر

توضیحات فایل سرویس:

[Unit]:
- توضیحاتی درباره این سرویس ارائه می‌دهد.
- مشخص می‌کند که این سرویس بعد از اجرای Nginx راه‌اندازی شود.
[Service]:
- نوع سرویس را simple تعیین می‌کند، یعنی فقط باید اجرا شود.
- یک متغیر محیطی PASSWORD را برای ورود به code server تنظیم می‌کند (رمز عبور خود را به جای your_password وارد کنید).
- دستور اجرای code server را مشخص می‌کند که روی پورت 8080 اجرا شود و احراز هویت را با رمز عبور انجام دهد.
- سیاست راه‌اندازی مجدد را همیشه (always) تنظیم می‌کند، به این معنی که اگر به هر دلیلی code server متوقف شد، دوباره راه‌اندازی خواهد شد.
[Install]:
- مشخص می‌کند که این سرویس در multi-user.target فعال باشد تا در حالت چندکاربره اجرا شود.

اجرای خودکار code server پس از ری‌ استارت سرور

برای اینکه code server بعد از هر بار ری‌استارت سرور خودکار اجرا شود، این دستور را اجرا کنید.

sudo systemctl enable code-server

پس از اجرای این دستور، پیامی مشابه زیر دریافت خواهید کرد.

Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

در این مرحله، شما code server را دانلود و به‌صورت سیستمی در دسترس قرار دادید. سپس یک سرویس systemd برای آن ایجاد کردید و آن را فعال کردید تا در هر بار راه‌اندازی سرور، به‌طور خودکار اجرا شود.

در مرحله بعدی، Nginx را پیکربندی خواهید کرد تا به‌عنوان یک Reverse Proxy عمل کرده و دسترسی به code-server از طریق دامنه اختصاصی شما امکان‌پذیر شود.

🔶برای ادامه مطالعه و یادگیری: معرفی ۱۰ IDE محبوب برای برنامه‌نویسی با زبان Python

مرحله دوم: دسترسی به code server از طریق دامنه

در این بخش، Nginx را به‌عنوان یک Reverse Proxy برای code server تنظیم کنید.

ساخت فایل تنظیمات در Nginx

همان‌طور که در مراحل قبلی مشاهده کردید، فایل‌های پیکربندی سایت‌ها در مسیر زیر قرار دارد.

/etc/nginx/sites-available

ذخیره می‌شوند و برای فعال شدن، باید به مسیر زیر لینک شوند.

/etc/nginx/sites-enabled

یک فایل جدید به نام code server.conf ایجاد کنید.

sudo nano /etc/nginx/sites-available/code-server.conf

کد زیر را درون ان قرار دهید.

server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
	  proxy_pass http://localhost:8080/;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection upgrade;
	  proxy_set_header Accept-Encoding gzip;
	}
}

نکته: به‌جای code-server.your-domain، نام دامنه خود را وارد کنید.

توضیح این تنظیمات

Nginx را طوری تنظیم می‌کنید که روی پورت ۸۰ (HTTP) گوش دهد.
مقدار server_name مشخص می‌کند که این تنظیمات روی چه دامنه‌ای اعمال شوند.
در قسمت location / تعیین می‌کنید که درخواست‌ها به code server که روی پورت 8080 اجرا شده، ارسال شوند.
سه خط proxy_set_header برای پشتیبانی از WebSockets استفاده می‌شود که code server به‌شدت به آن نیاز دارد.

فعال کردن تنظیمات در Nginx

برای فعال شدن این تنظیمات، یک لینک سیمبولیک از این فایل در مسیر /etc/nginx/sites-enabled/ بسازید.

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

بررسی درستی پیکربندی

برای اطمینان از اینکه پیکربندی Nginx بدون خطا است، دستور زیر را اجرا کنید.

sudo nginx -t

اگر تنظیمات صحیح باشند، خروجی مشابه زیر دریافت خواهید کرد.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

اعمال تغییرات با ری‌ استارت کردن Nginx

sudo systemctl restart nginx

اکنون code server شما از طریق دامنه‌تان در دسترس است. در مرحله بعد، آن را با یک گواهی امنیتی رایگان از Let’s Encrypt ایمن‌سازی کنید.

🔷بیشتر بخوانید: چطور با استفاده از Fail2Ban در اوبونتو 22.04 از سرور Nginx خود محافظت کنیم!

مرحله سوم: ایمن‌ سازی دامنه شما

در این بخش، دامنه‌تان را با استفاده از گواهی TLS رایگان Let’s Encrypt ایمن خواهید کرد که از طریق Certbot تأمین خواهد شد. بعد از پیکربندی، code server شما از طریق HTTPS اجرا خواهد شد.

پیکربندی ufw برای پشتیبانی از ترافیک HTTPS

در مراحل قبلی، ufw فایروال ساده را فعال کرده‌اید و آن را به صورتی تنظیم کردید که به ترافیک HTTP اجازه دهد. حال برای دسترسی به سایت ایمن‌شده، باید ufw را طوری تنظیم کنید که ترافیک HTTPS را بپذیرد. برای این کار، دستور زیر را اجرا کنید.

sudo ufw allow https

در این قسمت خروجی زیر را خواهید دید.

Rule added
Rule added (v6)

بارگذاری مجدد ufw

برای اینکه این تنظیمات اعمال شوند، باید ufw را دوباره بارگذاری کنید. دستور زیر را اجرا کنید.

sudo ufw reload

خروجی زیر را مشاهده خواهید کرد.

Firewall reloaded

دسترسی به code server با HTTPS

این قسمت، در مرورگر خود به دامنه‌ای که برای code server استفاده کرده‌اید بروید. صفحه ورود به code server با اتصال HTTPS بارگذاری خواهد شد.

code server از شما خواسته است که رمز عبور خود را وارد کنید. رمز عبوری که در مرحله قبل تنظیم کرده‌اید را وارد کرده و Enter را بزنید. حالا وارد code server خواهید شد و بلافاصله به رابط گرافیکی و ویرایشگر آن دسترسی پیدا خواهید کرد.

در این قسمت، باید گواهی‌نامه‌های TLS از Let’s Encrypt را نصب کنید. برای این کار باید از Certbot استفاده کنید.

برای نصب آخرین نسخه از Certbot و پلاگین Nginx آن، دستور زیر را اجرا کنید.

sudo apt install certbot python3-certbot-nginx -y

برای درخواست گواهی‌نامه‌ها برای دامنه‌تان، از دستور زیر استفاده کنید.

sudo certbot --nginx -d code-server.your-domain

در این دستور، Certbot برای درخواست گواهی‌نامه‌ها دامنه شما اجرا می‌شود. نام دامنه را با پارامتر -d وارد کنید. فلگ --nginx به آن می‌گوید که به صورت خودکار پیکربندی سایت Nginx را برای پشتیبانی از HTTPS تغییر دهد. یادتان باشد که code-server.your-domain را با نام دامنه خودتان جایگزین کنید.

اگر این اولین بار است که Certbot را اجرا می‌کنید، از شما خواسته می‌شود که یک آدرس ایمیل برای اطلاعیه‌های فوری وارد کنید و شرایط خدمات EFF را بپذیرید. سپس Certbot درخواست گواهی‌نامه‌ها برای دامنه شما را از Let’s Encrypt انجام می‌دهد.

خروجی به شکل زیر خواهد بود.

Requesting a certificate for code-server.your-domain

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/code-server.your-domain/privkey.pem
This certificate expires on 2023-02-01.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf
Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain

این خروجی نشان می‌دهد که Certbot با موفقیت گواهی‌نامه‌های TLS را دریافت کرده و آن‌ها را در پیکربندی Nginx اعمال کرده است. حالا می‌توانید code-server را در مرورگر خود بارگذاری کنید. در این بخش قفل سبز رنگ را در کنار آدرس سایت مشاهده می کنید که نشان‌دهنده این است که اتصال شما به درستی انجام شده است.

🔶مطالعه بیشتر: راهنمای نصب و پیکربندی فایروال CSF در اوبونتو

مرحله چهارم: رابط کاربری code server

در این بخش، شما برخی از ویژگی‌های رابط کاربری code-server را استفاده خواهید کرد. چون code-server نسخه‌ی ابری Visual Studio Code است، رابط کاربری آن مشابه نسخه دسکتاپ این ویرایشگر است.

در سمت چپ IDE، یک ردیف عمودی از شش دکمه وجود دارد که ویژگی‌های پرکاربرد را در یک پنل جانبی به نام Activity Bar (نوار فعالیت) نمایش می‌دهد.

این نوار را می‌توانید به صورت دلخواه تنظیم کنید، بنابراین شما می‌توانید دکمه‌ها را جابجا کرده یا از نوار حذف کنید. به صورت پیش‌فرض، اولین دکمه منوی عمومی را باز می‌کند، در حالی که دکمه دوم (آیکون پوشه) پنل Explorer را باز می‌کند که ناوبری درختی ساختار پروژه را فراهم می‌کند. شما می‌توانید پوشه‌ها و فایل‌هایتان را در اینجا مدیریت کنید، آن‌ها را ایجاد، حذف، جابجا و یا تغییر نام دهید. دکمه ذره‌بین دسترسی به قابلیت جستجو و جایگزینی را فراهم می‌کند.

گزینه دیباگ (آیکون مثلثی با یک حشره کوچک) برای اشکال‌زدایی در پنل از آن استفاده می‌شود. Visual Studio Code پشتیبانی داخلی از دیباگر Node.js و هر زبانی که به Javascript تبدیل می‌شود را دارد. برای زبان‌های دیگر، می‌توانید افزونه‌های مربوط به دیباگر مورد نیاز را نصب کنید. دکمه چهار بلوک، که آخرین نمای نوار فعالیت است، منویی را برای دسترسی به افزونه‌های موجود در بازار VSCode فراهم می‌کند.

منطقه اصلی رابط کاربری code server، ویرایشگر شما است که می‌توانید آن را به تب‌های مختلف برای ویرایش کد تقسیم کنید. شما می‌توانید نمای ویرایش خود را به یک سیستم گرید یا فایل‌های کنار هم تغییر دهید.

برای بارگذاری یک پوشه موجود در code server، در مرورگر خود به آدرس:

code-server.your-domain/?folder=/var/lib/code-server/User بروید.

برای ایجاد یک فایل جدید، آیکون منو را انتخاب کنید تا منوی گزینه‌ها باز شود، سپس به منوی File بروید و New File را انتخاب کنید. نام فایل را وارد کرده و آن را در محل پوشه پیش‌فرض ذخیره کنید.

بعد از ذخیره شدن، فایل در پنل کناری Explorer قابل مشاهده خواهد بود. برای ایجاد پوشه‌ها، کافی است روی نوار کناری Explorer راست کلیک کرده و گزینه New Folder را انتخاب کنید. همچنین می‌توانید پوشه‌ای را با کلیک بر روی نام آن باز کرده و فایل‌ها و پوشه‌ها را با کشیدن و رها کردن به بخش‌های بالاتر سلسله‌مراتبی منتقل کنید تا آن‌ها را به موقعیت جدیدی منتقل کنید.

برای دسترسی به ترمینال، می‌توانید بر روی گزینه Terminal در منوی بالا کلیک کنید و بعد از آن گزینه New Terminal را انتهاب کنید. علاوه بر این می‌توانید از دکمه های میان بر بر روی کیبرد استفاده کنید. بعد از آن باید ترمینال در قسمت پایین صفحه شما باز شود و دایرکتوری آن به پوشه پروژه شما که در پنل Explorer نمایش داده می‌شود.

سوالات متداول:

در ادامه به سوالاتی که امکان دارد در این زمینه برای شما بدون پاسخ بماند، جواب‌های کوتاه اما مفیدی داده‌ایم که با استفاده از آن می‌توانید به سوال خود پاسخ صحیحی را بدهید.

چطور می توانیم به code server متصل شویم؟

برای اتصال به code server باید آدرس دامنه را در مرورگر وارد کنید و با وارد کردن رمز عبور محیط کدنویسی شوید.

آیا می توان code server را بر روی دستگا های مختلف استفاده کرد؟

بله code server در مرورگر اجرا می‌شود، بنابراین می‌توانید از هر دستگاه و سیستمی به آن دسترسی داشته باشید.

چگونه می توان فایل ها و پوشه ها را در code server مدیریت کرد؟

برای مدیریت فایل‌ها، از نوار کناری Explorer استفاده کنید. می‌توانید فایل‌ها را ایجاد، حذف، جابجا و ویرایش کنید.

آیا می توان چندین پروژه را به صورت همزمان در code server باز کرد؟

بله، شما می‌توانید چندین تب یا پنجره باز کنید و پروژه‌های مختلف را همزمان ویرایش کنید.

چطور امنیت code server را افزایش دهم؟

با استفاده از گواهی‌نامه‌های TLS از Let’s Encrypt می‌توانید ارتباطات را به صورت امن و با HTTPS انجام دهید.

🔷بیشتر بخوانید: آموزش نحوه راه‌اندازی کلاستر K3s Kubernetes در اوبونتو 22.04

جمع بندی

در این راهنما، نحوه‌ی راه‌اندازی یک اپلیکیشن وب Go با استفاده از Docker و Nginx در اوبونتو 22.04 توضیح داده شد. ابتدا Docker بر روی سرور نصب شد و سپس اپلیکیشن Go داخل کانتینر Docker قرار گیرفت. بعد از آن، Nginx به عنوان یک reverse proxy برای مدیریت ترافیک HTTP و HTTPS پیکربندی و برای امنیت بیشتر، گواهی‌نامه‌های TLS از Let’s Encrypt دریافت و تنظیم شد. در پایان، با استفاده از systemd، اطمینان حاصل شود که اپلیکیشن پس از هر راه‌اندازی مجدد سرور به‌طور خودکار اجرا شود.

برچسب‌ها:code-server IDE ubuntu

تغییرات اخیر