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
  3. 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
    
  4. 選擇 internal HSQLDB
  5. 注意 : 正式機請勿使用 internal,這種格式累積到 200MB 以上會`異常緩慢、資料遺失
  6. 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 新專案 (已有專案請跳過)
  2. $ npm install -g @vue/cli  #如果沒裝 vue-cli
    $ vue create vue-citest
      -> default
    
    $ vue run serve
    
  3. 建立 bitbucket 並將 code 推上 repository (已有專案請跳過)
  4. 新增 Dockerfile (官方文件)
  5. # 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;"]
    
  6. 新增 docker-compose.yml
  7. version: '3'
    
    services:
     vuecitest:
      build:
        context: .
      restart: unless-stopped
      ports:
       - 80:80
    
  8. 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

參考文件


TeamCity + Bitbucket + Vuejs + slack TeamCity + Bitbucket + Vuejs + slack Reviewed by Wild on 11/04/2019 04:33:00 下午 Rating: 5

沒有留言:

沒有Google帳號也可發表意見唷!

技術提供:Blogger.