Web Service 協同開發 - Angular 部署於 WildFly

這是我們預想中的網路服務主要元件架構圖

後端主要由 WildFly (前身為JBoss) + MariaDB，提供一些API Service
前端為AngularJS，主要讓前端使用者使用
中間的Jenkins主要是拿來做自動化測試與部署用的
Source Code則是放在Bitbucket

為了讓開發中也可以使用，也不需讓開發者自行建設這些服務
就使用Docker Compose組起來，這個配置我們等最後都串好全部的流程了再談
也有很多東西要解決跟討論的，但我們先將焦點放在我們的應用情境上

理想狀態是上了一個Change之後
Bitbucket就會送一個Webhook到Jenkins Server
接著，Jenkins就會依照我們的設定進行

但是我們現在只有一台可以對外的Production Server
Angular就得放到WildFly上面跑
所以我們得先了解，如何讓Angular的Dist folder全部放到WildFly上
再寫成Shell Script透過Jenkins自動化部署過去

以下的操作是以2018/1/1的Angular install為範例
也假設我們已經部署好了Docker
已經跑起來了名為jboss_Backend的container

修改<ANGULAR-ROOT-FOLDER>/src/index.html
把這行 <base href="/"> 改成 <base href=".">
把初始的Angular原始碼下以下指令
```
ng build
```
會看到dist長出來的結構如下圖：

進入 jboss_Backend containter (以下二擇一)

MAC:

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

Windows git bash:

docker exec -i jboss_Backend bash

新增 testAngular 資料夾 (in jboss_Backend container)
```
cd /opt/jboss/wildfly/
mkdir testAngular
```
修改 standalone.xml (in jboss_Backend container)
```
vi /opt/jboss/wildfly/standalone/configuration/standalone.xml
```
修改下列部分成這樣

在default-host跟handler下面加，是參考這裡

記得存檔後要重開jboss_Backend
把剛剛build好的angular的檔案複製到 jboss_Backend container

由於還不曉得jboss container 的user密碼或是有其他好的方式
先直接用docker cp 把dist的丟過去
最終目標應該是用jenkins的container透過指令丟過去

確認自己在 <ANGULAR-ROOT-FOLDER>/dist/ 的資料夾內後, 下以下指令
```
docker cp . jboss_Backend:/opt/jboss/wildfly/testAngular/ 
```
查看jboss container的/opt/jboss/wildfly/testAngular/ 目錄應該會長這樣
打開server <ip or domain name>:8080/testAngular/
就可以看到以下畫面，應該就表示完成了

Hamster Lin