ai

ai

首頁封存

在瀏覽器上寫代碼，4核8G微軟伺服器免費用，Codespaces真香

126
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
本文介紹了使用GitHub的Codespaces在瀏覽器上編寫和運行代碼的方法。Codespaces是一個在雲端中托管的開發環境，可以在瀏覽器中編寫代碼並在微軟的Azure虛擬機器上進行編譯和運行。這樣可以在任何設備上進行代碼編寫，並且不需要高配置的電腦。文章還介紹了如何創建Codespaces、進行基本設置、檢查服務器信息、新建GitHub倉庫分支、編寫和運行SpringBoot應用等操作。

本文由 簡悅 SimpRead 轉碼， 原文地址 xinchen.blog.csdn.net

電腦、平板，只要有瀏覽器就能寫代碼，頁面效果接近桌面版 vscode，編譯運行代碼都在免費的微軟伺服器上，心動嗎？隨本文一起行動吧

一圖勝千言#

  • 先上圖，下面是欣宸在自己的 iPad Pro 上用瀏覽器寫代碼的實拍，右下方可見 SpringBoot 應用啟動成功的日誌
    image
  • 您可能會覺得平板配置不高，所以寫代碼和運行都會卡頓，個人的實際體驗是可以流暢進行，因為編譯和運行這些耗費資源的操作都是在微軟的雲伺服器上進行的，伺服器的配置是 4 核 8G 內存 32G 硬碟
  • 另外，伺服器一分錢不要，也不限時…

關於 Codespaces#

  • GitHub 的 Codespaces，去年網上就有熱議了，這是一個托管在雲中的開發環境，其原理如下，我們在自己的電腦上，用 vscode 桌面版或者網頁版寫代碼，這些操作都會同步到微軟的 Azure 虛擬機中，編譯和運行代碼也在虛擬機進行
    image

  • 關於 GitHub 和微軟的關係，應該是微軟收購了 GitHub 吧…

  • 以下是個人在體驗後對 Codespaces 的認知

  1. 可以在瀏覽器上編輯您 github 倉庫中的代碼，網頁效果做得和本地 vscode 高度相似
  2. 微軟為您準備了專屬伺服器（4 核 CPU，8G 內存，32G 硬碟），網頁編輯代碼時，對應的編譯、運行都在此伺服器上運行
  • 基於以上特點，下面這些福利是實實在在能夠感受到的：
  1. 可以用平板電腦在瀏覽器上寫代碼、運行代碼，下圖是在華為的 MatePad Pro 平板上編寫 SpringBoot 應用的樣子，看日誌已經啟動成功了

image

  • 下圖實拍用平板瀏覽器訪問 SpringBoot 應用的 web 服務，可以成功，這就很實用了
    image
  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 版本了
    image

創建 codespace#

  • 打開 GitHub 時，發現網頁的右上角有點不一樣了，如下圖紅框所示
    image

  • 好像是說我已經參與到 Codespaces 的 beta 版本中了，哎呦，驚喜呢

  • 點擊上圖紅框中的按鈕，跳轉到了這個地址：https://github.com/codespaces

  • 頁面展示如下圖，點擊右上角的 New codespace 按鈕去創建 Codespaces

image

  • 接下來的頁面要求你從自己的 GitHub 倉庫和分支中選擇一個，創建 Codespaces，注意最後一個選項，是選擇你的專屬伺服器配置，目前只有 4 核 8G 一個配置可選
    image

  • 4 核 8G 伺服器值錢嗎？參考阿里雲社區給欣宸免費使用的 ECS 伺服器價格，2 核 4G，一年 4068RMB，微軟這誠意真是沒得說了

image

  • 選好倉庫，點擊右下角的 Create codespace，後台就會開始為你創建專屬伺服器（官方文檔中把這個稱為容器）
    image

  • 等待大約兩三分鐘，就看到了 vscode 的頁面，明明是個 web 網頁，做得卻和本地安裝的 vscode 高度相似

image

  • 注意上圖右下角彈出的提示窗口，問你是否安裝 Java 插件包，請點擊 Install 完成安裝

基本設置#

  • 使用 vscode 時，安裝 java 六合一插件以及 springboot 插件是基本操作
  • 如下圖，java 六合一插件包剛才已裝
    image
  • 然後是 SpringBoot 插件，如下圖
    image
  • 安裝完成，咱們進入開發階段吧

檢查版本#

  • 在 TERMINAL 窗口輸入 mvn -version 檢查當前的 maven 和 java 版本，如下圖，這是一個 Linux 伺服器，java 版本 17.0.2，maven 版本 3.8.5

image

  • 這樣的 java 和 maven 版本配置來自 GitHub 為您創建伺服器時的默認配置，大概率不是您心目中最適合的版本，其實 GitHub 是支持修改伺服器配置的，不過篇幅所限，這裡懇求您暫時忍忍，將就著把 HelloWorld 勉強運行起來，後面會有專門的文章說明如何修改默認配置，包括 java 和 maven 版本，也包括更多深入的配置

新建分支#

  • 剛才選定的代碼倉庫，我選定的 dev 分支還有別的用處，所以我打算新建一個分支，操作如下

  • 點擊左側底部的 git 分支圖標，如下圖紅框位置
    image

  • 彈出的輸入窗口中，我點擊了 Create new branch…
    image

  • 然後將當前目錄下的內容全部刪除乾淨
    image

  • 一個乾淨的編碼環境已經就緒，接下來看我大展身手：為您寫一個 HelloWorld 應用！

開發和運行 SpringBoot 應用#

  • 新建 SpringBoot 工程
    image

  • 根據各人習慣，我選擇了 maven 工程
    image

  • 接下來就是常規的創建 SpringBoot 工程的一系列問答式互動，輸入 GAV、選擇庫（我選了 lombok 和 spring web 兩個），注意 JDK 選擇 17，這是因為目前在線環境的 JDK 是 17，至於如何修改當前環境的 JDK，下一篇文章會有詳細說明

  • 上述命令輸入完成後，會彈出新的頁面，進入新的 workspace，如下圖，熟悉的 maven 操作頁面
    image

  • 如果想切回之前的 workspace，可以按照下圖操作
    image

  • 打開應用入口類 HelloworldApplication.java，增加幾行代碼用於驗證，我這裡是用 RestController 增加了一個 web 路徑 hello，如下圖所示，編碼完成後點擊右上角的三角按鈕啟動應用
    image

  • 開始構建工程，期間會下載依賴庫，所以要稍作等待，不過微軟伺服器的性能和網速都沒讓我們失望，大概兩三分鐘後應用啟動成功
    image

  • 現在應用在伺服器上運行起來了，為了驗證 web 服務是否可用，還要用到端口轉發功能，也就是將伺服器的某個端口映射到本地端口上，操作如下圖紅框
    image

  • 在出現的提示框中輸入 8080 再回車即可，此刻列表中會出現新的端口轉發配置，點擊下圖紅框位置，就會在瀏覽器打開轉發地址

image

  • 此時，瀏覽器會提示 404，如下圖，這是因為我們還沒有加上 path 導致的
    image

  • 在地址欄中，尾部追加 /hello，再回車，如下圖，剛剛編寫的 web 接口正常返回數據了

image

  • 現在可以愉快的在瀏覽器上寫代碼並流暢的運行了，破電腦也不卡的體驗真是難以言表

提交代碼#

  • 剛剛新增的分支還在微軟伺服器上，並沒有提交的 github，記得提交，操作如下圖
    image
  • 打開 github，發現新分支已經提交，而且還創建了 PR，你可以選擇是否合併到 main 分支

image

停止應用#

  • 停止應用的操作很簡單，在 terminal 面板輸入 Ctrl+C 即可
  • 關閉瀏覽器，本地電腦上似乎啥也沒有，乾乾淨淨的感覺真好

再次打開 Codespaces#

  • 重新打開 Codespaces 的操作如下圖所示，四步完成
    image

偶現問題#

  • 在打開 Codespaces 時，偶爾會遇到下圖問題，刷新頁面即可恢復
    image

可以創建多少個 Codespaces#

  • 關於這個問題，官方這麼說的：最少可以配置 2 台核心計算機，最多可以配置 32 台
  • 官方沒有提免費和付費的事情，作為免費用戶，同時創建兩個 Codespaces 是沒有問題的

實用嗎？#

  • 昨天欣宸在一個社區把 IPad Pro 上寫代碼那張照片發出來了，很快就有人來回覆脫褲子放屁？

image

  • 對於這個觀點，我覺得：您要是覺得平板上不好用，電腦也有瀏覽器吧，要是您再杠，說電腦瀏覽器上也不如桌面版的，那是不是微信小程序也沒有必要存在了，畢竟有原生 APP
  • 所以，是否實用應該是因人而異的… 吧
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。