docker深入2-UI之portainer的本地構建

2017/9/26

一、準備環境
依賴：Docker, Node.js >= 0.8.4 和 npm

~] curl --silent --location https://rpm.nodesource.com/setup_7.x | sudo bash -
~] yum install -y nodejs
~] npm install -g grunt-cli

二、構建
1、checkout
~] git clone https://github.com/portainer/portainer.git
~] cd portainer

2、使用 npm 安裝依賴包
~] npm install -g bower && npm install

3、根目錄沒有這個目錄： bower_components 的話則執行
~] bower install --allow-root


4、針對 centos 執行
~] ln -s /usr/bin/sha1sum /usr/bin/shasum


5、構建 app
~] grunt build

如果遇到這樣的錯誤：
Building portainer for linux-amd64
/go/src/github.com/portainer/portainer/crypto/crypto.go:4:2: cannot find package "golang.org/x/crypto/bcrypt" in any of:
	/usr/local/go/src/golang.org/x/crypto/bcrypt (from $GOROOT)
	/go/src/golang.org/x/crypto/bcrypt (from $GOPATH)
/go/src/github.com/portainer/portainer/http/handler/websocket.go:21:2: cannot find package "golang.org/x/net/websocket" in any of:
	/usr/local/go/src/golang.org/x/net/websocket (from $GOROOT)
	/go/src/golang.org/x/net/websocket (from $GOPATH)
mv: cannot stat ‘api/cmd/portainer/portainer-linux-amd64’: No such file or directory
Warning: Command failed: build/build_in_container.sh linux amd64
mv: cannot stat ‘api/cmd/portainer/portainer-linux-amd64’: No such file or directory
 Use --force to continue.

Aborted due to warnings.

那是因為網絡可達性問題，國內訪問 golang.org 異常。
~]# host golang.org
golang.org is an alias for golang-consa.l.google.com.
golang-consa.l.google.com has address 216.239.37.1


導致這2個依賴下載失敗：
golang.org/x/crypto/bcrypt
golang.org/x/net/websocket


解決方法：
~] go get github.com/golang/crypto/tree/master/bcrypt
~] go get github.com/golang/net/tree/master/websocket

~] cd $GOPATH/src
~] mkdir golang.org/x -p
~] mv github.com/golang/* golang.org/x/


然後再切換到源碼目錄，調整構建腳本： 

~] vim build/build_in_container.sh
掛載本地的 $GOPATH/src/golang.org 到容器路徑：/go/src/golang.org

docker run --rm -tv $(pwd)/api:/src -e BUILD_GOOS="$1" -e BUILD_GOARCH="$2" portainer/golang-builder:cross-platform /src/cmd/portainer

調整為：

docker run --rm -tv $(pwd)/api:/src -v $GOPATH/src/golang.org:/go/src/golang.org -e BUILD_GOOS="$1" -e BUILD_GOARCH="$2" portainer/golang-builder:cross-platform /src/cmd/portainer


最後重新構建一次：
~] grunt build
（略）
Cleaning "dist/js/angular.37dfac18.js"...OK
Cleaning "dist/js/portainer.cab56db9.js"...OK
Cleaning "dist/js/vendor.4edc9b0f.js"...OK
Cleaning "dist/css/portainer.e7f7fdaa.css"...OK

Done, without errors.


看到上述輸出，表示符合預期。




6、運行（可以自動重啟）
~] grunt run-dev

訪問 UI 地址： http://localhost:9000

有一個問題，如果是使用的本機的 docker 服務，要傳遞 -H unix:///var/run/docker.sock 參數進去，怎麽辦？

~]# vim gruntfile.js 
找到：

          ‘docker run -d -p 9000:9000 -v $(pwd)/dist:/app -v /tmp/portainer:/data -v /var/run/docker.sock:/var/run/docker.sock:z --name portainer portainer/base /app/portainer-linux-am
d64 --no-analytics -a /app‘

調整為：

          ‘docker run -d -p 9000:9000 -v $(pwd)/dist:/app -v /tmp/portainer:/data -v /var/run/docker.sock:/var/run/docker.sock:z --name portainer portainer/base /app/portainer-linux-am
d64 --no-analytics -a /app -H unix:///var/run/docker.sock‘




7、不要忘記 lint 代碼
~] grunt lint



三、開發需求示例
可結合 github 的搜索功能來查找關鍵字。

1、需求：頁面-容器列表：設置復選框，默認不顯示所有容器
註1：從 1.14.1 版本開始使用 cookie 來記錄是否顯示所有的狀態（Persist the status of the show all containers filter: #1198），其實完全可以不更改代碼，去掉 checkbox 的選擇後，下次登錄還是 unchecked 的狀態，本例僅作為修改代碼的一個 howto 來展示。
註2：從 1.14.1 版本開始，新增了針對資源的限制（Add the ability to manage CPU/MEM limits & reservations for Swarm services: #516），不妨一試。
https://github.com/portainer/portainer/releases



目的：調整 filter_containerShowAll 的默認值為 false 來達到初始化的目的。

~] vim app/services/localStorage.js
53c53
<         filter = false;
---
>         filter = true;



2、需求：頁面-服務列表-服務-任務列表：過濾器

目的：調整 tasks 頁面，增加一個 filter
~] vim app/components/service/includes/tasks.html
15,19d14
<     <rd-widget-taskbar classes="col-lg-12">
<       <div class="pull-right">
<         <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
<       </div>
<     </rd-widget-taskbar>
56c51
<         <tr dir-paginate="task in (filteredTasks = ( tasks | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
---
>         <tr dir-paginate="task in (filteredTasks = ( tasks | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">

    




ZYXW、參考
1、doc
https://portainer.readthedocs.io/en/latest/contribute.html
2、國內下載golang.org的包有什麽好辦法麽？
https://gocn.io/question/362

docker深入2-UI之portainer的本地構建