vs code 远程开发_如何在浏览器中使用VS Code设置远程开发工作流

vs code 远程开发

在本指南中，我将通过DigitalOcean逐步介绍VS Code-Server的设置，以及用于创建干净，简单的工作流程的调整。

代码服务器在可通过浏览器访问的远程服务器上运行Visual Studio Code 。

我为什么需要这个？

• 一致的环境：有了这样的设置，您就可以在具有稳定的开发环境的“ Chromebook”，平板电脑和笔记本电脑上进行编码，并拥有如家一般的感觉。
• 多平台：您将拥有VS Code的强大功能和灵活性，可从任何浏览器（包括平板电脑）进行访问。
• 服务器驱动：您可以利用大型云服务器来加快测试，编译，下载等速度。 通过此DigitalOcean设置，可以将服务器扩展到任意大小。
• 电池寿命：由于所有密集型计算都在服务器上运行，因此您可以在旅途中保留电池寿命。

设置

我发现以下设置在灵活性，生产力和成本效率方面非常有用。

1. 通过移动设备从预建图像创建Droplet。
2. 从GitHub获取最新更新。 （启动）
3. 在浏览器中通过Code Server提供VS Code。
4. 做东西。
5. 推送至GitHub。
6. 消灭水滴。

液滴创建

对于本指南，由于其简单直观的设置过程，我选择使用DigitalOcean-但是，其他平台也可以使用。

注册

首先，如果您还没有DigitalOcean帐户，请在DigitalOcean上创建一个帐户。

创建液滴

现在是时候创建我们的Droplet（将在其中运行VS Code Server的虚拟服务器）以及您的项目了。

• 图像： Ubuntu 18.04（默认）。
• 套餐： $ 15 / mo，2 GB / 2 CPU（最理想）。
• 地区：纽约（默认）。
• 选项：（本教程不需要）。
• 身份验证： 创建一个新的SSH密钥 ， 并将其上传到仪表板 。

现在点击创建按钮！

使用SSH连接

我个人使用Termius ，但是任何SSH客户端都可以使用。 这是DigitalOcean的简洁指南 。

代码服务器安装

是时候设置代码服务器了。 转到最新版本页面，然后将链接复制到Linux的最新版本。

在控制台中执行以下命令：

# Download latestrelease from Github ( insert copied link)
wget https://github.com/cdr/code- server /releases/download/{ version }/code- server { version }-linux-x64.tar.gz
 
# Unpack tarball
tar -xvzf code- server { version }-linux-x64.tar.gz
 
# Run Code Server
cd code- server { version }-linux-x64
./code- server

从DigitalOcean控制面板中检索Droplet的公共IP地址，然后将浏览器指向http：// {PUBLIC IP ADDRESS}：8080 /。

从控制台输出中复制生成的密码，然后登录到Code-Server。

现在，您应该直接从浏览器中拥有完整的VS Code功能-这有多酷？

客制化

认证方式

默认情况下，使用随机生成的密码启用密码身份验证。 您可以将PASSWORD环境变量设置为使用自己的环境变量：

sudo nano /etc/environment
 
# and append the following:
 
PASSWORD = “Your Password”
sudo reboot

扩展名

由于无法使用官方的VS Code市场，因此Coder创建了一个管理开放源代码扩展的自定义市场 。

字型

只要您将它们安装在本地计算机上，所有字体都可以正常工作，因为浏览器可以呈现文本。 例如， FiraCode ：

建筑形象

开机启动

对于设置，我添加了以下cron作业，以便在启动时从GitHub中提取最新的代码，并从一开始就可以在Code-Server中使用。

crontab -e
 
# And add the following (just an example): 
 
@reboot cd /root/AwesomeProject && git pull
@reboot /root/code-server[ $VERSION ]-linux-x86_64/code-server

拍摄快照

DigitalOcean提供了一种轻松的方法来创建完美的服务器映像，将来可以从中构建相同的Droplet。 重命名并拍摄快照。 完成后，您可以销毁当前的Droplet。

重建

在创建Droplet的过程中，单击Snapshots并选择新创建的图像。

注意：区域和基本计划设置仅限于从其创建快照的Droplet。

创建Droplet之后，您应该能够像以前一样访问Code-Server，并从上次中断的地方继续进行。

走得更远

总而言之，现在您可以通过单击一个按钮来启动和访问自己喜欢的开发设置，而无需考虑网络或计算机，而只需花费最少的费用。

就个人而言，我希望能够通过手机随时随地访问我的DigitalOcean控制面板。 尽管功能有限，但仍可以使用使用其API的非官方应用程序。 （ Android   要么   iOS 。）

通过测试Android客户端，它足以创建液滴。

可能的升级

• 在运行Git push之后的24小时后，使用API​​会自动终止Droplet，以避免因忘记销毁正在运行的Droplet而产生成本。
• 使用块存储进行程序和开发，以保留自上次访问以来的确切状态，在创建时动态安装到新的Droplet，以避免不断推送到GitHub。

谢谢阅读！ 很高兴听到您在下面的想法和建议。

翻译自: https://hackernoon.com/how-you-can-set-up-remote-development-workflow-with-vs-code-in-your-browser-3y3q3wu9

vs code 远程开发