歡迎訪問我的GitHub

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

一圖勝千言

• 先上圖究孕，下面是欣宸在自己的iPad Pro上用瀏覽器寫代碼的實(shí)拍，右下方可見SpringBoot應(yīng)用啟動成功的日志

  
  
  image.png

• 您可能會覺得平板配置不高爹凹，所以寫代碼和運(yùn)行都會卡頓厨诸，個人的實(shí)際體驗(yàn)是可以流暢進(jìn)行，因?yàn)榫幾g和運(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)行

  
  
  image.png

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

• 以下是個人在體驗(yàn)后對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)蜒简，下面這些福利是實(shí)實(shí)在在能夠感受到的：

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

   
   
   image.png

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

  
  
  image.png

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

本篇概覽

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

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

重要前提

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

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

從失望到驚喜

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

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

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

  
  
  image.png

創(chuàng)建codespace

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

  
  
  image.png

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

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

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

  
  
  image.png

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

  
  
  image.png

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

  
  
  image.png

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

  image.png

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

  
  
  image.png

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

基本設(shè)置

• 使用vscode時，安裝java六合一插件以及springboot插件是基本操作

• 如下圖鸯檬，java六合一插件包剛才已裝

  
  
  image.png

• 然后是SpringBoot插件决侈，如下圖

  
  
  image.png

• 安裝完成，咱們進(jìn)入開發(fā)階段吧

檢查版本

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

  image.png

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

新建分支

• 剛才選定的代碼倉庫分支是dev孵延，這個分支我還有別的用處衡载，所以這里再新建一個分支用于開發(fā)，操作如下

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

  
  
  image.png

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

  image.png

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

  
  
  image.png

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

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

• 新建SpringBoot工程

  
  
  image.png

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

  
  
  image.png

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

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

  
  
  image.png

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

  
  
  image.png

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

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

  
  
  image.png

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

  
  
  image.png

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

  image.png

• 此時初烘，瀏覽器會提示404，如下圖分俯，這是因?yàn)槲覀冞€沒有加上path導(dǎo)致的

  
  
  image.png

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

  image.png

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

提交代碼

• 剛剛新增的分支還在微軟服務(wù)器上杏节，并沒有提交的github唬渗，記得提交，操作如下圖

  
  
  image.png

• 打開github奋渔，發(fā)現(xiàn)新分支已經(jīng)提交镊逝，而且還創(chuàng)建了PR，你可以選擇是否合并到main分支

  
  
  image.png

• 停止應(yīng)用的操作很簡單嫉鲸，在terminal面板輸入Ctrl+C即可

• 關(guān)閉瀏覽器撑蒜，本地電腦上似乎啥也沒有，干干凈凈的感覺真好

再次打開Codespaces

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

  
  
  image.png

偶現(xiàn)問題

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

  
  
  image.png

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

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

實(shí)用嗎巡莹？

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

  image.png

• 對于這個觀點(diǎn)骂远，我覺得：您要是覺得平板上不好用，電腦也有瀏覽器吧腰根，要是您再杠激才，說電腦瀏覽器上也不如桌面版的，那是不是微信小程序也沒有必要存在了额嘿，畢竟有原生APP

• 所以瘸恼，是否實(shí)用應(yīng)該是是因人而異的吧

未完待續(xù)

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

歡迎關(guān)注簡書：程序員欣宸

學(xué)習(xí)路上，你不孤單坎炼，欣宸原創(chuàng)一路相伴...