在瀏覽器上開發GO和Vue！(基於code-server)
在瀏覽器上開發GO和Vue！(基於code-server)
曾幾何時，開發者們都被安裝程式設計環境苦惱，儘管現在很多語言的開發環境已經不難裝了，但是如果我們能有一個執行在雲端的編譯器，那麼我們就可以隨時隨地通過瀏覽器編寫、編譯我們的程式碼啦！！
先看我們最終效果：
完美執行Go程式！下面開始整個環境搭建。
打包好的映象
配置完成的Go+Vue的編譯+Debug環境Docker映象已推送到Docker倉庫中，如果懶得自己跟著配的可以直接拉我的映象跑起來！
映象是基於code-server官方映象，具體執行方式看下方code-server部分。
預備條件
1.一臺雲伺服器（最低配就ok！）下文統一稱為宿主機。
2.一雙手...有手就行
code-server
code-server是VS Code的網頁版本，是一個社群開發的開源專案。
專案地址：https://github.com/cdr/code-server
文件地址：https://coder.com/docs/code-server/latest
我們本次使用Docker來將我們的環境部署在Docker映象中（具體Docker環境的安裝請自行查詢資料）。
1.查詢code-server映象
我們在宿主機命令列輸入：
docker search code-server
2.拉取映象
可以看到第一個就是code-server官方的映象codercom/code-server，我們將它pull到本地：
docker pull codercom/code-server
3.啟動容器
接下來，我們需要啟動這個映象：
docker run -d -u root -p 5000:8080 -p 5001:5001 --name my-code-server -v /home/code:/home/code codercom/code-server
-d：後臺執行
-u：指定使用者名稱
-p：指定埠對映，code-server跑在容器內的8080埠，我們需要將8080埠對映到我們宿主機的一個埠，我這裡設定為5000。這裡預留一個5001埠映射出來，為後續開發vue程式做準備。
--name：我們可以設定我們的容器名為my-code-server
-v：我們需要為我們的容器與宿主機設定資料卷對映（即為容器與宿主機共享的檔案位置），設定資料卷對映的好處有：①當我們的容器被刪除的之後，我們的專案檔案會儲存在宿主機上，保證不會丟失②每次啟動新容器都可以直接拿到相應的專案檔案繼續開發。
4.進入容器
此時，我們已經可以通過瀏覽器訪問我們的code-server了，使用 宿主機IP:5000訪問（宿主機也就是雲伺服器記得在防火牆中將5000和5001埠暴露出來）我們可以看到這個介面：
我們需要進入到容器中的 提示中的位置檢視隨機生成的密碼 輸入進去，就可以進入我們code-server介面。
進入容器中：
docker exec -it my-code-server /bin/bash
5.修改code-server密碼
可以通過~/.config/code-server/config.yaml檔案看到隨機生成的密碼很長，我們不可能一直記住，那麼我們只需要修改這個密碼再重啟我們的容器就ok了。
我比較習慣用vim編輯器，但是在code-server的官方映象中沒有安裝vim，所以我們需要自行安裝。
①由於這個映象的基礎系統映象是Debian，所以我們可以用：
apt-get install vim
②但是我們會發現是失敗的，這是由於我們apt-get的包比較老，我們只需要執行apt-get update更新包庫再安裝vim即可。
③使用vim修改~/.config/code-server/config.yaml檔案中的password欄位的值儲存退出即可完成修改密碼。
④我們輸入exit指令退出容器，然後我們重啟容器，使我們修改的密碼生效：
docker restart my-code-server
6.使用自己的密碼登入
重新整理介面，就可以用自己的密碼登入code-server了！
Go環境
接下來我們將在我們的容器內安裝Go語言環境，然後就可以在code-server中編寫Go程式了。
1.下載Go安裝包
我們可以通過linux的wget工具下載Go安裝包
①首先老辦法，通過apt-get install wget獲取wget工具
②通過wget工具下載安裝包：
wget https://studygolang.com/dl/golang/go1.17.2.linux-amd64.tar.gz
③將當前下載的安裝包解壓到/usr/local資料夾下，這是Go官方推薦的安裝位置。
tar -C /usr/local -zxvf go1.17.2.linux-amd64.tar.gz
2.設定環境變數
上面我們已經將Go環境安裝好了，如果我們要在命令列使用，就要設定環境變數
我們通過vim修改/etc/profile檔案，在最下面加兩行
export GOROOT=/usr/local/go
export PATH=$PATH:$GOROOT/bin
儲存退出後，使用source命令重新整理環境變數
source /etc/profile
此時，我們的環境變數已經設定好了，可以使用go version命令檢視Go語言版本號。
3.命令列自重新整理環境變數
當我們設定環境變數後，我們到code-server中的內建bash命令列中使用go命令還是無效的，這裡我查到解決方案是我們需要配置在~/.bashrc
我們使用vim在~/.bashrc的最後兩行寫入：
source /etc/profile
儲存退出，這裡我們需要重啟容器。
容器重啟後，我們就可以在任何地方使用go命令了。
4.安裝Go擴充套件包
我們像在VS Code中一樣，在code-server中安裝Go擴充套件包
5.設定Go依賴庫的國內映象
我們在命令列中鍵入：
go env -w GO111MODULE=on
go env -w GOPROXY=https://goproxy.cn,direct
6.安裝Go語言的工具包
①先重新整理我們的code-server介面
②在code-server中使用 Ctrl+Shift+P 快捷鍵
③在彈出的輸入框內輸入go，找到 Go:Install/Update Tools，選中
④將所有的Tools選中，然後確定，等待安裝成功
7.新建一個go程式
至此，我們的Go環境就安裝好了，我們新建一個go程式可以發現，智慧提示也都在了，跟在本地使用VS Code寫程式碼沒什麼兩樣~
Vue環境
由於博主不是專業的前端開發，Vue也只知道一些皮毛，故只知道執行Vue程式需要npm依賴管理，所以我們可以先安裝npm包管理工具（更復雜的Vue環境，也就是正常的Linux環境配置就好，智慧提示可以使用code-server的自己喜歡的擴充套件包）
apt-get install npm
安裝完成後，我們就可以開啟Vue的腳手架專案執行
npm install
及
npm run serve
跑一個簡單的Vue專案了。
PS：
記得我們在開頭留下的5001埠暴露到宿主機，所以我們在Vue專案的執行埠就可以設定成5001這樣只要我們使用http://localhost:5001將Vue專案的Debug模式執行起來，我們就可以在瀏覽器中使用宿主機IP:5001的方式Debug我們的專案。