桌面版vscode用免費的微軟4核8G服務器做遠程開發（編譯運行都在雲上，還能自由創建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微軟，我們一直在努力...

歡迎關注博客園：程序員欣宸

學習路上，你不孤單，欣宸原創一路相伴...

桌面版vscode用免費的微軟4核8G服務器做遠程開發（編譯運行都在雲上，還能自由創建docker服務）

歡迎訪問我的GitHub

本篇概覽

實戰目標

重要前提

環境信息

在vscode上做設置，使其支持Codespaces

新建分支

個性化設置

部署MySQL

開發SpringBoot應用

驗證-單元測試

驗證：web

提交到GitHub

歡迎關注博客園：程序員欣宸

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

Go語言基準測試(benchmark)三部曲之三：提高篇

Go語言基準測試(benchmark)三部曲之二：內存篇

Go語言基準測試(benchmark)三部曲之一：基礎篇

雲端golang開發，無需本地配置，能上網就能開發和運行

client-go實戰之九：手寫一個kubernetes的controller

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結