استفاده از ویژوال استودیو از راه دور

مقدمه
ویژوال استودیو کد یک محیط توسعه محبوب یکپارچه (IDE) برای توسعه دهندگان است. انتخاب گسترده پلاگین ها ، طراحی حداقل و پشتیبانی از کراس پلتفرم آن را به یک انتخاب عالی برای توسعه دهندگان در تمام سطوح تبدیل کرده است. این آموزش بر استفاده از افزونه Remote-SSH برای فعال سازی توسعه نرم افزار از راه دور متمرکز شده است. با استفاده از این افزونه می توانید فایل ها را در ایستگاه کاری محلی خود ویرایش کنید ، اما عملکردهای توسعه مانند اجرای برنامه ، آزمایش یونیت یا آنالیز استاتیک را روی یک سرور مجازی از راه دور اجرا کنید.
دلایل زیادی وجود دارد که باعث می شود این امر برای شما مفید باشد. به عنوان مثال ، شما ممکن است یک ایستگاه کاری ویندوز داشته باشید و بخواهید در ویندوز توسعه بدهید ، اما کد شما در نهایت روی لینوکس اجرا می شود. ممکن است شما به حافظه رم یا قدرت پردازش بیشتری نسبت به دستگاه فعلی خود احتیاج داشته باشید ، یا بخواهید به دلیل رویکرد شرکت یا تمایل به دست نخورده نگه داشتن ایستگاه کاری خود، کد را از دستگاه شخصی تان دور کنید.
در این آموزش ، افزونه Remote-SSH را فعال می کنید ، کد ویژوال استودیو را پیکربندی می کنید تا کد را روی سرور مجازی از راه دور اجرا کنید ، و از نصب محلی خود کد ویژوال استودیو بر روی سرور مجازی از راه دور، کد را اجرا کنید.
پیش نیازها
برای دنبال کردن این راهنما ، به موارد زیر نیاز دارید:
⦁ دستگاه توسعه محلی که دارای Windows ،MacOSX یا Linux باشد. این آموزش در دستگاه های ChromeOS کار نخواهد کرد.
⦁ کد ویژوال استودیو ، که می توانید آن را از وب سایت رسمی دانلود و نصب کنید.
⦁ یک جفت کلید SSH ایجاد شده:
o اگر از macOS یا Linux استفاده می کنید ، می توانید مرحله 1 راهنمای نحوه تنظیم کلیدهای SSH در اوبونتو 18.04 را دنبال کنید. دستورات یکسان هستند ، بنابراین نگران نباشید که آموزش می گوید برای Ubuntu 18.04 است.
o اگر از Windows استفاده می کنید ، برای ایجاد کلید SSH ، آموزش نحوه ایجاد کلیدهای SSH با PuTTY در ویندوز را دنبال کنید.
o اگر از vpsgol استفاده می کنید ، می توانید راهنمای نحوه آپلود کلیدهای عمومی SSH روی یک حساب vpsgol را دنبال کنید.
• یک سرور مجازی Ubuntu 18.04 با پیروی از راهنمای تنظیم اولیه سرور مجازی Ubuntu 18.04 ، از جمله یک کاربر غیر ریشه فعال و فایروال راه اندازی شد.
مرحله 1 – نصب افزونه Remote-SSH
Extensions Marketplace جایی است که شما می توانید پسوندهای پشتیبانی شده و شخص ثالث را برای انواع ابزارها و زبان های برنامه نویسی مختلف دانلود کنید. در اینجاست که افزونه Remote-SSH را جستجو کرده و آن را نصب خواهید کرد.
در سمت چپ IDE یک ردیف عمودی از پنج آیکون وجود دارد. آیکون پایین ، که شبیه چهار مربع در یک جعبه به نظر می رسد که مربع بالای سمت راست جدا شده است ، آیکونی برای Extensions Marketplace میباشد:

همچنین می توانید با فشار دادن Ctrl + Shift + X به این بخش دسترسی پیدا کنید. با باز کردن این صفحه ، افزونه های پیشنهادی برای دانلود و نصب را مشاهده خواهید کرد.
پس از باز کردن Extensions Marketplace ، Remote-SSH را در نوار جستجوی افزونه ها در Marketplace تایپ کنید. وقتی پلاگین را پیدا کردید ، آن را انتخاب کنید و سپس بر روی دکمه سبز install کلیک کنید تا افزونه را نصب کنید.

اکنون افزونه نصب شده است. در مرحله بعد ، افزونه را پیکربندی خواهید کرد تا بتوانید به سرور مجازی خود متصل شوید.
مرحله 2 – پیکربندی افزونه Remote-SSH و اتصال به سرور مجازی خود
اکنون که این افزونه را نصب کرده اید می توانید آن را پیکربندی کنید تا به یک سرور مجازی متصل شوید. برای انجام این کار ، به اطلاعات زیر نیاز دارید:
• IP سرور مجازی یا نام هاست.
• نام کاربری که با آن وصل خواهید شد.
• کلید خصوصی که برای تأیید اعتبار کاربر خود استفاده خواهید کرد.
شما از این اطلاعات برای ایجاد یک فایل پیکربندی SSH استفاده می کنید که ویژوال استودیو کد می تواند از SSH سرور مجازی برای همگام سازی فایل ها و اجرای کد از طرف شما استفاده کند. این پیکربندی را با استفاده از ویژوال استودیو کد ایجاد خواهید کرد.
اکنون که افزونه Remote-SSH را نصب کرده اید ، یک جعبه سبز کوچک در گوشه سمت چپ پایین رابط Visual Studio Code مشاهده خواهید کرد. اگر با نشانگر ماوس روی جعبه حرکت کنید ، اعلان جهنده می گوید: یک پنجره از راه دور باز کنید. دکمه شبیه یک علامت بزرگتر از کمی پایین تر از علامت کوچکتر از > <، مانند نمونه موجود در تصویر زیر، به نظر می رسد:
روی دکمه کلیک کنید ، و کادر گفتگو در قسمت بالا نمایان می شود. Remote-SSH را انتخاب کنید: فایل پیکربندی را از لیست باز کنید:
اعلان بعدی از شما سؤال می کند که می خواهید کدام فایل پیکربندی را باز کنید. اگر در ویندوز هستید ، دو مکان را مشاهده می کنید: یکی در دیرکتوری کاربری شخصی شما ، و دیگری در محل نصب SSH . باید هنگام پیکربندی سرور مجازی از فایل در دیرکتوری کاربری خود استفاده کنید.
فایل را انتخاب کنید و ویرایشگر شما فایل config را باز می کند. برای تعریف اتصال به سرور مجازی خود ، کد زیر را به فایل اضافه کنید و بخش هایلایت شده را با اطلاعات مربوط به سرور مجازی خود جایگزین کنید:
config
Host my_remote_server
HostName your_server_ip_or_hostname
User sammy
IdentityFile /location/of/your/private/key

در اینجا نحوه عملکرد این فایل پیکربندی آورده شده است:
⦁ host: این فایل یک نام برای هاست شما مشخص می کند. که به شما امکان می دهد هنگام اتصال به سرور مجازی از یک نام کوتاه یا اختصاری به جای آدرس کامل IP یا نام میزبان استفاده کنید.
⦁ HostName: نام میزبان واقعی سرور مجازی ، که یا آدرس IP یا نام دامنه کاملاً واجد شرایط است.
⦁ user: کاربری که می خواهید از آن برای اتصال استفاده کنید.
⦁ IdentityFile: مسیر کلید خصوصی به سمت SSH تان میباشد. در سیستم های مک و لینوکس ، این مورد را در دیرکتوری هوم خود به صورت مخفی در دایرکتوری .ssh پیدا خواهید کرد که معمولاً id_rsa نامیده می شود. اگر در ویندوز هستید ، می توانید مکانی را برای ذخیره این فایل هنگام ایجاد آن با استفاده از putty-gen مشخص کنید.
مقادیر مناسب را در فایل خود مشخص کرده و فایل را ذخیره کنید.
Visual Studio Code اکنون پیکربندی شده و آماده اتصال به سرور مجازی شماست. بر روی کلید سبز Open a remote window در گوشه سمت چپ پایین کلیک کنید و Remote-SSH: Connect to Host… را انتخاب کنید.
پس از انجام این کار ، همه سرور مجازی های موجود و پیکربندی شده در منوی کشویی ظاهر می شوند. سرور مجازی ی را که می خواهید به آن وصل شوید از این لیست انتخاب کنید.
اگر این اولین بار است که از دستگاه خود به این سرور مجازی وصل می شوید ، احتمالاً مشابه تصویر یر، گفتگوی تصدیق اثر انگشت SSH از شما خواسته می شود:
این کار برای اطمینان از اتصال واقعی شما به سرور مجازی هایی که فکر می کنید میباشد. می توانید با ورود به سرور مجازی خود به صورت دستی و اجرای برنامه ssh-keygen -l -f /etc/ssh/ssh_host_key.pub برای مشاهده اثر انگشت سرور مجازی ، این درخواست را تأیید کنید. اگر این اثر انگشت همان چیزی است که در ویژوال استودیو کد به شما ارائه شد ، پس در واقع به سرور مجازی ی که فکر می کنید هستید متصل شده اید ، بنابراین می توانید بر روی دکمه ادامه کلیک کنید.
Visual Studio Code هنگام اتصال جدید ، پنجره جدید را باز می کند. یک پنجره جدید با صفحه خوش آمد گویی ظاهر می شود. می دانید که اگر SSH: your_ip_address_or_hostname را در کادر سبز در گوشه سمت چپ پایین مشاهده کنید ، اتصال شما موفقیت آمیز است. این بدان معنی است که ویژوال استودیو کد با سرور مجازی از راه دور شما ارتباط برقرار می کند.

اکنون که به سیستم متصل شدید ، می توانید دستورات و کد را از ویرایشگر خود اجرا کنید.
مرحله 3 – اجرای کد روی سرور مجازی Remote
افزونه Remote-SSH پیکربندی شده است و زمان آن است که برخی از کدها را در دستگاه راه دور خود اجرا کنید. با انتخاب ترمینال از نوار پیمایش در بالای پنجره Visual Studio و کلیک بر روی New Terminal ، یک پنجره ترمینال را باز کنید. همچنین می توانید با فشار دادن CTRL + Shift + ` ترمینال باز کنید. ترمینالی که باز می شود یک ترمینال در سرور مجازی راه دور شماست و نه در دستگاه محلی شما.
هنگامی که ترمینال باز می شود ، دستور زیر را برای مشاهده آدرس IP سرور مجازی خود صادر کنید تا تأیید کنید که به سرور مجازی راه دور خود وصل شده اید:
⦁ $ ip addr
⦁
خروجی زیر را در ترمینال خود مشاهده خواهید کرد:
Output
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
inet 127.0.0.1/8 scope host lo
valid_lft forever preferred_lft forever
inet6 ::1/128 scope host
valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff
inet your_server_ip brd your_broadcast_address scope global eth0
valid_lft forever preferred_lft forever
…

برای آزمایش توانایی اجرای کد از راه دور ، یک فایل جدید Python به نام hello.py را در ویرایشگر خود ایجاد کنید. هنگامی که به سرور مجازی راه دور خود متصل هستید ، تمام فایل های ایجاد شده از طریق ویژوال استودیو کد در آن سرور مجازی ذخیره می شوند ، نه در دستگاه محلی شما.
محتوای زیر را به فایل اضافه کنید:
hello.py
print(“Hello Sammy!”)

برای اجرای این برنامه روی سرور مجازی خود ، یک ترمینال را در ویژوال استودیو کد از منوی پیمایش یا با فشار دادن دنباله کلید CTRL + Shift + ` باز کنید. از آنجا که این بخش ترمینال به سرور مجازی راه دور شما متصل است ، برای اجرای برنامه hello.py ، دستور زیر را در ترمینال اجرا کنید:
⦁ $ python3 hello.py
⦁
خروجی برنامه شما نمایش داده می شود

همچنین می توانید با انتخاب Run without Debugging ، فایل را از منوی زمینه Debug اجرا کنید.
توجه: اگر هر گونه افزونه توسعه در Visual Studio Code مانند افزونه پایتون نصب کرده اید ، مجبورید این برنامه های افزودنی را روی سرور مجازی خود از طریق Extension Marketplace نصب مجدد کنید. اگر قبلاً این افزونه ها را در Visual Studio Code نصب کرده باشید ، وقتی دوباره آنها را جستجو می کنید ، Marketplace می گوید Install on SSH: name host. همیشه توجه داشته باشید که در چه زمینه توسعه ای قرار دارید ، زیرا اینجاست که ویژوال استودیو کد افزونه های شما را نصب کرده و فایل های شما را ایجاد می کند. اگر می خواهید بدون نصب این افزونه ها ، کد خود را اجرا کنید ، جعبه های گفتگوی خطا در گوشه سمت راست پایین صفحه نمایش داده می شود و از شما خواسته می شود تا آنها را روی سرور مجازی راه دور خود نصب کنید. پس از نصب این موارد ، احتمالاً از شما خواسته میشود مجدداً کد ویژوال استودیو را لود کنید. با راه اندازی مجدد ، بدون نیاز به اتصال مجدد دستی ، بر روی سرور مجازی راه دور کار را ادامه خواهید داد.

نتیجه
اکنون کد ویژوال استودیو برای توسعه در سرور مجازی از راه دور با استفاده از SSH پیکربندی شده است. اجرای از راه دور با یک IDE مزایای بسیاری از جمله امکان تست سریع نحوه عملکرد کد شما در سیستم عامل های مختلف و مشخصات سخت افزاری مختلف را ارائه می دهد. تا زمانی که به اینترنت دسترسی داشته باشید ، می توانید از هر رایانه به سرور مجازی خود متصل شوید و روی کدتان کار کنید ، و حتی اگر Windows را به عنوان سیستم عامل اصلی خود اجرا کنید ، می توانید با استفاده از یک محیط Linux کار توسعه را انجام دهید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade