在瀏覽器上開發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我們的項目。