本文由 简悦 SimpRead 转码， 原文地址 xinchen.blog.csdn.net
电脑、平板，只要有浏览器就能写代码，页面效果接近桌面版 vscode，编译运行代码都在免费的微软服务器上，心动吗？随本文一起行动吧
一图胜千言#
- 先上图，下面是欣宸在自己的 iPad Pro 上用浏览器写代码的实拍，右下方可见 SpringBoot 应用启动成功的日志
- 您可能会觉得平板配置不高，所以写代码和运行都会卡顿，个人的实际体验是可以流畅进行，因为编译和运行这些耗费资源的操作都是在微软的云服务器上进行的，服务器的配置是 4 核 8G 内存 32G 硬盘
- 另外，服务器一分钱不要，也不限时…
关于 Codespaces#
-
GitHub 的 Codespaces，去年网上就有热议了，这是个托管在云中的开发环境，其原理如下，我们在自己的电脑上，用 vscode 桌面版或者网页版写代码，这些操作都会同步到微软的 Azure 虚拟机中，编译和运行代码也在虚拟机进行
-
关于 GitHub 和微软的关系，应该是微软收购了 GitHub 吧…
-
以下是个人在体验后对 Codespaces 的认知
- 可以在浏览器上编辑您 github 仓库中的代码，网页效果做得和本地 vscode 高度相似
- 微软为您准备了专属服务器（4 核 CPU，8G 内存，32G 硬盘），网页编辑代码时，对应的编译、运行都在此服务器上运行
- 基于以上特点，下面这些福利是实实在在能够感受到的：
- 可以用平板电脑在浏览器上写代码、运行代码，下图是在华为的 MatePad Pro 平板上编写 SpringBoot 应用的样子，看日志已经启动成功了
- 下图实拍用平板浏览器访问 SpringBoot 应用的 web 服务，可以成功，这就很实用了
- 您可以使用配置很低很落后的老旧电脑来做开发，因为耗费资源的操作都在专属服务器上，您自己的电脑只要能流畅运行浏览器即可
本篇概览#
- 本文目标以基本体验为主，由以下内容组成
- 介绍一些前提条件
- 说说终于能用上 Codespaces 的来龙去脉
- 创建 Codespaces
- 开发前的基本设置
- 检查服务器基本信息
- 在 Codespaces 上新建 GitHub 仓库分支
- 正式开始编码，新建一个 SpringBoot 应用，并运行和验证
- Codespaces 的代码提交到 GitHub
- 停止应用的操作
- 如何再次打开 Codespaces
- 介绍几个小问题
重要前提#
- 以下是能愉快进行本篇操作的重要前提
- 您的网络可以访问 GitHub
- 您有自己的 GitHub 账号
- 您有自己的代码仓库
- 欣宸是个普通的 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
- 所以，是否实用应该是是因人而异的… 吧