# Jboss + API server + AngularJS integrate with Jenkins in Docker compose

這是我們目前整體的開發版系統架構圖

以下教學是基於 VAssistantDocker 在 bitbucket上的原始碼

## AngularJS deploy to Jboss

### 將Angular Distribution 丟到 Jboss的 wildfly web server

0. 修改vassitantWeb/src/index.html
把這行 `<base href="/">` 改成 `<base href=".">`
這個之後的change再修掉就好XD

1. 把初始的Angular原始碼下以下指令

    ng build

會看到dist長出來的結構如下圖：

2. 進入Jboss containter (以下二擇一)

MAC:

    bash -c "clear && docker exec -it jboss_Backend bash"

Windows git bash:

    docker exec -i jboss_Backend bash

3. 新增 testAngular 資料夾 (in jboss container)

    cd /opt/jboss/wildfly/
    mkdir testAngular

4. 修改 standalone.xml (in jboss container)

    vi /opt/jboss/wildfly/standalone/configuration/standalone.xml

修改下列部分成這樣
> 在default-host跟handler下面加，是參考[這裡](https://stackoverflow.com/a/34399062)
:::warning
記得存檔後要重開jboss
:::

5. 把剛剛build好的angular的檔案複製到 jboss container
:::info
由於還不曉得jboss container 的user密碼，先直接用docker cp 把dist的丟過去
最終目標應該是用jenkins的container透過指令丟過去
:::
確認自己在 vassistantWeb/dist/ 的資料夾內後, 下以下指令

    docker cp . jboss_Backend:/opt/jboss/wildfly/testAngular/ 

查看jboss container的`/opt/jboss/wildfly/testAngular/` 目錄應該會長這樣

6. 打開server <ip or domain name>:8080/testAngular/
就可以看到以下畫面，應該就表示完成了

## WildFly and Jenkins 容器資料夾共用

先前有提到 [Angular佈署在WildFly上](http://blog.lyt.tw/2018/01/web-service-angular-wildfly.html) 可以怎麼做的其中一個方法

假設我們在Jenkins Container(容器) 已經測試也Build好Angular的dist檔案
那要怎麼樣把檔案丟到WildFly的容器上呢?

如果使用檔案傳輸等方式會需要帳號密碼，會有安全性要考量
這個時候我們可以利用Docker內建的Volumes，掛載共同的資料夾
現在，我們已有兩個容器"jboss_Backend"與"jenkins"
在docker-compose.yml所在資料夾下
還有兩個資料夾 `jenkins/`跟`jboss-backend/`，裡面有各自的Dockerfile

首先，我們需要在我們docker-compose.yml做以下設定
(1). 最下方宣告掛載的Volumes名稱 e.g., web-dist-volume
　　要注意volumes跟service是同一個階層的
(2). 設定jboss-backend跟jenkins的掛載名稱與目錄名稱


接著，需要在jenkins資料夾下的Dockerfile加上下列幾行資訊
用root創建資料夾，比較不會遇到權限問題
最後一併把資料夾的擁有者給指定的使用者，e.g., jenkins
並且要記得切回使用者jenkins


完成之後，在該目錄下

docker build --force-rm -t jenkins/jenkins:ytTest .

force-rm 只是強迫移除掉原有的tag (如果有的話)
原有的image也不會消失，只是tag被拿掉
jenkins/jenkins是image name
ytTest則是tag

同樣的道理，我們在jboss-backend資料夾下的Dockerfile做類似的設定
只是這邊原有的Dockerfile就會把 ${JBOSS_HOME}下的目錄擁有者設成jboss
所以就不用特別調整


完成後，一樣要下

docker build --force-rm -t jboss/wildfly:ytTest .

　　
最後再到docker-compose.yml目錄下執行`docker-compose up`
這樣子，就能夠在兩者之間分享檔案啦！

## Jenkins x BitBucket x Angular x WildFly

上次有提到透過[Container檔案共用](http://blog.lyt.tw/2018/01/docker-container.html)，可以讓Jenkins Build好的檔案放到部署的資料夾

回顧先前提到的系統架構圖
現在，我們要先以Jenkins為中心
從BitBucket取得程式碼，Build Angular的程式碼，部署到WildFly上
雖然說是部署，但這Case其實就是複製到某資料夾而已

在說明開始前有以下假設：
1. 已經完成 [Angular佈署在WildFly上](http://blog.lyt.tw/2018/01/web-service-angular-wildfly.html)

    本來的 testAngular 這邊改成 angular-dist

2. 已經完成[Container檔案共用](http://blog.lyt.tw/2018/01/docker-container.html)

3. Jenkins已經安裝好預設的plugin 跟 **Nodejs Plugin**
Note: karma plugin 不在本次的說明範圍

大致有三大步驟：
I. 安裝Nodejs的運行版本
II. 設定到bitbucket的ssh key
III. Jenkins 組態設定Build and deploy

### I. 安裝Nodejs的運行版本

1. 到Jenkins首頁，點選管理Jenkins

2. 點選 Global Tool Configuration

3. 往下滑到NodeJS區塊，點選NodeJS安裝

4. 填寫Nodejs相關資訊
我們以 nodejs 8.9.3為例
名稱方便辨識即可(e.g., nodeJS 8.9.3)，Version就選擇 8.9.3
由於是Angular開發，我們要安裝 @angular/cli，也讓npm版本是最新的(5.5以前有bug)

### II. 設定到bitbucket的ssh key

5. 假設我們已經透過 Keygen 產生一組 `id_rsa`與`id_rsa.pub`
並且把他放到 jenkin容器下的 `/var/jenkins_home/.ssh/` 目錄
該目錄應該會長這樣 (known_hosts可以先忽略)

:::warning
Jenkins的預設設定，也是抓id_rsa與id_rsa.pub這兩個名稱，若不需要不建議更改
:::

6. 接著，到我們的BitBucket專案的設定裡面選取Access keys → Add Key

7. Label命名好之後，將`id_rsa.pub`貼在 Key的欄位並新增

### III. Jenkins 組態設定Build and deploy

8. 到jenkins首頁點選新增作業

9. 命名並選取建置Free-Style專案

10. 在原始碼管理把我們要建置的專案URL `[e-mail]:OOOOO/XXXXX.git`
填在 Repository URL並新增 Credential Key

11. Credentials 設定
Kind我們選擇 **SSH Username with private key**
Username填寫好後
Private Key我們選擇From the Jenkins master ~/.ssh
密碼如果沒有沒設就不用，其他也暫時可以不用設定
:::info
由於未來要自動化考量，傾向把那組Key放在 `/var/jenkins_home/.ssh/` 裡
這樣之後BitBucket才不需要一直新增新的Access Key
:::

12. 建置環境與建置設定
建置環境選取Provide Node & npm bin/ folder to PATH
版本就選取NodeJS 8.9.3
建置選擇 shell
在下方輸入

    npm install 
    ng build
    cp dist/* /angular-dist/ #看你們佈署在哪個目錄下


13. 如果建置成功，我們就可以看到首頁了~

#### Docker 相關補充

進入 docker container

#以預設身份登入
bash -c "clear && docker exec -it jenkins bash"
#已指定身份登入 (e.g., root)
bash -c "clear && docker exec -u root -it jenkins bash"