主頁 > 後端開發 > 瀏覽器上寫代碼,4核8G微軟服務器免費用,Codespaces真香

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

2022-05-29 03:58:12 後端開發

歡迎訪問我的GitHub

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

一圖勝千言

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

關于Codespaces

  • GitHub的Codespaces,去年網上就有熱議了,這是個托管在云中的開發環境,其原理如下,我們在自己的電腦上,用vscode桌面版或者網頁版寫代碼,這些操作都會同步到微軟的Azure虛擬機中,編譯和運行代碼也在虛擬機進行
顯示 Codespaces 作業原理的圖表
  • 關于GitHub和微軟的關系,應該是微軟收購了GitHub吧...

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

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

image-20220528092931386

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

創建codespace

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

image-20220522150838135

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

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

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

image-20220522150715633

  • 接下來的頁面要求你從自己的GitHub倉庫和分支中選擇一個,創建Codespaces,注意最后一個選項,是選擇你的專屬服務器配置,目前只有4核8G一個配置可選
image-20220522150614486
  • 4核8G服務器值錢嗎?參考阿里云社區給欣宸免費使用的ECS服務器價格,2核4G,一年4068RMB,微軟這誠意真是沒得說了
img
  • 選好倉庫,點擊右下角的Create codespace,后臺就會開始為你創建專屬服務器(官方檔案中把這個稱為容器)
image-20220522151013477
  • 等待大約兩三分鐘,就看到了vscode的頁面,明明是個web網頁,做得卻和本地安裝的vscode高度相似

image-20220522151308602

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

基本設定

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

檢查版本

  • TERMINAL視窗輸入mvn -version檢查當前的maven和java版本,如下圖,這是個Linux服務器,java版本17.0.2,maven版本3.8.5

image-20220528074705982

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

新建分支

  • 剛才選定的代碼倉庫分支是dev,這個分支我還有別的用處,所以這里再新建一個分支用于開發,操作如下
  • 點擊左側底部的git分支圖示,如下圖紅框位置
image-20220526071330212
  • 彈出的輸入視窗中,我點擊了Create new branch...
image-20220526071513970
  • 然后將當前目錄下的內容全部洗掉干凈
image-20220526071841374
  • 一個干凈的編碼環境已經就緒,接下來看我大展身手:為您寫一個HelloWorld應用!

開發和運行SpringBoot應用

  • 新建SpringBoot工程
image-20220526072147540
  • 根據個人習慣,我選擇了maven工程
image-20220526072243721
  • 接下來就是常規的創建SpringBoot工程的一系列問答式互動,輸入GAV、選擇庫(我選了lombok和spring web兩個),注意JDK選擇17,這是因為當前在線環境的JDK是17,至于如何修改當前環境的JDK,下一篇文章會有詳細說明
  • 上述命令輸入完成后,會彈出新的頁面,進入新的workspace,如下圖,熟悉的maven操作頁面
image-20220526073425182
  • 如果想切回之前的workspace,可以按照下圖操作
image-20220526073639388
  • 打開應用入口類HelloworldApplication.java,增加幾行代碼用于驗證,我這里是用RestController增加了一個web路徑hello,如下圖所示,編碼完成后點擊右上角的三角按鈕啟動應用
image-20220526080112146
  • 開始構建工程,期間會下載依賴庫,所以要稍作等待,不過微軟服務器的性能和網速都沒讓我們失望,大概兩三分鐘后應用啟動成功
image-20220526074229735
  • 現在應用在服務器上運行起來了,為了驗證web服務是否可用,還要用到埠轉發功能,也就是將服務器的某個埠映射到本地埠上,操作如下圖紅框
image-20220526080459702
  • 在出現的提示框中輸入8080再回車即可,此刻串列中會出現新的埠轉發配置,點擊下圖紅框位置,就會在瀏覽器打開轉發地址

image-20220526081019593

  • 此時,瀏覽器會提示404,如下圖,這是因為我們還沒有加上path導致的
image-20220526081115574
  • 在地址欄中,尾部追加/hello,再回車,如下圖,剛剛撰寫的web介面正常回傳資料了

image-20220526081257269

  • 現在可以愉快的在瀏覽器上寫代碼并流暢的運行了,破電腦也不卡的愉悅感真是難以言表

提交代碼

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

停止應用

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

再次打開Codespaces

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

偶現問題

  • 在打開Codespaces時,偶爾會遇到下圖問題,重繪頁面即可恢復
image-20220528074051704

可以創建多少個Codespaces

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

實用嗎?

  • 昨天欣宸在一個社區上傳了IPad Pro上寫代碼那張照片,很快就有人來回復,說脫褲子放屁?
image-20220528095259518
  • 對于這個觀點,我覺得:您要是覺得平板上不好用,電腦也有瀏覽器吧,要是您再杠,說電腦瀏覽器上也不如桌面版的,那是不是微信小程式也沒有必要存在了,畢竟有原生APP
  • 所以,是否實用應該是是因人而異的吧

未完待續

  • 至此,Codespaces最基本的體驗已經完成,相信您和欣宸一樣,對默認環境的配置會感到不滿,敬請期待接下來的自由定制篇,欣宸原創,不會讓您失望~

歡迎關注博客園:程式員欣宸

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

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/482128.html

標籤:Java

上一篇:手把手教你使用 Spring Boot 3 開發上線一個前后端分離的生產級系統(一) - 介紹

下一篇:返回列表

標籤雲
其他(140654) Python(33733) JavaScript(21528) Java(15683) C(13935) 區塊鏈(8222) AI(7469) C#(6736) 爪哇(6352) 基礎類(6313) MySQL(6189) html(5786) 熊猫(5318) sql(5295) PHP(5204) 腳本語言(PerlPython)(5129) 非技術區(4971) Linux(4858) 数组(4840) R(4645) Android(4340) 反应(4324) 数据框(3726) css(3695) 节点.js(3412) C語言(3288) C++語言(3117) json(2821) Java相關(2746) 列表(2730) 疑難問題(2699) 安卓(2621) 扑(2615) 打字稿(2542) VBA(2514) 單片機工控(2479) 细绳(2191) ASP.NET(2132) iOS(2116) MongoDB(2009) Web開發(1951) 字典(1940) 正则表达式(1915) 麻木的(1909) 循环(1903) 擅长(1833) 镖(1830) 迅速(1808) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) VB基礎類(1755) .NETCore(1741) Unity3D(1694) 功能(1683) C++(1669) 開發(1646) .NET技术(1643) 系統維護與使用區(1617) 弹簧靴(1609)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 瀏覽器上寫代碼,4核8G微軟服務器免費用,Codespaces真香

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

    uj5u.com 2022-05-29 03:58:12 more
  • 手把手教你使用 Spring Boot 3 開發上線一個前后端分離的生產級

    專案簡介 novel 是一套基于時下最新 Java 技術堆疊 Spring Boot 3 + Vue 3 開發的前后端分離的學習型小說專案,配備詳細的專案教程手把手教你從零開始開發上線一個生產級別的 Java 系統,由小說門戶系統、作家后臺管理系統、平臺后臺管理系統等多個子系統構成。包括小說推薦、作品 ......

    uj5u.com 2022-05-29 03:57:11 more
  • 為什么有了并發安全的集合還需要讀寫鎖?

    大家好,我是三友,這篇文章想來跟大家來探討一下,在Java中已經提供了并發安全的集合,為什么有的場景還需要使用讀寫鎖,直接用并發安全的集合難道不行么? 在java中,并發安全的集合有很多,這里我就選用常見的CopyOnWriteArrayList為例,來說明一下讀寫鎖的價值到底提現在哪。 CopyO ......

    uj5u.com 2022-05-29 03:51:27 more
  • 基于非對稱加密和驗簽實作介面的安全開放(openapi的實作)

    背景 對外服務的介面為了安全起見,往往需要進行相應的安全處理:資料加密傳輸和身份認證。資料加密傳輸有對稱加密和非對稱加密兩種,為了更加安全起見采用非對稱加密比較好些,身份認證則采用數字簽名可以實作。 程式流程 核心代碼 客戶端 package openapi.client.sdk; import c ......

    uj5u.com 2022-05-29 02:56:10 more
  • 列印HashMap的方法分享

    轉自: http://www.java265.com/JavaJingYan/202205/16522774123344.html HashMap簡介 基于哈希表的 Map 介面的實作。此實作提供所有可選的映射操作,并允許使用 null 值和 null 鍵 (除了非同步和允許使用 null 之外,H ......

    uj5u.com 2022-05-29 02:56:05 more
  • 第一次發布jar包到maven中央倉庫

    1.github上上傳專案(略) 2.在sonatype上注冊賬號 https://issues.sonatype.org/secure/Dashboard.jspa 注意記住用戶名和密碼 3.在sonatype創建問題 4.新建完后客服會給提示 主要是要求:groupId要合理,需要按照要求在gi ......

    uj5u.com 2022-05-29 02:50:49 more
  • eclipse取消自動生成package-info.java

    Eclipse簡介說明 Eclipse 是一個開放源代碼的、 基于Java的可擴展開發平臺。 就其本身而言,它只是一個框架和一組服務, 用于通過插件組件構建開發環境。幸運的是, Eclipse 附帶了一個標準的插件集,包括Java開發工具(Java Development Kit,JDK) Ecli ......

    uj5u.com 2022-05-29 02:05:22 more
  • 【Java面試】什么是冪等?如何解決冪等性問題?

    一個在傳統行業作業了7年的粉絲私信我。 他最近去很多互聯網公司面試,遇到的很多技術和概念都沒聽過。 其中就有一道題是:”什么是冪等、如何解決冪等性問題“? 他說,這個概念聽都沒聽過,怎么可能回答出來。 好的,對于這個問題,看看普通人和高手的回答。 普通人: 嗯。。。。。。。。。。。。。。 高手: 好 ......

    uj5u.com 2022-05-29 01:45:10 more
  • springSecurity + jwt + redis 前后端分離用戶認證和授權

    記錄一下使用springSecurity搭建用戶認證和授權的代碼、、、 技術堆疊使用springSecurity + redis + JWT + mybatisPlus 部分代碼來自:https://blog.csdn.net/I_am_Hutengfei/article/details/100561 ......

    uj5u.com 2022-05-29 01:40:04 more
  • 在Spring中測驗CGLIB動態代理遇到ClassNotFoundException: org.o

    在Spring專案中進行簡單的cglib動態代理的學習測驗,主要代碼如下: 一個目標類HaveDinnerService public class HaveDinnerService { public String eat(String food) { System.out.println("開始吃 ......

    uj5u.com 2022-05-29 01:39:56 more