在瀏覽器上開發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我們的專案，
至此我們的編程+編譯+Debug+打包環境都配置好了，我們可以隨時隨地撰寫我們的前后端分離專案了！（code-server的官方鏡像中包含git，可以使用git管理我們的代碼）
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/340301.html
標籤：Go
上一篇：陣列指標和二維陣列