文章目錄
前言
相信大家在調查使用開源項目時特別是比較複雜的開源項目，由於項目的歷史性進展問題，很可能項目中會用到前端非常多的框架，插件，腳本等，此時僅僅在本地開發環境搭建一套開發環境可能要花費幾周的時間，意志不堅定者很可能中途會放棄，也有可能費了九牛之力可算將開源環境整起來，卻發現自己本地的項目開發環境整崩了！本篇博文向大家介紹用docker搭建複雜開源項目的開發環境環境的，這裏用到的開源項目是 tuleap
https://docs.tuleap.org/
該項目提供發佈的完整docker 鏡像 docker pull enalean/tuleap-aio
該項目的git-hub地址：https://github.com/Enalean/tuleap
我們要完成的任務：
- 下載安裝docker；
- 構建docker基礎開發鏡像安裝node開發環境；
- github上拉取開源項目tuleap源碼；
- 用本地源碼路徑掛載基礎開發環境 docker 容器；
- 拉取官方tuleap docker鏡像, 安裝鏡像啓動lueap項目；
- 將本地github tuleap項目源碼掛載本地源碼路徑，用docker基礎開發環境安裝運行tuleap項目。
- 修改本地源碼，用docker基礎開發環境編譯打包。
- 將打包的源碼複製到tuleap官方提供的docker鏡像容器中，啓動項目查看修改結果
由於本篇博文注重實際操作,以及lueap源碼的編譯打包，對於docker相關原理不做詳細說明，部分命令含義可以相見docker基礎教程；
二.mac上安裝docker
1.下載docker安裝包
下載地址：edge
2.配置docker鏡像加速器
由於你懂的原因爲了使docker在後期拉取鏡像速度，必須配置鏡像加速
此處我們選擇阿里雲的docker鏡像加速器，你只需免費註冊即可
在已安裝好的docker -->perfrence—>Docker Egine
3.檢查安、裝配置結果
控制檯輸入命令：docker info
即可證明安裝配置成功。
二.構建docker基礎開發環境node鏡像
由於tuleap 的源碼packege中已經集成了開發編譯環境的相關依賴，我們只需要構建node基礎環境
1.編寫dockerfile文件
新建空的開發目錄 app-data 在開發目錄下新建dockerfile文件
FROM node:13
RUN npm set registry https://registry.npm.taobao.org/
WORKDIR /app-data
2.通過dockerfile文件創建docker鏡像
控制檯切換到上一步新建的工程根目錄下執行：docker build -t app-data:v1 .
千萬注意後面的黑點 一定要帶上
完成後查看鏡像：docker images
三.github上拉取開源項目tuleap源碼
tuleap源碼地址： https://github.com/Enalean/tuleap
拉取完本地目錄結構：
注意： 原則上從github上拉取下來的源碼，安裝之後，是可以正常編譯打包的。但是由於該項目的特殊性大多數情況下是無法編譯運行的，感興趣可以看看其前端的源碼框架非常多邏輯及其複雜。
四. 用本地源碼路徑掛載基礎開發環境 docker 容器
這一步是我們要構建docker開發環境的核心，其本質目的就是用本地的源碼在docker容器的開發編譯環境下打包，以便於在本地修改源碼的驗證。
命令： docker run -it -v /Users/guocongcong/Desktop/caowenbo/tuleap-master:/app-data app-data:v1 bash
五.拉取tuleap docker鏡像運行lueap項目
1.拉取tuleap docke鏡像
命令： docker pull enalean/tuleap-aio:centos7
檢查鏡像：docker images
2.運行該鏡像
運行該鏡像：docker run -it -e VIRTUAL_HOST="localhost" -p 80:80 -p 443:443 enalean/tuleap-aio:centos7
驗證：瀏覽器輸入：https://localhost/
3.設置tuleap 超級用戶賬戶
docker控制檯進入上步所運行的容器內：docker exec -it 7dea1b26e963 bash
注意查看 ID：docker ps 拿到容器id進入哦
執行密碼生成命令： cat /data/root/.tuleap_passwd
4.用超級賬戶登陸
用戶名：admin
密碼：【粘貼上步生成的密碼】
進入：
4.安裝tuleap需要的插件
本次演示Agile Dashboard插件的安裝，頁面操作。
六.將本地github tuleap項目源碼掛載本地源碼路徑，用docker基礎開發環境安裝運行tuleap項目。
本地從github上當下來的源碼，將源碼路徑掛載到docker 基礎開發環境容器中，進行安裝運行打包。
1.掛載本地路徑
掛載本地源碼路徑命令：docker run -it -v /Users/guocongcong/Desktop/caowenbo/tuleap-master:/app-data app-data:v1 bash
本地路徑：/Users/guocongcong/Desktop/caowenbo/tuleap-master
tag：:/app-data
掛載到docker的開發環境容器名稱： app-data:v1
2.安裝tuleap開發環境依賴
npm install
七.修改本地源碼，docker基礎開發環境編譯打包
1.修改本地tuleap源碼
本次演示我們修改AgileDashboard 插件中的源碼
打斷點，輸出log
2.dokcer容器 data-app:v1中編譯出打包文件
此處就是常用的項目腳本命令
npm run build
注意：主項目和插件項目要分別安裝
打包成功後看到打包文件：
八.將打包的源碼複製到tuleap官方提供的docker鏡像容器中，啓動項目查看修改結果
1.拷貝本地打包出來的文件到docker容器中
命令：docker cp /Users/guocongcong/Desktop/caowenbo/tuleap-master/src/www/assets/agiledashboard/ 2d309337215f:/usr/share/tuleap/src/www/assets
詳解： 拷貝命令：docker cp
本地路徑：/Users/guocongcong/Desktop/caowenbo/tuleap-master/src/www/assets/agiledashboard/
tuleap官方鏡像容器id：2d309337215f:
tuleap官方鏡像容器對應的打包文件替換路徑：/usr/share/tuleap/src/www/assets
2.檢查是否拷貝成功
進入容器：docker exec -it 2d309337215f /bin/bash
進入對應目錄：cd /usr/share/tuleap/src/www/assets/agiledashboard
注意拷貝工程中一定要使docker目標容器是啓動着的狀態