欢迎访问我的GitHub

这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos

一图胜千言

  • 先上图,下面是欣宸在自己的iPad Pro上用浏览器写代码的实拍,右下方可见SpringBoot应用启动成功的日志

  • 您可能会觉得平板配置不高,所以写代码和运行都会卡顿,个人的实际体验是可以流畅进行,因为编译和运行这些耗费资源的操作都是在微软的云服务器上进行的,服务器的配置是4核8G内存32G硬盘
  • 对了,服务器一分钱不要,也不限时...

关于Codespaces

  • GitHub的Codespaces,去年网上就有热议了,这是个托管在云中的开发环境,其原理如下,我们在自己的电脑上,用vscode桌面版或者网页版写代码,这些操作都会同步到微软的Azure虚拟机中,编译和运行代码也在虚拟机进行

  • 关于GitHub和微软的关系,应该是微软收购了GitHub吧...

  • 以下是个人在体验后对Codespaces的认知

  1. 可以在浏览器上编辑您github仓库中的代码,网页效果做得和本地vscode高度相似
  2. 微软为您准备了专属服务器(4核CPU,8G内存,32G硬盘),网页编辑代码时,对应的编译、运行都在此服务器上运行
  • 基于以上特点,下面这些福利是实实在在能够感受到的:
  1. 可以用平板电脑在浏览器上写代码、运行代码,下图是在华为的MatePad Pro平板上编写SpringBoot应用的样子,看日志已经启动成功了

  • 下图实拍用平板的浏览器访问SpringBoot应用的web服务,可以成功,这就很实用了

  1. 您可以使用配置很低很落后的老旧电脑来做开发,因为耗费资源的操作都在专属服务器上,您自己的电脑只要能流畅运行浏览器即可

本篇概览

  • 本文目标以基本体验为主,由以下内容组成
  1. 介绍一些前提条件
  2. 说说终于能用上Codespaces的来龙去脉
  3. 创建Codespaces
  4. 开发前的基本设置
  5. 检查服务器基本信息
  6. 在Codespaces上新建GitHub仓库分支
  7. 正式开始编码,新建一个SpringBoot应用,并运行和验证
  8. Codespaces的代码提交到GitHub
  9. 停止应用的操作
  10. 如何再次打开Codespaces
  11. 介绍几个小问题

重要前提

  • 以下是能愉快进行本篇操作的重要前提
  1. 您的网络可以访问GitHub
  2. 您有自己的GitHub账号
  3. 您有自己的代码仓库
  4. 欣宸是个普通的Java程序员,所以在开发体验中用的是Java相关技术栈,例如代码工程是SpringBoot的,如果您擅长的是其他语言,请自行调整

从失望到惊喜

  • 欣宸去年就填写了在线申请表想申请使用Codespaces,奈何连续几个月每次查看的时候都让我耐心等待,终于把这事情给忘干净了

  • 抱歉,申请地址也忘了,不过去Codespaces的官网看下,应该能找到申请入口

  • 时间就这样过去了,欣宸依然是每天吃饭睡觉工作写博客的枯燥生活,直到几天前收到下面这封邮件,说我可以使用Codespaces的beta版本了

创建codespace

  • 打开GitHub时,发现网页的右上角有点不一样了,如下图红框所示

  • 好像是说我已经参与到Codespaces的beta版本中了,哎呦,惊喜呢

  • 点击上图红框中的按钮,跳转到了这个地址:https://github.com/codespaces

  • 页面展示如下图,点击右上角的New codespace按钮去创建Codespaces

  • 接下来的页面要求你从自己的GitHub仓库和分支中选择一个,创建Codespaces,注意最后一个选项,是选择你的专属服务器配置,目前只有4核8G一个配置可选

  • 4核8G服务器值钱吗?参考阿里云社区给欣宸免费使用的ECS服务器价格,2核4G,一年4068RMB,微软这诚意真是没得说了

  • 选好仓库,点击右下角的Create codespace,后台就会开始为你创建专属服务器(官方文档中把这个称为容器)

  • 等待大约两三分钟,就看到了vscode的页面,明明是个web网页,做得却和本地安装的vscode高度相似

  • 注意上图右下角弹出的提示窗口,问你是否安装Java插件包,请点击Install完成安装

基本设置

  • 使用vscode时,安装java六合一插件以及springboot插件是基本操作
  • 如下图,java六合一插件包刚才已装

  • 然后是SpringBoot插件,如下图

  • 安装完成,咱们进入开发阶段吧

检查版本

  • 在TERMINAL窗口输入mvn -version检查当前的maven和java版本,如下图,这是个Linux服务器,java版本17.0.2,maven版本3.8.5

  • 这样的java和maven版本配置来自GitHub为您创建服务器时的默认配置,大概率不是您心目中最适合的版本,其实GitHub是支持修改服务器配置的,不过篇幅所限,这里恳求您暂时忍忍,将就着把HelloWorld勉强运行起来,后面会有专门的文章说明如何修改默认配置,包括java和maven版本,也包括更多深入的配置

新建分支

  • 刚才选定的代码仓库分支是dev,这个分支我还有别的用处,所以这里再新建一个分支用于开发,操作如下
  • 点击左侧底部的git分支图标,如下图红框位置

  • 弹出的输入窗口中,我点击了Create new branch...

  • 然后将当前目录下的内容全部删除干净

  • 一个干净的编码环境已经就绪,接下来看我大展身手:为您写一个HelloWorld应用!

开发和运行SpringBoot应用

  • 新建SpringBoot工程

  • 根据个人习惯,我选择了maven工程

  • 接下来就是常规的创建SpringBoot工程的一系列问答式交互,输入GAV、选择库(我选了lombok和spring web两个),注意JDK选择17,这是因为当前在线环境的JDK是17,至于如何修改当前环境的JDK,下一篇文章会有详细说明
  • 上述命令输入完成后,会弹出新的页面,进入新的workspace,如下图,熟悉的maven操作页面

  • 如果想切回之前的workspace,可以按照下图操作

  • 打开应用入口类HelloworldApplication.java,增加几行代码用于验证,我这里是用RestController增加了一个web路径hello,如下图所示,编码完成后点击右上角的三角按钮启动应用

  • 开始构建工程,期间会下载依赖库,所以要稍作等待,不过微软服务器的性能和网速都没让我们失望,大概两三分钟后应用启动成功

  • 现在应用在服务器上运行起来了,为了验证web服务是否可用,还要用到端口转发功能,也就是将服务器的某个端口映射到本地端口上,操作如下图红框

  • 在出现的提示框中输入8080再回车即可,此刻列表中会出现新的端口转发配置,点击下图红框位置,就会在浏览器打开转发地址

  • 此时,浏览器会提示404,如下图,这是因为我们还没有加上path导致的

  • 在地址栏中,尾部追加/hello,再回车,如下图,刚刚编写的web接口正常返回数据了

  • 现在可以愉快的在浏览器上写代码并流畅的运行了,破电脑也不卡的愉悦感真是难以言表

提交代码

  • 刚刚新增的分支还在微软服务器上,并没有提交的github,记得提交,操作如下图

  • 打开github,发现新分支已经提交,而且还创建了PR,你可以选择是否合并到main分支

停止应用

  • 停止应用的操作很简单,在terminal面板输入Ctrl+C即可
  • 关闭浏览器,本地电脑上似乎啥也没有,干干净净的感觉真好

再次打开Codespaces

  • 重新打开Codespaces的操作如下图所示,四步完成

偶现问题

  • 在打开Codespaces时,偶尔会遇到下图问题,刷新页面即可恢复

可以创建多少个Codespaces

  • 关于这个问题,官方这么说的:最少可以配置 2 台核心计算机,最多可以配置 32 台
  • 官方没有提免费和付费的事情,作为免费用户,同时创建两个Codespaces是没有问题的

实用吗?

  • 昨天欣宸在一个社区上传了IPad Pro上写代码那张照片,很快就有人来回复,说脱裤子放屁?

  • 对于这个观点,我觉得:您要是觉得平板上不好用,电脑也有浏览器吧,要是您再杠,说电脑浏览器上也不如桌面版的,那是不是微信小程序也没有必要存在了,毕竟有原生APP
  • 所以,是否实用应该是是因人而异的吧

未完待续

  • 至此,Codespaces最基本的体验已经完成,相信您和欣宸一样,对默认环境的配置会感到不满,敬请期待接下来的自由定制篇,欣宸原创,不会让您失望~

欢迎关注博客园:程序员欣宸

学习路上,你不孤单,欣宸原创一路相伴...

浏览器上写代码,4核8G微软服务器免费用,Codespaces真香的更多相关文章

  1. 阿里云新老用户购买 2核8G云服务器5M带宽

    这次阿里云活动的力度还是很大的,2核8G云服务器5M带宽 3年才2070 ,还是很值的购买的. 也放一个我的团战队连接,欢迎大家一起拼低价 https://m.aliyun.com/act/team1 ...

  2. JS预览图像将本地图片显示到浏览器上的代码

    js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  3. 在eclipse上写代码的时候,tomcat突然不能用了,重启都是闪一下就关了

    严重: A child container failed during start 严重: The required Server component failed to start so Tomca ...

  4. 在浏览器上运行 VS Code——GitHub 热点速览 v.21.22

    作者:HelloGitHub-小鱼干 和小程序类似,如果平时开发所用到的软件也能运行在浏览器中,"用完即走"岂不妙哉?code-server 便是一个让人在浏览器运行 VS Cod ...

  5. 后台启动weblogic成功后,在web浏览器上无法访问

    后台启动weblogic成功后,在web浏览器上无法访问,可尝试重启服务器.

  6. 让你的 vs code 跑在云上,用手机浏览器就能写代码

    让你的vs code 跑在云服务器上 在B站上看到一个视频Run VS Code in the browser with massive computing resources(教你如何配置一个云ID ...

  7. 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  8. 网易云课堂_C++程序设计入门(上)_第1单元:C++概览_第1单元作业 - 写代码 - 互评 (难度:易)

    第1单元作业 - 写代码 - 互评 (难度:易) 查看帮助 返回   提交作业(截止时间已过) 完成并提交作业     作业批改 互评训练   互评作业   自评作业     成绩公布 查看成绩 温 ...

  9. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

随机推荐

  1. Leetcode1/242/383-HashMap常用方法以及遍历排序方式

    HashMap常用方法以及遍历排序方式 常用方法 map.containsKey() map.put() map1.equals(map2) 遍历方式 Iterator<Map.Entry< ...

  2. 体温数据上传程序开发+获取时间的三种方法+DB Browser下载及安装

    今天开始了体温上传程序的开发 今日所学: 获取时间 (21条消息) (转)安卓获取时间的三种方法_sharpeha的博客-CSDN博客_安卓获取时间 DB Browser安装教程 (20条消息) sq ...

  3. oracle之lsnrctl命令

    采样: [oracle@sh02 ~]$ cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.4 (Santiago) ...

  4. 导出带标签的tar包(docker)-解决导出不带标签的麻烦

    需求:在docker的本地镜像库中导出tar包给其他节点使用. 如果使用:docker save -o package.tar e82656a6fc 这样形式导出的tar包,安装之后标签会消失解决办法 ...

  5. DirectX11 With Windows SDK--38 级联阴影映射(CSM)

    前言 在31章我们曾经实现过阴影映射,但是受到阴影贴图精度的限制,只能在场景中相当有限的范围内投射阴影.本章我们将以微软提供的例子和博客作为切入点,学习如何解决阴影中出现的Atrifacts: 边缘闪 ...

  6. OpenHarmony 3.1 Beta版本关键特性解析——OpenHarmony图形框架

    (以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 李煜 华为技术有限公司 崔坤华为技术有限公司 众所周知,动画是系统和应用与用户交互的重要环节.动画效果的好坏会直接影响 ...

  7. JQuery学习基础

    ## 今日内容     1. JQuery 基础:         1. 概念         2. 快速入门         3. JQuery对象和JS对象区别与转换         4. 选择器 ...

  8. js 轮播图 (原生)

    注 : 此处内容较多, 只显示代码, 具体讲解看注释.  具体参考 "黑马 pink老师"   https://www.bilibili.com/video/BV1Sy4y1C7h ...

  9. python 本地配置文件库 Dynaconf 简介

    [前言] 在项目中经常会遇到以下几种需要用到配置文件的场景: 相同的配置参数用在不同的代码中,如果需要调整,则需要手动将各个使用到的地方都相应调整. 密码等信息不想硬编码在项目文件中. 配置文件的格式 ...

  10. 团队Beta3

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 **还 ...