欢迎访问我的GitHub

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

本篇概览

  • 在前文《浏览器上写代码,4核8G微软服务器免费用,Codespaces真香》中,咱们以一个Java程序员视角体验了GitHub的Codespaces产品的beta版,简单来说有以下两大收获:
  1. 网页版vscode,其效果体验已经接近桌面版,实测电脑、iPad Pro、华为MatePad Pro的浏览器上都能使用
  2. 远程开发,编译和运行GitHub仓库的代码,实际操作是在4核8G的微软服务器上进行的,而这服务器资源对个人GitHub用户是免费的
  • 然而,对一些专一的程序员而言,网页版vscode做得再好也没有兴趣,毕竟桌面版vscode已经很优秀,习惯后实在没必要换成网页版
  • 但4核8G免费服务器的诱惑摆在眼前,岂能轻言放弃,于是就有了这篇文章:桌面版vscode远程开发,远程服务器是Codespaces的免费服务器
  • 另外还有一个衍生需求:这个免费的4核8G服务器,除了运行应用,还能做其他的事情吗?例如运行一些后台服务,为咱们的开发自测带来便利
  • 其实Codespaces官方是支持这些特性的,如下图所示,红框中就是桌面版vscode,本文要做的就是实战体验这个功能,再在Container中加入docker,让更多服务运行在这个docker上

实战目标

  • 为了突出实用性,本文不会照抄官方文档,而是模拟一次常规的开发过程,作为一个Java程序员,开发SpringBoot应用并操作数据库是个很有代表性的场景,因此,本篇会实现下图的效果:在VSCODE桌面版编码,而应用和MySQL(docker版)都运行在CodeSpace服务器上

  • 将上述任务拆分成以下步骤去完成

  1. 在vscode桌面版进行全部操作
  2. 在vscode上做设置,使其支持Codespaces
  3. 基于GitHub仓库创建codespace
  4. 个性化设置,如设定jdk,添加docker服务
  5. 在服务器上部署MySQL
  6. GitHub仓库拉新分支
  7. 在新分支开发一个SpringBoot应用,可以操作刚才部署好的MySQL
  8. 用单元测试验证应用的基本功能
  9. 启动应用,用web页面验证基本功能
  • 经历了上述实战,对于codespace是否具备实用型这个问题,相信您应该会有自己的判断了

重要前提

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

环境信息

  • 以下是本次实战的环境信息,可以作为参考
  1. 操作系统:macOS Monterey(M1 Pro芯片的MacBook Pro,16G内存)
  2. vscode: 1.67.2 (Universal)
  3. JDK:8
  4. MySQL:8.0.29
  5. SpringBoot:2.7.0
  • 结束闲聊,接下来开始实战

在vscode上做设置,使其支持Codespaces

  • 打开vscode,安装codespaces插件,操作如下图

  • 登录GitHub

  • 点击同意后,会打开浏览器验证身份,再并弹出如下菜单

  • vscode弹出确认

  • 现在进入了Codespaces管理页面,现在创建一个新的codespace,如下图,选择对应的代码仓库

  • 然后选择分支

  • 现在静候后台服务器初始化,大概几分钟后,页面如下,codespace创建成功,4核8G微软服务器到手,该琢磨怎么用了

新建分支

  • 为了不影响当前仓库的代码,这里新建一个分支,操作如下图

  • 我这里新建了名为vscode-desktop-tutorial的分支,里面没有任何内容

个性化设置

  • 开始后台环境的个性化设置,这里简单起见仅设置两个特性:
  1. JDK设置成8
  2. 增加docker服务
  • 打开命令面板,输入Add Development Container Configuration Files…然后回车

  • 系统会列出诸多预设环境供我们选择,Java8是现成的,果断选择

  • 选择debian操作系统的版本

  • Node.js?谢谢,不用了

  • 构建工具选择maven

  • 其他特性列表中,选择下图红框中的Docker (Moby) supoort,这样咱们的服务器就有了docker服务

  • 做完这一切后屏幕右下角会弹出提示,如下图,注意:不要点击下图红框的按钮!不要点击

  • 之所以不立即构建,因为还要给当前codespace增加两个vscode插件:SpringBoot和Lombok,下图是刚才的设置结束后自动新增的devcontainer.json文件,增加黄框中的内容

  • 如果您好奇我是如何知道SpringBoot插件对应的名字是Pivotal.vscode-boot-dev-pack,可以浏览插件市场官方网站:https://marketplace.visualstudio.com/items ,这里面的每个插件都有自己的Unique Identifier,如下图红框所示

  • 现在可以构建镜像并重建容器了,按照下图操作即可

  • 点击下图红框中的按钮就能看到构建镜像的过程,如果出错了也能在这里找到问题原因

  • 建议将刚才新增的devcontainer.json和Dockerfile文件提交到GitHub保存,这样下次新建codespace时,因为它们的存在,codespace会根据它们去构建镜像,于是每个新的codespace都会带上之前添加的个性化设置

  • 容器重建完成后,在TERMINAL用maven和docker命令验证,全部符合预期

  • 服务器算是设置得差不多了,接下来借助Docker部署MySQL

部署MySQL

  • 接下来在vscode的TERMINAL上操作,也就是在后台服务器的控制台操作,如下图

  • 新建一个文件夹,用来存储MySQL的数据库文件,这样即便容器被删除数据库文件也在,我这里是/workspaces/java-demo/mysql-data
  • 借助docker创建数据库也就是一行命令的事儿,完整命令如下,版本是8.0.29,root账号密码是123456
docker run \
--name mysql \
-p 3306:3306 \
-v /workspaces/java-demo/mysql-data:/var/lib/mysql \
-e MYSQL_ROOT_PASSWORD=123456 \
-idt \
mysql:8.0.29 \
--character-set-server=utf8mb4 \
--collation-server=utf8mb4_unicode_ci
  • 因为本地没有MySQL镜像,于是微软服务器去docker镜像仓库拉取镜像,那网速看着真是赏心悦目

  • MySQL容器很快就启动了,执行以下命令进入容器内部
docker exec -it mysql /bin/bash
  • 在容器内部就可以用mysql命令来操作数据库了
@zq2599 ➜ ~ $ docker exec -it mysql /bin/bash
root@f6a9dcc7fdcd:/# mysql -uroot -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 18
Server version: 8.0.29 MySQL Community Server - GPLCopyright (c) 2000, 2022, Oracle and/or its affiliates.Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)
  • 接下来用命令建库、建表、新增记录,参考命令如下(这里建了个卖家表,里面有主键、卖家名称、产品数量三个字段)
# 建数据库
CREATE DATABASE first_db;# 选中数据库
use first_db;# 建表
CREATE TABLE IF NOT EXISTS `seller`(`id` INT UNSIGNED AUTO_INCREMENT,`name` VARCHAR(100) NOT NULL,`product_num` INT NULL,PRIMARY KEY ( `id` )
)ENGINE=InnoDB DEFAULT CHARSET=utf8;# 新增三条记录
insert into seller (name, product_num) values ('seller1', 1111);
insert into seller (name, product_num) values ('seller2', 2222);
insert into seller (name, product_num) values ('seller3', 3333);
  • 完成了,接下来写个SpringBoot应用,然后运行起来操作数据库

开发SpringBoot应用

  • 命令行面板,输入下图红框中的内容,选择Spring Initializr

  • 选择SpringBoot版本

  • 选择语言

  • 然后是GAV坐标,java版本等,最后是依赖模块,我这里选择了web和lombok

  • 项目名称我这里是demo
  • 最后是源码目录,我这里是/workspaces/java-demo/,所有操作完成后,右下角提示新增workspace,点击Open,会打开新的workspace窗口,里面是java工程的视图,如下图所示,一定要用这个新的workspace,因为它是以demo目录为根目录层级,可以让java和maven插件识别成功,而原有的workspace以java-demo为根目录层级,导致新增的java项目无法被java和maven插件识别

  • 接下来要修改代码,增加数据库操作的功能,关于java访问MySQL的代码,就不在本篇多说了,您可以在我的GitHub仓库查看详细源码,地址是:https://github.com/zq2599/java-demo/tree/vscode-desktop-tutorial ,代码在下图红框内,一定要选vscode-desktop-tutorial分支

  • 这个SpringBoot应用是通过MyBatis库来访问MySQL的,其配置文件如下,可见连接数据库用的是127.0.0.1,因为MySQL的3306端口已经映射到应用所在服务器的3306端口
server:port: 8080spring:# 数据源datasource:username: rootpassword: 123456url: jdbc:mysql://127.0.0.1:3306/first_db?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTCdriver-class-name: com.mysql.cj.jdbc.Driver# mybatis配置
mybatis:# 配置文件所在位置config-location: classpath:mybatis-config.xml# 映射文件所在位置mapper-locations: classpath:mappers/*Mapper.xml# 日志配置
logging:level:root: INFOcom:bolingcavalry:demo:mapper: debug

验证-单元测试

  • 来看看这个SpringBoot应用的单元测试类,是查询id等于1的记录,并验证查询结果的合法性
package com.bolingcavalry.demo;import org.junit.jupiter.api.*;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import com.bolingcavalry.demo.entity.Seller;
import com.bolingcavalry.demo.service.SellerService;@SpringBootTest
class DemoApplicationTests {@AutowiredSellerService sellerService;@Testvoid testGetById() {int id = 1;Seller seller = sellerService.get(id);// 判定非空Assertions.assertNotNull(seller);// id相等Assertions.assertEquals(id, seller.getId());}
}
  • 点击下图红框中的按钮,执行单元测试通过,证明读数据库一切正常

验证:web

  • 这个SpringBoot应用有一个web接口,源码如下
@RestController
@Slf4j
public class SellerController {@Autowiredprivate SellerService sellerService;@RequestMapping(value = "/seller/{id}", method = RequestMethod.GET)public Seller get(@PathVariable("id") Integer id) {log.info("get entity, id=[{}]", id);return sellerService.get(id);}
}
  • 点击下图红框中的按钮启动应用

  • 确认8080出现在端口映射列表中

  • 浏览器访问 http://localhost:8080/seller/1 ,如下图,可以正常响应

  • 验证完成

提交到GitHub

  • 最后记得将代码和codespace配置提交到GitHub仓库
  • 由于新建的/workspaces/java-demo/mysql-data目录里保存的是MySQL数据库文件,没必要提交到GitHub,建议在.gitignore中添加此目录,位置和内容如下

  • 至此,一次典型的SpringBoot应用开发和调试过程就完成了,整个过程中vscode作为文本编辑和命令输入的工具,编译、单元测试、运行、docker服务这些都在远程codespace后台运行,下载镜像和jar包也是服务器去做的,实际网速非常理想,本地电脑始终保持低资源消耗,流畅的体验贯穿始终(网络要保持稳定)

  • 希望本篇能给您一些参考,白piao微软,我们一直在努力…

你不孤单,欣宸原创一路相伴

  1. Java系列
  2. Spring系列
  3. Docker系列
  4. kubernetes系列
  5. 数据库+中间件系列
  6. DevOps系列

桌面版vscode用免费的微软4核8G服务器做远程开发(编译运行都在云上,还能自由创建docker服务)相关推荐

  1. Windows下如何使用VScode连接远程linux服务器进行远程开发

    Windows下如何使用VScode连接远程linux服务器进行远程开发 1. 先上手-成功连接 1.vscode下载安装所需插件:vscode中的remote-ssh插件 安装之后,就会出现上图黄色 ...

  2. VSCODE远程连接服务器,远程开发。

    在开发中有时需要远程开发,需要远程连接服务器,所以需要学习一下如何远程连接. 1.安装vscode的插件:Remote-ssh 需要看清楚,是这个插件不要安装错了 2.安装好后打开命令行,快捷键 Ct ...

  3. 微软免费AI作文打分软件升级:雅思考研四六级都能用,还能查单词给替换

    赖可 发自 亚湾区 量子位 报道 | 公众号 QbitAI 练习英语写作一大困难就是:没有人帮我改. 现在可以找AI打分了. 亚洲研究院研发升级了以前的作文打分功能,命名为"微软爱写作&qu ...

  4. application.yml 动态替换_微软免费AI作文打分软件升级:雅思考研四六级都能用,还能查单词给替换...

    赖可 发自 亚湾区 量子位 报道 | 公众号 QbitAI 练习英语写作一大困难就是:没有人帮我改. 现在可以找AI打分了. 亚洲研究院研发升级了以前的作文打分功能,命名为"微软爱写作&qu ...

  5. VSCode 1.35 发布,新的图标,支持远程开发

    Visual Studio Code 五月份更新之 1.35 版本已发布. 此次更新的亮点有: 更新 Visual Studio Code 图标 - 新版本更新了 logo. 改进"转到定义 ...

  6. 苹果电脑适合学java吗_苹果 Mac 电脑和微软 Surface 电脑哪个适合做java开发?

    更新一下:完全没有说选择 MAC 是不行的,如果真的 MAC 连基本的软件环境或者自己独有的操作都没有,那真的不用讨论了.此答案只是我觉得 Win 好一点,可以留一些有价值的评论,真的没有必要说反正我 ...

  7. 荣耀 Magicbook Pro 锐龙版搭载深度操作系统桌面版

    深度科技作为国内优秀的Linux厂商,十余年来通过产品与研发团队的不懈努力,使"深度操作系统"在国内外屡获殊荣,并多次进入国际发行版排行前十名,得到了全球用户的瞩目. 深度科技与华 ...

  8. 安装docker桌面版(Windows)

    安装配置docker桌面版(Windows) 1. 进入官网https://www.docker.com/get-started/ ,选择Windows版下载. 2.打开设置,检查本机系统中是否启用了 ...

  9. 浏览器上写代码,4核8G微软服务器免费用,Codespaces真香

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 一图胜千言 先上图,下面是欣宸在自己的iPad Pro ...

  10. 微软宣布Office 2019桌面版 2018年秋季发布公开预览版

    近日,微软在Ignite大会上宣布了Office 2019桌面版服务,虽然还没有公布Office 2019的具体改进细节和功能,但该公司确实证实Office 2019将在2018年秋季发布公开预览版. ...

最新文章

  1. 《深入理解Java虚拟机》(第二版)学习2:垃圾收集算法
  2. java jpanel添加背景_java – 将背景图像添加到JPanel
  3. 圆你“鸟人”梦,全身VR模拟飞行器Birdly带你飞
  4. 终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了
  5. 一致代码段与非一致代码段
  6. php去除数组中的第一个元素,php如何删除数组的第一个元素和最后一个元素
  7. java中初始化的顺序_Java中 初始化的先后顺序?
  8. 程序员过关斩将--论商品促销代码的优雅性
  9. Eclipse 无法打开Console,show view无效
  10. STM32 避障小车 —— HC-SR04
  11. CImageList-CBitmap-Usage
  12. 戴尔服务器虚拟光驱,SupportAssist
  13. 计算机专业论文周进展300字,论文周进展怎么写(论文周进展情况记录8篇
  14. 计算机桌面图标右上角出现双箭头符号,电脑桌面图标有箭头怎么办 电脑桌面图片箭头去掉方法【图文】...
  15. Vue实现表格的分页打印和导出Excel功能
  16. html 衣服特效,详细介绍HTML5 3D衣服摇摆动画特效如何实现
  17. 不用工具,如何快速计算文件的MD5?
  18. 最美的时光在飞逝,为什么还在努力的路上蹒跚?
  19. 中青报X牛客 “百校百企”青年就业扶持计划在京启动,共商青年就业蓝图
  20. linux下dvwa安装教程,Kali linux2.0系统安装DVWA渗透测试平台 焕焕

热门文章

  1. 重庆涪陵创新计算机职业学校文艺表演,涪陵信息技术学校2017年元旦文艺汇演...
  2. DNS域名解析错误解决
  3. 论文阅读笔记:Deep Conversational Recommender System: A New Frontier for Goal-Oriented Dialogue Systems
  4. Unity Shader-Phong光照模型与Specular
  5. 将多名学生成绩绘制在一张画布中,并在图中显示学生成绩
  6. ESP8266 WIFI探针
  7. java中ArrayList小案例(快敲20遍++)
  8. U盘灯狂闪,读不到盘
  9. deflate php,我可以告诉mod_deflate和PHP只跳过一个目录上的压缩吗?
  10. 30天自制操作系统 第一天