تنظیم پلتفرم Cloud IDE کد سرور در اوبونتو 20

با حرکت ابزارهای گسترش دهنده به سمت cloud ، ایجاد و تطابق پذیری پلتفرم cloud IDE (محیط پیشرفت ادغام شده) در حال رشد است. Cloud IDE ها امکان همکاری زمان واقعی (real-time) بین تیم های توسعه دهنده را فراهم می کنند تا در یک محیط توسعه یکپارچه کار کنند و ناسازگاری ها را به حداقل می رساند اما تولید را افزایش میدهد. چون از طریق مرورگرهای وب قابل دسترسی اند ، Cloud IDE ها در هر نوع دستگاه مدرن موجود هستند.code-server یک کد مایکروسافت ویژوال استودیو است که روی یک سرور از راه دور اجرا می شود و مستقیماً از مرورگر شما قابل دسترسی است. ویژوال استودیو کد یک ویرایشگر کد مدرن با پشتیبانی Git ادغام شده، یک اشکال زدا برای کد، دارای تکمیل خودکار هوشمند و ویژگی های قابل سفارشی سازی و قابل بسط میباشد. بدان معنی که می توانید از دستگاه های مختلف با سیستم عامل های مختلف استفاده کنید و همیشه یک محیط توسعه مداوم داشته باشید.در این آموزش ، پلتفرم cloud IDE کد سرور را بر روی دستگاه Ubuntu 20.04 خود تنظیم کرده و آن را در دامنه قرار می دهید ، که با گواهی TLS در Let’s Encrypt ایمن شده است. در اخر، کد ویژوال استودیو را روی سرور Ubuntu 20.04 خود راه اندازی میکنید که در دامنه شما در دسترس است و با پسورد محافظت میشود.پیش نیازها⦁ سروری که اوبونتو 20.04 را اجرا میکند با حداقل 2 گیگابایت رم ، دسترسی به ریشه و یک حساب sudo و غیر ریشه. می توانید این کار را با دنبال کردن راهنمای اولیه تنظیم سرور Ubuntu 20.04 انجام دهید.⦁ Nginx که روی سرور شما نصب شده باشد. برای راهنمایی در مورد نحوه انجام این کار ، مراحل 1 تا 4 نحوه نصب Nginx را در اوبونتو 20.04 مطالعه کنید.⦁ یک نام دامنه کاملا ثبت شده برای میزبانی کد سرور ، که به سرور شما اشاره میکند. در این آموزش از code-server.your-domain استفاده می شود. می توانید نام دامنه را در Namecheap خریداری کنید ، به صورت رایگان در Freenom دریافت کنید ، یا از ثبت دامنه مورد نظر خود استفاده کنید.مرحله 1 – نصب کد- سروردر این بخش کد-سرور را روی سرور خود تنظیم می کنید. این مستلزم دانلود آخرین نسخه و ایجاد سرویس سیستمی است که کد-سرور را همیشه در پس زمینه اجرا می کند. همچنین رویکرد ریستارت را برای سرویس تعیین خواهید کرد ، به این ترتیب کد-سرور پس از خرابی یا ریبوت احتمالی در دسترس خواهد بود.همه داده های مربوط به کد-سرور را در پوشه ای به نام ~ / code-server ذخیره می کنید. با اجرای دستور زیر آن را ایجاد کنید:⦁ $ mkdir ~/code-serverبه آن پوشه بروید:⦁ $ cd ~/code-server⦁باید به صفحه نسخه های کد-سرور Github بروید و آخرین لینوکس را انتخاب کنید (نام فایل شامل “linux” خواهد بود). در زمان نوشتن ، آخرین نسخه 3.3.1 بوده است. با اجرای دستور زیر آن را با استفاده از wget دانلود کنید:⦁ $ wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz⦁سپس با اجرای این دستور، آرشیو را باز کنید:⦁ $ tar -xzvf code-server-3.3.1-linux-amd64.tar.gz⦁پوشه ای دقیقاً به نام فایل اصلی که دانلود کرده اید ، دریافت میکنید که شامل کد منبع کد-سرور است. آن را در / usr / lib / code-server کپی کنید تا با اجرای دستور زیر بتوانید به صورت گسترده به آن دسترسی پیدا کنید:⦁ $ sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server⦁سپس ، یک لینک نمادین را در / usr / bin / code-server ایجاد کنید ، که به عملکرد کد-سرور اشاره کند:⦁ $ sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server⦁در مرحله بعد ، یک پوشه برای کد-سرور ایجاد کنید ، که در آن داده های کاربر را ذخیره می کند:⦁ $ sudo mkdir /var/lib/code-server⦁اکنون که کد-سرور را دانلود کرده اید و آن را در سراسر سیستم در دسترس قرار داده اید ، یک سرویس سیستمی ایجاد خواهید کرد تا کد-سرور را همیشه در پس زمینه اجرا کنید.پیکربندی سرویس را در فایلی به نام code-server.service ، در دیرکتوری / lib / systemd / system ذخیره خواهید کرد ، جایی که سیستم عامل سرویس های خود را ذخیره می کند. آن را با استفاده از ویرایشگر متن خود ایجاد کنید:⦁ $ sudo nano /lib/systemd/system/code-server.service⦁خطوط زیر را اضافه کنید:/lib/systemd/system/code-server.service[Unit]Description=code-serverAfter=nginx.service[Service]Type=simpleEnvironment=PASSWORD=your_passwordExecStart=/usr/bin/code-server –bind-addr 127.0.0.1:8080 –user-data-dir /var/lib/code-server –auth passwordRestart=always[Install]WantedBy=multi-user.targetدر اینجا ابتدا شرح سرویس را مشخص می کنید. سپس ، اعلام می کنید که سرویس nginx قبل از این باید شروع شود. بعد از بخش [Unit] نوع سرویس را تعریف می کنید (simple بدان معنی است که فرایند باید به سادگی اجرا شود) و فرمانی را که اجرا می شود ارائه می دهد.همچنین مشخص می کنید که اجرای کد-سرور جهانی باید با چند آرگومان خاص برای کد-سرور آغاز شود. –bind-addr 127.0.0.1:8080 آن را به localhost در پورت 8080 متصل می کند ، بنابراین فقط از داخل سرور شما قابل دسترسی است. –user-data-dir /var/lib/code-server دایرکتوری داده های کاربر خود را تنظیم می کند ، و –auth password مشخص می کند که باید بازدید کنندگان را با یک رمزعبور ، مشخص شده در متغیر محیط PASSWORD که در خط بالای آن مشخص شده است ، تأیید کند.به یاد داشته باشید که your_password را با رمز عبور دلخواه خود جایگزین کنید ، سپس فایل را ذخیره کنید و ببندید.خط بعدی به systemd می گوید تا کد-سرور را در تمام مواقع عدم کارکرد ریستارت کند (برای مثال ، هنگام خرابی یا قطع فرایند). بخش [Install] به سیستم دستور می دهد تا در صورت امکان ورود به سرور شما ، این سرویس را شروع کند.با اجرای دستور زیر سرویس کد-سرور را شروع کنید:⦁ $ sudo systemctl start code-server⦁با مشاهده وضعیت آن بررسی کنید که درست شروع شده است:⦁ $ sudo systemctl status code-server⦁خروجی مشابه این مشاهده خواهید کرد:Output● code-server.service – code-serverLoaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s agoMain PID: 14985 (node)Tasks: 18 (limit: 2345)Memory: 26.1MCGroup: /system.slice/code-server.service├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. –bind-addr 127.0.0.1:8080 –user-data-dir /var/lib/code-server –auth>└─15010 /usr/lib/code-server/lib/node /usr/lib/code-server –bind-addr 127.0.0.1:8080 –user-data-dir /var/lib/code-server –auth passwordMay 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server.May 20 13:03:40 code-server-update-2004 code-server[15010]: info Wrote default config file to ~/.config/code-server/config.yamlMay 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yamlMay 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-serverMay 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080May 20 13:03:40 code-server-update-2004 code-server[15010]: info – Using password from $PASSWORDMay 20 13:03:40 code-server-update-2004 code-server[15010]: info – To disable use `–auth none`May 20 13:03:40 code-server-update-2004 code-server[15010]: info – Not serving HTTPSبرای شروع خودکار کد-سرور پس از راه اندازی مجدد سرور ، سرویس خود را با اجرای دستور زیر فعال کنید:⦁ $ sudo systemctl enable code-server⦁در این مرحله ، کد-سرور را دانلود کرده و آن را در سطح جهانی در دسترس قرار داده اید. سپس ، یک سرویس سیستمی برای آن ایجاد کرده اید و آن را فعال کرده اید ، بنابراین کد-سرور از هر بوت سرور شروع می شود. سپس ، با پیکربندی Nginx به عنوان یک پراکسی معکوس بین بازدید کننده و کد-سرور آن را در معرض نمایش دامنه خود قرار می دهید.مرحله 2 – قرار گرفتن در معرض کد-سرور در دامنه شمادر این بخش ، Nginx را به عنوان یک پروکسی معکوس برای کد-سرور پیکربندی می کنید.همانطور که در مرحله پیش نیاز Nginx آموخته اید ، فایل های پیکربندی سایت آن تحت /etc/nginx/sites-available ذخیره می شوند و بعداً باید برای فعال شدن با /etc/nginx/sites-enabled لینک شده باشند.پیکربندی را برای قرار دادن کد-سرور در دامنه خود در فایلی به نام code-server.conf ، تحت /etc/nginx/sites-available ذخیره می کنید. با ایجاد ویرایشگر خود را شروع به کار کنید:⦁ $ sudo nano /etc/nginx/sites-available/code-server.conf⦁خطوط زیر را اضافه کنید:etc/nginx/sites-available/code-server.confserver {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 80 گوش کند. سپس ، یک server_name را تعیین می کنید که به Nginx می گوید برای کدام دامنه درخواست ها را بپذیرد و این پیکربندی خاص را اعمال کند. در بلوک بعدی ، برای مکان ریشه (/) ، مشخص می کنید که درخواست ها باید به کد-سرور در حال اجرا در localhost:8080 به جلو و عقب منتقل شوند. سه خط بعدی (که با proxy_set_header شروع میشود) به Nginx دستور می دهد تا برخی از هدرهای درخواست HTTP را که برای عملکرد صحیح WebSockets مورد نیاز هستند ، استفاده کند.برای فعال کردن این پیکربندی سایت ، باید با اجرای دستور زیر ، یک پوشه مربوط به آن را در پوشه / etc / nginx / sites-enabled ایجاد کنید:⦁ $ sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf⦁برای آزمایش اعتبار پیکربندی ، دستور زیر را اجرا کنید:⦁ $ sudo nginx -t⦁خروجی زیر را مشاهده خواهید کرد:Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successfulبرای اینکه پیکربندی عملی شود ، باید Nginx را مجدداً راه اندازی کنید:⦁ $ sudo systemctl restart nginx⦁اکنون نصب کد-سرور شما در دامنه تان قابل دسترسی است. در مرحله بعد ، با استفاده از یک گواهی نامه Let’s Encrypt TLS رایگان ، آن را ایمن خواهید کرد.مرحله 3 – امنیت بخشیدن به دامنهدر این بخش دامنه خود را با استفاده از گواهی نامه Let’s Encrypt TLS که با استفاده از Certbot تهیه می نمایید را ایمن می کنید.برای نصب آخرین نسخه Certbot ، دستور زیر را اجرا کنید:⦁ $ sudo apt install certbot python3-certbot-nginx⦁به عنوان بخشی از پیش شرط ها ، ufw (فایروال کامپایل نشده) را فعال کرده و آن را پیکربندی کرده اید تا امکان ترافیک HTTP رمزگذاری نشده را فراهم کند. برای دسترسی ایمن به سایت ، باید آن را پیکربندی کنید تا با اجرای دستور زیر ، ترافیک رمزگذاری شده را بپذیرد:⦁ $ sudo ufw allow https⦁خروجی این چنین خواهد بود:OutputRule addedRule added (v6)به طور مشابه با Nginx ، لازم است آن را مجدد کنید لود تا پیکربندی آن به مرحله اجرا برسد:⦁ $ sudo ufw reload⦁چنین خروجی نشان داده می شود:OutputFirewall reloadedسپس در مرورگر خود به دامنه مورد استفاده برای کد-سرور بروید. اعلان ورود به کد-سرور را مشاهده خواهید کرد.کد-سرور از شما می خواهد رمز عبور خود را وارد کنید. پسوردی را که در مرحله قبل تعیین کردید وارد کنید و Enter IDE را فشار دهید. اکنون کد-سرور را وارد کرده و فوراً رابط کاربری گرافیکی آن را مشاهده می کنید.اکنون که بررسی کرده اید که کد-سرور به درستی در دامنه شما قرار گرفته است ، باید مجوز TLS را رمزگذاری کنید تا با استفاده از Certbot ، آن را ایمن کنید.برای درخواست گواهی نامه برای دامنه خود ، دستور زیر را اجرا کنید:⦁ $ sudo certbot –nginx -d code-server.your-domain⦁در این دستور ، شما certbot را برای درخواست گواهینامه ها برای دامنه خود اجرا می کنید – نام دامنه را با پارامتر -d وارد میکنید. پرچم –nginx به آن می گوید برای پشتیبانی از HTTPS ، پیکربندی سایت Nginx را به طور خودکار تغییر دهد. به یاد داشته باشید که دامنه code-server.your خود را با نام دامنه خود جایگزین کنید.اگر اولین بار است که Certbot را اجرا می کنید ، از شما خواسته می شود که یک آدرس ایمیل برای اخطارهای ضروری وارد کنید و شرایط خدمات EFF را بپذیرید. سپس Certbot درخواست Let’s Encrypt برای گواهی دامنه شما را میدهد. سپس از شما سؤال می کند که آیا مایلید همه ترافیک HTTP را به HTTPS هدایت کنید:OutputPlease choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –1: No redirect – Make no further changes to the webserver configuration.2: Redirect – Make all requests redirect to secure HTTPS access. Choose this fornew sites, or if you’re confident your site works on HTTPS. You can undo thischange by editing your web server’s configuration.– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –Select the appropriate number [1-2] then [enter] (press ‘c’ to cancel):توصیه می شود برای به حداکثر رساندن امنیت گزینه دوم را انتخاب کنید. پس از وارد کردن انتخاب خود ، ENTER را فشار دهید.خروجی مشابه این خواهد بود:OutputIMPORTANT NOTES:– Congratulations! Your certificate and chain have been saved at:/etc/letsencrypt/live/code-server.your-domain/fullchain.pemYour key file has been saved at:/etc/letsencrypt/live/code-server.your-domain/privkey.pemYour cert will expire on … To obtain a new or tweakedversion of this certificate in the future, simply run certbot againwith the “certonly” option. To non-interactively renew *all* ofyour certificates, run “certbot renew”– Your account credentials have been saved in your Certbotconfiguration directory at /etc/letsencrypt. You should make asecure backup of this folder now. This configuration directory willalso contain certificates and private keys obtained by Certbot somaking regular backups of this folder is ideal.– If you like Certbot, please consider supporting our work by:Donating to ISRG / Let’s Encrypt: https://letsencrypt.org/donateDonating to EFF: https://eff.org/donate-leاین بدان معنی است که Certbot موفق به تولید گواهینامه های TLS شده و آنها را در پیکربندی Nginx برای دامنه شما به کار می برد. اکنون می توانید دامنه کد سرور خود را در مرورگر خود مجدد لود کنید و یک پدلاک (قفل) در سمت چپ آدرس سایت مشاهده کنید ، این بدان معنی است که اتصال شما به درستی ایمن است.اکنون که کد-سرور را از طریق یک پروکسی معکوس Nginx در دامنه خود دارید ، آماده استفاده از واسط کاربری کد-سرور هستید.مرحله 4 – استفاده از رابط کد-سروردر این بخش از برخی از ویژگی های رابط کد-سرور استفاده خواهید کرد. از آنجا که کد-سرور ویژوال استودیو کد در حال اجرا در cloud است ، همان رابط کاربری نسخه دسکتاپ مستقل را دارد.در سمت چپ IDE ، یک ردیف عمودی از شش دکمه وجود دارد که بیشترین ویژگی های مورد استفاده را در یک صفحه جانبی که با عنوان Activity Bar شناخته می شود باز می کند.این نوار قابل تنظیم است بنابراین می توانید این نماها را به ترتیب دیگری جابجا کنید یا آنها را از نوار حذف کنید. به طور پیش فرض ، اولین دکمه منوی کلی را به صورت کشویی باز می کند ، در حالی که نمای دوم پنل اکسپلورر را باز می کند که پیمایش درخت مانند از ساختار پروژه را فراهم می کند. می توانید پوشه ها و فایل های خود را در اینجا مدیریت کنید – ایجاد ، حذف ، جابجایی و تغییر نام آنها در صورت لزوم. نمای بعدی دسترسی به عملکرد جستجو و جایگزینی را فراهم می کندبه دنبال این ، به ترتیب پیش فرض ، نمای شما از سیستم های کنترل منبع مانند Git قرار میگیرد. کد ویژوال استودیو همچنین از سایر ارائه دهندگان کنترل منبع پشتیبانی می کند و می توانید در این مستندات دستورالعمل های بیشتری را برای جریان کاری کنترل منبع با ویرایشگر بیابید.گزینه اشکال زدایی در نوار فعالیت ، کلیه اقدامات معمول را برای اشکال زدایی در پنل ارائه می دهد. ویژوال استودیو کد با پشتیبانی داخلی برای اشکال زدایی زمان اجرای Node.js و هر زبانی که به Javascript تبدیل شود همراه است. برای سایر زبانها می توانید افزونه هایی را برای اشکال زدایی مورد نیاز نصب کنید. می توانید پیکربندی های اشکال زدایی را در فایل launch.jsonذخیره کنید.نمای نهایی در نوار فعالیت ، منویی را برای دسترسی به افزونه های موجود در Marketplace فراهم می کند.قسمت اصلی GUI ویرایشگر شماست که می توانید آن ها را با استفاده از زبانه ها برای ویرایش کد خود جدا کنید. می توانید نمای ویرایش خود را به یک سیستم شبکه یا به فایل های جانبی تغییر دهید.پس از ایجاد فایل جدید از طریق منوی File ، یک فایل خالی در یک تب جدید باز می شود و پس از ذخیره سازی ، نام فایل در صفحه جانبی Explorer قابل مشاهده خواهد بود. ایجاد پوشه ها را می توان با کلیک راست بر روی نوار کناری Explorer و کلیک بر روی New Folder انجام داد. می توانید پوشه ای را با کلیک بر روی نام آن و همچنین drag و drop فایل ها و پوشه ها به قسمتهای بالایی بسط دهید تا آنها را به یک مکان جدید منتقل کنید.می توانید با وارد کردن CTRL + SHIFT + `، یا با کلیک کردن بر روی ترمینال در منوی کشویی بالای منو ، و انتخاب New Terminal ، به ترمینال دسترسی پیدا کنید. ترمینال در یک پنل پایین تر باز خواهد شد و دیرکتوری کار آن روی فضای کاری پروژه تنظیم می شود ، که شامل فایل ها و پوشه های نمایش داده شده در پنل سمت Explorer است.شما یک نمای کلی سطح بالا از رابط کد سرور را جستجو کرده اید و برخی از متداول ترین ویژگی ها را مشاهده کرده اید.نتیجهاکنون کد-سرور ، یک IDE همه کاره cloud را در اختیار دارید که بر روی سرور Ubuntu 20.04 شما نصب شده است ، در دامنه شما قرار گرفته و با استفاده از گواهی Let’s Encrypt ایمن شده است. هم اکنون می توانید بر روی پروژه ها بصورت جداگانه و همچنین در یک مجموعه همکاری تیمی کار کنید. اجرای IDE cloud منابع موجود در دستگاه محلی شما را آزاد می کند و به شما امکان می دهد منابع را در صورت لزوم مقیاس کنید. برای اطلاعات بیشتر در مورد ویژگی های دیگر و دستورالعمل های دقیق در مورد سایر مؤلفه های کد-سرور ، به مطالب کد ویژوال استودیو مراجعه کنید.برچسب‌ها:cloud, Cloud IDE