Docker .drone.yml 設定檔範例 將.drone.yml的檔案放在專案的根目錄下,這樣 drone 的伺服器接受到 GitHub、 Gitlab時,會去讀取專案底下的.drone.yml,才知道流程該怎麼走。 .drone.yml的設定範例: pipeline: build: image: node:latest commands: - npm install - npm run build deploy: image: tmaier/docker-compose:latest commands: - docker-compose up -d --build - docker rmi $(docker images --filter "dangling=true" -q --no-trunc)
Docker Nginx 反向代理 drone 的設定檔 server { listen 80; listen [::]:80; server_name drone.a-wei.tw; location / { proxy_set_header X-Forwarded-For $remote_addr; # 這些設定要記得加,不然資料帶不到裡面的伺服器 proxy_set_header X-Forwarded-Proto $scheme; # 這些設定要記得加,不然資料帶不到裡面的伺服器 proxy_pass http://127.0.0.1:3000; # 看 drone 服務在哪 } }
Docker GitHub 專案跑自動化測試與部署:drone 這邊直接使用 Docker 的方式建立 drone 的環境。 下方的設定檔是 docker-compose.yml 的範例: version: '2' services: drone-server: image: drone/drone:latest ports: - 3000:8000 # 外層的port:drone server 的 port - 9000:9000 volumes: - ./data:/var/lib/drone # drone 的資料庫 restart: always environment: - DRONE_OPEN=true - DRONE_HOST= {{}} # 實際對外的 HOST(
Language Nuxt.js SSR記憶體溢出 最近公司的產品在伺服器經常遇到當有大量的請求時,伺服器記憶體的使用量會急遽的往上提升。以正常的GC運作方式,理論上經過一段時間後,這些資源應該要立即收回,但卻發現並不是這一回事,導致伺服器經常當機。這個問題困擾了我們對於整個產品的後續維護,因此我開始著手進行問題排除,經過排除後有幾點想將它記錄下來,以免在花同樣的時間除錯。 禁止在伺服器寫下這些程式 setInterval and setTimeout 記住別在伺服器上寫下event loop,因為你沒有機會在任何地方可以取消它們,儘管你知道要取消,因為在Nuxt SSR的hook中,並沒有提供這樣的鉤子讓你解除。 在beforeMount之前所有的鉤子都會在Nuxt SSR執行,但很可惜的是之後所以的hook(destroyed)這類的,都不會在伺服器端執行,這意味著你只能做一次性的程式碼執行。 請確認插件是否必須在伺服器上運行 請確認你想要裝的插件是真的必須在伺服器做完在交給客戶端嗎?有些套件其實是可以交給客戶端自行處理的,比如像是bootstrap-vue,如果你將它放在伺服器端處理,這意味著它會在伺服器中運行,並且常駐在記憶體中。 必須確認arrow function是否有影響到global 請確保this不要指向到global,否則只要node的程式不關閉,你的程式碼將會常駐於記憶體中。
BEM modifier 寫 SCSS 子元素樣式的命名問題 使用 BEM 來命名 CSS Class 並且使用 SCSS 來編寫是一件多麼愉快的事情,這不僅能讓 CSS 模組化(複用行高)以外,甚至能更加語意化(乾淨的程式碼)。 BEM 的範例如下: <div class='menu'> <div class='menu__item menu__item--is-active'> <a href="#" class='menu__link'>John Doe</a> </div> </div>
Framework jQuery plugin Image-cover Introduction This plugin is for someone wanting <img/> tag having background cover effect. It can help you. Arguments Name Type Default Description Bg_Settings Object position: center center repeat: no-repeat size: cover attachment:scroll These settings are similar from CSS background(Optional) Method String Cover It’s
You have to understand Drupal Behaviors As a Drupaler, you may see a strange thing. Your Javascript doesn’t affect Drupal Ajax’ data when it’s triggered. This strange thing makes a lot of people confuse it. Drupal is very powerful CMS. Doesn’t it provide a solution to fix it? Yes,
初步認識 Drupal Behaviors 前言 作為 Drupal 前端開發者,想必曾發生過,在Drupal 的 Ajax 一旦觸發後,你所撰寫的 Javascript 會對動態的元素,起不了任何作用。 這麼強大的 Drupal 難道沒有辦法解決這個方法嗎? 其實是有的,Drupal Javascript API 提供了一個方法叫 Behaviors。接下來小編帶讀者們認識 Drupal Behaviors 的強大之處。 為何 Javascript 對動態元素會沒有任何作用,如對這有興趣可以參考這裡的簡單說明。 Drupal Behaviors 它有什麼樣的功能? 它是由 Drupal Javascript API 提供的一個功能,它有以下的作用: 1.提供後端的資料送到前端去使用,這能使得很多前端的特效功能的重複使用性大大提高了許多。 Floating block 模組 和 Sticky Navigation 模組 有使用過這兩個模組的人,
CMS Execute custom Javascript after Drupal load Ajax successfully Have you ever happened the custom Javascript that didn’t affect after load Drupal Ajax successfully? It is very confusing for all of the developers who are noobs in Drupal. But don’t worry about that. Here have three solutions that can be solved it. Drupal behavior It
CMS Drupal Ajax 執行後 Javascript 會沒反應 前言 當你在寫 Drupal 前台的 Javascript 時, 可能曾發生過當頁面有 Ajax 時,會導致你所撰寫的 Javascript code 會完全無效。會有這種情況,其實是因為當頁面部分元素被 Ajax 修改後,你所撰寫好的程式碼並不會動態的重新抓取更新過後的元素,這是一件令人頭痛的事啊。不過也別覺得這東西是無解,小編這裡有三個方法提供給各位,讓你們再也沒煩惱。 方法一:Drupal behavior 這是 Drupal 提供給前端開發者和模組開發者的 API 每當 Drupal Ajax 被執行後, 會把開發者所撰寫好的 Javascript 再重新讀取一次。如果你對這個東西很陌生的話,可以來參考這篇,他非常詳細的告訴你 behavior 的運作方式。 方法二: Jquery on() event function jQuery 在 1.7
Language Zen grid 2.0 基本用法 for drupal 前言 這是以drupal 為開發環境,使用zen grid 的 東西,寫下這篇是為了讓未來的我忘記時,能有東西可以參考,不想浪費太多時間~ Zen grid 基本 mixin 介紹 1. zen-grid-container() 這個mixin 就像是 bootstrap 或是 flexboxgrid 的 row 一樣的概念。 當你要宣告 columns 時,它們的父元素必須使用此 mixin。 如果你對 bootstrap 和 flexboxgrid 這些知名的css framework 不熟 , 其實你們可以去玩玩看,對你們會很有幫助。 2. zen-grid-item-base() 使用預設的 gutters 變數的值; 那預設的 gutter 值是從何而來呢?它來自 zen 的子版型裡有一個