在浏览器中使用sealos desktop部署一个visual studio code

本文首发于公众号 在浏览器中使用sealos desktop部署一个visual studio code

前言

首先我们需要先部署一个sealos desktop，部署方式可以参考这篇文章。当我们部署好了sealos desktop之后就可以通过浏览器直接访问了，sealos desktop的桌面如下图所示：

一、部署visual studio code

我们首先点击桌面上的App Launchpad打开新建应用的窗口

然后点击新建应用按钮

然后在新建应用窗口按如下所示进行配置

然后点击右上角的部署应用按钮

部署成功visual studio code之后点击这里的外网地址即可直接在浏览器中访问我们部署的visual studio code编辑器

在登陆界面输入我们前面配置的登陆密码123456即可进入visual studio code 的编辑器界面

二、配置sealos桌面入口

上一步我们已经部署好了一个visual studio code编辑器到k8s集群中，这一步我们在sealos desktop桌面配置一个visual studio code入口，让visual studio code 编辑器直接在 sealos desktop 桌面打开

首先我们需要在desktop中点击Terminal

然后我们在打开的终端中使用vim新建一个code-server.yml 文件然后将如下内容填入code-server.yml文件中,其中的url和icon字段需要替换为实际部署地址，icon 的路径可以在浏览器的devtool中获取

apiVersion: app.sealos.io/v1
kind: App
metadata:
  name: visual-studio-code-entry
spec:
  name: VSCode
  icon:
  type: iframe
  data:
    url: https://abyjhtmynkmt.sealos.weisiqian.com/?folder=/config/workspace
    desc:
  icon: https://abyjhtmynkmt.sealos.weisiqian.com/_static/src/browser/media/favicon-dark-support.svg
  menuData:
    nameColor: text-black
    helpDropDown:
    helpDocs:
  displayType: normal

然后我们执行kubectl apply -f code-server.yml 将code-server添加到桌面上，刷新浏览器后就能在desktop看到visual studio code的图标了

直接点击桌面上的图标就可以在sealos desktop上直接使用visual studio code编辑器了