TeamCity + Bitbucket + Vuejs + slack

準備：

1. bitbucket 帳號
2. docker hub 帳號

作法：

1. 在 docker 上跑 TeamCity
2. TeamCity 新增 project & connection
3. 新增 Agent
4. 開啟 auto-detect
5. 在 Vuejs Project 加入 Dockerfile & docker-compose + 設定
6. 先推上 dockerhub 再 deploy
7. tcWebHooks(Slack notification)

1. 在 docker 上跑 TeamCity

1. 到 jetbrains/teamcity-server 看說明
2. 找一個地方，建立 2 個資料夾，用來儲存 TeamCity 的 data & logs

docker run -itd --name teamcity-server-instance  \
    -v <你的data資料夾>:/data/teamcity_server/datadir \
    -v <你的logs資料夾>:/opt/teamcity/logs  \
    -p <TeamCity對外Port>:8111 \
    jetbrains/teamcity-server

3. 選擇 internal HSQLDB
注意 : 正式機請勿使用 internal，這種格式累積到 200MB 以上會`異常緩慢、資料遺失。
4. process -> Accept -> Create Account

2. TeamCity 新增 project & connection

artifact paths：publishing 到 外部，可直接 Web 下載

3. 新增 Agent

Agent 是來處理 build 的服務，agent 越多，越能並行多個 build jetbrains/teamcity-agent

docker run -itd -e SERVER_URL="http://你的Teamcity網址:Port" --privileged -e DOCKER_IN_DOCKER=start -v /var/run/docker.sock:/var/run/docker.sock -v 本地agent資料目錄:/data/teamcity_agent/conf jetbrains/teamcity-agent

4. 開啟 auto-detect & 設定

• 可選擇使用 auto-detect (但這邊不用此方式)

5. 在 Vuejs Project 加入 Dockerfile & docker-compose + 設定

1. 建立一個 vue 新專案 (已有專案請跳過)

$ npm install -g @vue/cli  #如果沒裝 vue-cli
$ vue create vue-citest
  -> default

$ vue run serve

2. 建立 bitbucket 並將 code 推上 repository (已有專案請跳過)
3. 新增 Dockerfile (官方文件)

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm i -S @vue/cli-service
RUN npm install --production
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4. 新增 docker-compose.yml

version: '3'

services:
 vuecitest:
  build:
    context: .
  restart: unless-stopped
  ports:
   - 80:80

5. Projects->Build->Edit Settings->Build Step:Command Line->Add build step->Command Line

6. 先推上 dockerhub 再 deploy

agent 端記得先用 docker login 登入。

• 作法一：可使用範本 Docker + Command Line
• Docker：選擇 push，並填寫 Image name:tag
•  作法二：直接用 Command Line

docker build --tag myname/vue-citest .;
docker push myname/vue-citest;
docker rmi myname/vue-citest;
docker-compose up -d; //需準備 yaml檔

7. tcWebHooks(Slack notification)

• Slack
1. 新增一個 Channel
2. 內容區最上方，「+Add an app」，安裝 incoming-webhook
3. app 內 -> view -> Settings -> Webhook URL
• TeamCity
1. administration -> Plugins List -> Browse plugins repository
2. 查詢 web Hook，安裝
• Web Hooks (tcWebHooks)
• Web Hooks REST API (tcWebHooks)
3. 看 WebHooks REST API 有無需要 fix plugin，點擊 & restart
4. Projects -> Project -> Build 選單 -> WebHooks -> Edit project WebHooks -> Click to create -> 貼上 Webhook URL
   

常見問題

• teamcity Unmet requirements: docker.server.version exists
• 重新安裝 docker

參考文件

• https://dotblogs.com.tw/stanley14/2018/05/28/jenkins_slack