GitHub的Codespaces為個人用戶提供了免費的4核8G伺服器資源，今天就來實戰如何用桌面版vscode連接codespace伺服器做遠程開發，把編譯運行下載等耗時耗資源的操作都轉移到雲端進行，還能為應用創建各種docker服務，這都不要錢！ ...
歡迎訪問我的GitHub
這裡分類和彙總了欣宸的全部原創(含配套源碼)：https://github.com/zq2599/blog_demos
本篇概覽
- 在前文《瀏覽器上寫代碼，4核8G微軟伺服器免費用，Codespaces真香》中，咱們以一個Java程式員視角體驗了GitHub的Codespaces產品的beta版，簡單來說有以下兩大收穫：
- 網頁版vscode，其效果體驗已經接近桌面版，實測電腦、iPad Pro、華為MatePad Pro的瀏覽器上都能使用
- 遠程開發，編譯和運行GitHub倉庫的代碼，實際操作是在4核8G的微軟伺服器上進行的，而這伺服器資源對個人GitHub用戶是免費的
- 然而，對一些專一的程式員而言，網頁版vscode做得再好也沒有興趣，畢竟桌面版vscode已經很優秀，習慣後實在沒必要換成網頁版
- 但4核8G免費伺服器的誘惑擺在眼前，豈能輕言放棄，於是就有了這篇文章：桌面版vscode遠程開發，遠程伺服器是Codespaces的免費伺服器
- 另外還有一個衍生需求：這個免費的4核8G伺服器，除了運行應用，還能做其他的事情嗎？例如運行一些後臺服務，為咱們的開發自測帶來便利
- 其實Codespaces官方是支持這些特性的，如下圖所示，紅框中就是桌面版vscode，本文要做的就是實戰體驗這個功能，再在Container中加入docker，讓更多服務運行在這個docker上
實戰目標
-
為了突出實用性，本文不會照抄官方文檔，而是模擬一次常規的開發過程，作為一個Java程式員，開發SpringBoot應用並操作資料庫是個很有代表性的場景，因此，本篇會實現下圖的效果：在VSCODE桌面版編碼，而應用和MySQL(docker版)都運行在CodeSpace伺服器上
-
將上述任務拆分成以下步驟去完成
- 在vscode桌面版進行全部操作
- 在vscode上做設置，使其支持Codespaces
- 基於GitHub倉庫創建codespace
- 個性化設置，如設定jdk，添加docker服務
- 在伺服器上部署MySQL
- GitHub倉庫拉新分支
- 在新分支開發一個SpringBoot應用，可以操作剛纔部署好的MySQL
- 用單元測試驗證應用的基本功能
- 啟動應用，用web頁面驗證基本功能
- 經歷了上述實戰，對於codespace是否具備實用型這個問題，相信您應該會有自己的判斷了
重要前提
- 以下是能愉快進行本篇操作的重要前提
- 您的網路可以訪問GitHub
- 您有自己的GitHub賬號
- 您有自己的代碼倉庫
- 欣宸是個普通的Java程式員，所以在開發體驗中用的是Java相關技術棧，例如代碼工程是SpringBoot的，如果您擅長的是其他語言，請自行調整
環境信息
- 以下是本次實戰的環境信息，可以作為參考
- 操作系統：macOS Monterey（M1 Pro晶元的MacBook Pro，16G記憶體）
- vscode: 1.67.2 (Universal)
- JDK：8
- MySQL：8.0.29
- SpringBoot：2.7.0
- 結束閑聊，接下來開始實戰
在vscode上做設置，使其支持Codespaces
-
打開vscode，安裝codespaces插件，操作如下圖
-
登錄GitHub
-
點擊同意後，會打開瀏覽器驗證身份，再並彈出如下菜單
-
vscode彈出確認
-
現在進入了Codespaces管理頁面，現在創建一個新的codespace，如下圖，選擇對應的代碼倉庫
-
然後選擇分支
-
現在靜候後臺伺服器初始化，大概幾分鐘後，頁面如下，codespace創建成功，4核8G微軟伺服器到手，該琢磨怎麼用了
新建分支
-
為了不影響當前倉庫的代碼，這裡新建一個分支，操作如下圖
-
我這裡新建了名為vscode-desktop-tutorial的分支，裡面沒有任何內容
個性化設置
- 開始後臺環境的個性化設置，這裡簡單起見僅設置兩個特性：
- JDK設置成8
- 增加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 - GPL
Copyright (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: 8080
spring:
# 數據源
datasource:
username: root
password: 123456
url: jdbc:mysql://127.0.0.1:3306/first_db?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
driver-class-name: com.mysql.cj.jdbc.Driver
# mybatis配置
mybatis:
# 配置文件所在位置
config-location: classpath:mybatis-config.xml
# 映射文件所在位置
mapper-locations: classpath:mappers/*Mapper.xml
# 日誌配置
logging:
level:
root: INFO
com:
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 {
@Autowired
SellerService sellerService;
@Test
void 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 {
@Autowired
private 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微軟，我們一直在努力...
