با حرکت ابزارهای گسترش دهنده به سمت 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-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
در اینجا ابتدا شرح سرویس را مشخص می کنید. سپس ، اعلام می کنید که سرویس 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-server
Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago
Main PID: 14985 (node)
Tasks: 18 (limit: 2345)
Memory: 26.1M
CGroup: /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 password
May 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.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using config file ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info Using user-data-dir /var/lib/code-server
May 20 13:03:40 code-server-update-2004 code-server[15010]: info code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3
May 20 13:03:40 code-server-update-2004 code-server[15010]: info HTTP server listening on http://127.0.0.1:8080
May 20 13:03:40 code-server-update-2004 code-server[15010]: info – Using password from $PASSWORD
May 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.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 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
⦁
خروجی زیر را مشاهده خواهید کرد:
Output
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
⦁
اکنون نصب کد-سرور شما در دامنه تان قابل دسترسی است. در مرحله بعد ، با استفاده از یک گواهی نامه Let’s Encrypt TLS رایگان ، آن را ایمن خواهید کرد.
مرحله 3 – امنیت بخشیدن به دامنه
در این بخش دامنه خود را با استفاده از گواهی نامه Let’s Encrypt TLS که با استفاده از Certbot تهیه می نمایید را ایمن می کنید.
برای نصب آخرین نسخه Certbot ، دستور زیر را اجرا کنید:
⦁ $ sudo apt install certbot python3-certbot-nginx
⦁
به عنوان بخشی از پیش شرط ها ، ufw (فایروال کامپایل نشده) را فعال کرده و آن را پیکربندی کرده اید تا امکان ترافیک HTTP رمزگذاری نشده را فراهم کند. برای دسترسی ایمن به سایت ، باید آن را پیکربندی کنید تا با اجرای دستور زیر ، ترافیک رمزگذاری شده را بپذیرد:
⦁ $ sudo ufw allow https
⦁
خروجی این چنین خواهد بود:
Output
Rule added
Rule added (v6)
به طور مشابه با Nginx ، لازم است آن را مجدد کنید لود تا پیکربندی آن به مرحله اجرا برسد:
⦁ $ sudo ufw reload
⦁
چنین خروجی نشان داده می شود:
Output
Firewall 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 هدایت کنید:
Output
Please 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 for
new sites, or if you’re confident your site works on HTTPS. You can undo this
change by editing your web server’s configuration.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Select the appropriate number [1-2] then [enter] (press ‘c’ to cancel):
توصیه می شود برای به حداکثر رساندن امنیت گزینه دوم را انتخاب کنید. پس از وارد کردن انتخاب خود ، ENTER را فشار دهید.
خروجی مشابه این خواهد بود:
Output
IMPORTANT NOTES:
– Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/code-server.your-domain/privkey.pem
Your cert will expire on … To obtain a new or tweaked
version of this certificate in the future, simply run certbot again
with the “certonly” option. To non-interactively renew *all* of
your certificates, run “certbot renew”
– Your account credentials have been saved in your Certbot
configuration directory at /etc/letsencrypt. You should make a
secure backup of this folder now. This configuration directory will
also contain certificates and private keys obtained by Certbot so
making 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/donate
Donating 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 منابع موجود در دستگاه محلی شما را آزاد می کند و به شما امکان می دهد منابع را در صورت لزوم مقیاس کنید. برای اطلاعات بیشتر در مورد ویژگی های دیگر و دستورالعمل های دقیق در مورد سایر مؤلفه های کد-سرور ، به مطالب کد ویژوال استودیو مراجعه کنید.
