學習 Linux(類Unix) 操作系統初期最大的難題，莫過於如果對電腦技術不夠熟悉，可能連虛擬機都架不起來，導致根本還沒開始學習就結束了。而在學校的課程中也會遇到類似的問題，開始上課時，需要花時間創建虛擬機，浪費一些不必要的時間(有一些學校電腦本身就安裝Linux的除外)。
但今天我要來跟大家介紹一個非常有趣的專案，叫做 WebVM。
這個專案可以說堪稱黑科技，可以讓我們在瀏覽器上，運行完整的 Linux 操作系統，而且是 完全跑在瀏覽器上 的 完整 Linux，可以編譯程式、執行 32 位元的 x86 二進位等等，不需要設定任何的環境，只需要打開網址就能夠使用。也可以依照個人的需求，自行部署包含自訂檔案和函式庫的服務。
今天就帶大家一起來認識一下 WebVM 這個專案。
WebVM 初體驗：線上 Demo 功能展示
從 WebVM 的 GitHub 頁面，我們可以找到它的 Demo 連結。點進去你就可以直接在瀏覽器上操作 Linux 指令。
WebVM 的 GitHub 頁面:
https://github.com/leaningtech/webvm
WebVM 也內建了一些常用的開發工具，像是 Python、GCC 等等。我們可以簡單測試一下，在裡面編譯一個 Hello World 的 C 檔案，或是用 Python 跑個 Fibonacci 數列，體驗一下在瀏覽器中寫程式的感覺。
網頁左邊的側邊欄則提供了一些關於 WebVM 的資訊和專案介紹，包括 CPU 使用率、硬碟讀取、網路連線等，有興趣的朋友可以自行研究。
WebVM 專案結構解析
WebVM 這個專案的結構大致可以分為四個區塊：
- CheerpX 虛擬化引擎
- 虛擬儲存後端
- 基於 Tailscale 的網路傳輸層
- HTML + Xterm.js 的前端顯示介面
其中 CheerpX 這個基於 WebAssembly 的 x86 虛擬化引擎，是整個專案的關鍵核心。它裡面包含了從 x86 指令到 WebAssembly 的高效即時編譯器，以及用於 Linux 系統呼叫的模擬層。
這邊簡單科普一下 WebAssembly，它是一種現代瀏覽器都支援的低階程式語言，執行效率比 JavaScript 更高，可以用接近原生的速度跨平台運行。主要就是用來解決 JavaScript 在處理複雜程式時性能不足的問題。
另外，WebVM 運行時所需要的檔案都是即時下載的，不需要一次下載整個系統映像檔，這讓 WebVM 這個網頁專案變得更加輕巧易用。
當然，這樣做也有個小缺點，就是第一次執行指令時，會需要花比較久的時間來載入相關資源。
WebVM 的應用場景：教育訓練、輕量開發
WebVM 這個專案的前端是使用 Apache 2.0 協議開源的，我們可以依照自己的使用需求，自行部署包含自訂檔案和函式庫的服務。 部署的方式除了可以下載下來，使用自己的伺服器進行部署，也可以透過 GitHub Actions 部署，非常方便。
這種方便性讓我在看到 WebVM 這個專案後，馬上就想到它非常適合用來做 Linux 系統 或是 類 Unix 系統的操作基礎教學。
雖然現在 Windows 系統上也有 WSL (Windows Subsystem for Linux) 可以用了，但學校的老電腦不一定跑得動 WSL，且光是安裝軟體對學校來說可能都是個麻煩事。而對於在家自學 Linux 基礎操作的朋友來說，直接打開網頁就能使用 Linux 的 WebVM，也能大幅降低學習門檻。
更棒的是，老師或教授還可以在 WebVM 裡輕鬆添加範例使用的檔案，方便教學。
不過這邊要稍微注意一下，雖然專案的前端是開源的，但它的核心 CheerpX 是限制個人免費商用，或是可以用於教育、遊戲等目的。企業與其他組織想要商用，則需要獲取商業許可證。
用 GitHub Actions 部署自己的 WebVM 實例
接下來簡單跟大家介紹一下，如何自行部署一個 WebVM 的實例。
這邊因為使用自己的伺服器部署，修改內建檔案比較麻煩，所以我就以 GitHub Actions 部署 的方法來跟大家說明。
步驟一：Fork WebVM 儲存庫
首先，我們要 Fork WebVM 的儲存庫到自己的 GitHub 帳號。
儲存庫的名稱可以依照你的喜好修改，這邊我先保持預設名稱不動。
步驟二：設定 GitHub Pages 來源
接下來，進入儲存庫設定頁面，在左側側邊欄點擊 Pages 頁面。
在 Build and deployment 區塊的 Source 選項中，將來源設定為 GitHub Actions。
步驟三：執行 Deploy Workflow
接著，進入專案的 Actions 頁面，點擊左側的 Deploy。
在這個頁面的右側，點擊 Run Workflow 按鈕。
在彈出的視窗中， Dockerfile 和 Image Size 欄位基本上可以保持預設值不用修改。但如果你有額外添加更多檔案，或是預設函式庫，可以考慮稍微調高 Image Size 的數值。
設定完成後，點擊綠色的 Run Workflow 按鈕。
步驟四：等待部署完成並取得網址
接下來就等待 GitHub Actions 自動完成部署流程。完成後，就可以看到我們的 WebVM 網址啦！
自訂檔案與預設函式庫 (選用)
如果你需要添加自訂的檔案或是預設安裝的函式庫，可以這樣做：
- 添加自訂檔案： 在 GitHub 頁面上，將檔案添加到
examples資料夾或是documents資料夾中。
- 添加預設函式庫： 修改
dockerfiles資料夾中的debian_mini檔案，將要預設安裝的函式庫添加到apt-get install指令中。
修改完成後，再重新回到 Actions 頁面執行一次部署 Workflow 即可。
注意： GitHub Pages 有 1GB 的最大網站大小上限，如果部署時選擇執行 debian_large Workflow，基本上會超出這個大小限制。所以在添加預設函式庫時，建議謹慎一些，不要添加太多東西。
總結
WebVM 真的是一個非常酷炫又實用的專案，它讓我們可以直接在瀏覽器上擁有一個 Linux 虛擬機環境，無論是學習 Linux 指令、進行教學用途都非常適合。
如果你也對 WebVM 感到有興趣，不妨 Fork 它的 GitHub 儲存庫，自己部署一個 WebVM 實例來玩玩看吧！