歡迎訪問我的GitHub

這里分類和匯總了欣宸的全部原創(chuàng)(含配套源碼)：https://github.com/zq2599/blog_demos

一圖勝千言

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

關(guān)于Codespaces

• GitHub的Codespaces，去年網(wǎng)上就有熱議了，這是個托管在云中的開發(fā)環(huán)境，其原理如下，我們在自己的電腦上，用vscode桌面版或者網(wǎng)頁版寫代碼，這些操作都會同步到微軟的Azure虛擬機(jī)中，編譯和運(yùn)行代碼也在虛擬機(jī)進(jìn)行
  

• 關(guān)于GitHub和微軟的關(guān)系，應(yīng)該是微軟收購了GitHub吧…

• 以下是個人在體驗后對Codespaces的認(rèn)知

1. 可以在瀏覽器上編輯您github倉庫中的代碼，網(wǎng)頁效果做得和本地vscode高度相似
2. 微軟為您準(zhǔn)備了專屬服務(wù)器（4核CPU，8G內(nèi)存，32G硬盤），網(wǎng)頁編輯代碼時，對應(yīng)的編譯、運(yùn)行都在此服務(wù)器上運(yùn)行

• 基于以上特點(diǎn)，下面這些福利是實實在在能夠感受到的：

1. 可以用平板電腦在瀏覽器上寫代碼、運(yùn)行代碼，下圖是在華為的MatePad Pro平板上編寫SpringBoot應(yīng)用的樣子，看日志已經(jīng)啟動成功了

• 下圖實拍用平板瀏覽器訪問SpringBoot應(yīng)用的web服務(wù)，可以成功，這就很實用了
  

2. 您可以使用配置很低很落后的老舊電腦來做開發(fā)，因為耗費(fèi)資源的操作都在專屬服務(wù)器上，您自己的電腦只要能流暢運(yùn)行瀏覽器即可

本篇概覽

• 本文目標(biāo)以基本體驗為主，由以下內(nèi)容組成

1. 介紹一些前提條件
2. 說說終于能用上Codespaces的來龍去脈
3. 創(chuàng)建Codespaces
4. 開發(fā)前的基本設(shè)置
5. 檢查服務(wù)器基本信息
6. 在Codespaces上新建GitHub倉庫分支
7. 正式開始編碼，新建一個SpringBoot應(yīng)用，并運(yùn)行和驗證
8. Codespaces的代碼提交到GitHub
9. 停止應(yīng)用的操作
10. 如何再次打開Codespaces
11. 介紹幾個小問題

重要前提

• 以下是能愉快進(jìn)行本篇操作的重要前提

1. 您的網(wǎng)絡(luò)可以訪問GitHub
2. 您有自己的GitHub賬號
3. 您有自己的代碼倉庫
4. 欣宸是個普通的Java程序員，所以在開發(fā)體驗中用的是Java相關(guān)技術(shù)棧，例如代碼工程是SpringBoot的，如果您擅長的是其他語言，請自行調(diào)整

從失望到驚喜

• 欣宸去年就填寫了在線申請表想申請使用Codespaces，奈何連續(xù)幾個月每次查看的時候都讓我耐心等待，終于把這事情給忘干凈了

• 抱歉，申請地址也忘了，不過去Codespaces的官網(wǎng)看下，應(yīng)該能找到申請入口

• 時間就這樣過去了，欣宸依然是每天吃飯睡覺工作寫博客的枯燥生活，直到幾天前收到下面這封郵件，說我可以使用Codespaces的beta版本了
  

創(chuàng)建codespace

• 打開GitHub時，發(fā)現(xiàn)網(wǎng)頁的右上角有點(diǎn)不一樣了，如下圖紅框所示
  

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

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

• 頁面展示如下圖，點(diǎn)擊右上角的New codespace按鈕去創(chuàng)建Codespaces

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

• 4核8G服務(wù)器值錢嗎？參考阿里云社區(qū)給欣宸免費(fèi)使用的ECS服務(wù)器價格，2核4G，一年4068RMB，微軟這誠意真是沒得說了

• 選好倉庫，點(diǎn)擊右下角的Create codespace，后臺就會開始為你創(chuàng)建專屬服務(wù)器（官方文檔中把這個稱為容器）
  

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

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

基本設(shè)置

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

檢查版本

• 在TERMINAL窗口輸入mvn -version檢查當(dāng)前的maven和java版本，如下圖，這是個Linux服務(wù)器，java版本17.0.2，maven版本3.8.5

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

新建分支

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

• 點(diǎn)擊左側(cè)底部的git分支圖標(biāo)，如下圖紅框位置
  

• 彈出的輸入窗口中，我點(diǎn)擊了Create new branch…
  

• 然后將當(dāng)前目錄下的內(nèi)容全部刪除干凈
  

• 一個干凈的編碼環(huán)境已經(jīng)就緒，接下來看我大展身手：為您寫一個HelloWorld應(yīng)用！

開發(fā)和運(yùn)行SpringBoot應(yīng)用

• 新建SpringBoot工程
  

• 根據(jù)各人習(xí)慣，我選擇了maven工程
  

• 接下來就是常規(guī)的創(chuàng)建SpringBoot工程的一系列問答式交互，輸入GAV、選擇庫（我選了lombok和spring web兩個），注意JDK選擇17，這是因為當(dāng)前在線環(huán)境的JDK是17，至于如何修改當(dāng)前環(huán)境的JDK，下一篇文章會有詳細(xì)說明

• 上述命令輸入完成后，會彈出新的頁面，進(jìn)入新的workspace，如下圖，熟悉的maven操作頁面
  

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

• 打開應(yīng)用入口類HelloworldApplication.java，增加幾行代碼用于驗證，我這里是用RestController增加了一個web路徑hello，如下圖所示，編碼完成后點(diǎn)擊右上角的三角按鈕啟動應(yīng)用
  

• 開始構(gòu)建工程，期間會下載依賴庫，所以要稍作等待，不過微軟服務(wù)器的性能和網(wǎng)速都沒讓我們失望，大概兩三分鐘后應(yīng)用啟動成功
  

• 現(xiàn)在應(yīng)用在服務(wù)器上運(yùn)行起來了，為了驗證web服務(wù)是否可用，還要用到端口轉(zhuǎn)發(fā)功能，也就是將服務(wù)器的某個端口映射到本地端口上，操作如下圖紅框
  

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

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

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

• 現(xiàn)在可以愉快的在瀏覽器上寫代碼并流暢的運(yùn)行了，破電腦也不卡的體驗真是難以言表

提交代碼

• 剛剛新增的分支還在微軟服務(wù)器上，并沒有提交的github，記得提交，操作如下圖
  
• 打開github，發(fā)現(xiàn)新分支已經(jīng)提交，而且還創(chuàng)建了PR，你可以選擇是否合并到main分支

停止應(yīng)用

• 停止應(yīng)用的操作很簡單，在terminal面板輸入Ctrl+C即可
• 關(guān)閉瀏覽器，本地電腦上似乎啥也沒有，干干凈凈的感覺真好

再次打開Codespaces

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

偶現(xiàn)問題

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

可以創(chuàng)建多少個Codespaces

• 關(guān)于這個問題，官方這么說的：最少可以配置 2 臺核心計算機(jī)，最多可以配置 32 臺
• 官方?jīng)]有提免費(fèi)和付費(fèi)的事情，作為免費(fèi)用戶，同時創(chuàng)建兩個Codespaces是沒有問題的

實用嗎？

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

文章來源地址http://www.zghlxwxcb.cn/news/detail-492635.html

• 對于這個觀點(diǎn)，我覺得：您要是覺得平板上不好用，電腦也有瀏覽器吧，要是您再杠，說電腦瀏覽器上也不如桌面版的，那是不是微信小程序也沒有必要存在了，畢竟有原生APP
• 所以，是否實用應(yīng)該是是因人而異的…吧

未完待續(xù)

• 至此，Codespaces最基本的體驗已經(jīng)完成，相信您和欣宸一樣，對默認(rèn)環(huán)境的配置會感到不滿，敬請期待接下來的自由定制篇，欣宸原創(chuàng)，不會讓您失望~

你不孤單，欣宸原創(chuàng)一路相伴

1. Java系列
2. Spring系列
3. Docker系列
4. kubernetes系列
5. 數(shù)據(jù)庫+中間件系列
6. DevOps系列

到了這里，關(guān)于瀏覽器上寫代碼，4核8G微軟服務(wù)器免費(fèi)用，Codespaces真香的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！