千萬不要在docker中用phantomjs來截圖

Dec 12, 2017

工作上需要一個臨時的排行榜，本來是要人手每天更新

但想到了一個很HACK的作法:

運行一個webserver，利用html + css製作一個臨時的排行榜之後運行phantomjs製作一張螢幕截圖，再把圖片upload上s3並更新服務器位址

之前有用過phantomjs製作截圖，覺得整體上可行性甚高亦因此開始了痛苦的踩坑之旅…

實作

在mac環境下很快就把程序寫好，簡單的nodejs+aws-sdk+phantomjs 滿心歡喜的準備把它dockerize，然後惡夢就來了

問暝一. 權限

首先出現的是docker安裝不了phantomjs 本身用的是node-alphine的image，用npm安裝的phantomjs binary路徑會出錯而用phantomjs-prebuilt的話則權限會出現問題https://github.com/Medium/phantomjs/issues/707

搞了半天最後屈服，直接用ubuntu的base image再安裝nodejs + phantomjs就算了

FROM ubuntu:trusty

# PhantomJS
RUN apt-get install -y libfreetype6 libfontconfig
RUN apt-get install -y wget
RUN wget -q https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
RUN tar xjf phantomjs-2.1.1-linux-x86_64.tar.bz2
RUN install -t /usr/local/bin phantomjs-2.1.1-linux-x86_64/bin/phantomjs
RUN rm -rf phantomjs-2.1.1-linux-x86_64
RUN rm phantomjs-2.1.1-linux-x86_64.tar.bz2

好了終於跑起來沒問題了，圖片亦都成功upload到s3…… 咦，圖片好像有點不對勁圖片上的中文全部變成空格了!!

問題二. 中文字

ubuntu的image本身就沒中文字型所以要把字型都安裝一下(也要挑個好看的字型 … )

# install chinese fonts for ubuntu
RUN echo "deb http://gce\_debian\_mirror.storage.googleapis.com wheezy contrib non-free" >> /etc/apt/sources.list \
  && echo "deb http://gce\_debian\_mirror.storage.googleapis.com wheezy-updates contrib non-free" >> /etc/apt/sources.list \
  && echo "deb http://security.debian.org/ wheezy/updates contrib non-free" >> /etc/apt/sources.list
RUN apt-get update

RUN echo ttf-mscorefonts-installer msttcorefonts/accepted-mscorefonts-eula \
    select true | debconf-set-selections

RUN apt-get install -y language-pack-zh-hant && \
    apt-get install -y --force-yes ttf-mscorefonts-installer

RUN apt-get install fonts-cwtex-heib
#fonts-cwtex-kai fonts-cwtex-docs fonts-cwtex-ming

# Renew the font cache
RUN apt-get install -y fontconfig
RUN fc-cache -fv

跑起來沒問題，給美術看下效果圖她第一個反應是英文的字體為什麼這樣難看…

問題三. 英文字型

好吧　因為mac上用的是Helvetica.. ubuntu上當然沒有啦加進去就好

RUN mkdir -p /usr/share/fonts/truetype/helvetica
COPY ./helvetica /usr/share/fonts/truetype/helvetica

# Renew the font cache
RUN apt-get install -y fontconfig
RUN fc-cache -fv

這次應該再沒問題吧……　抱歉，名字是有emoji的

問題四. emoji支援

好吧.. 其實ubuntu 也有 support emoji 的!

# Add emoji support
RUN add-apt-repository ppa:eosrei/fonts
RUN apt update && sudo apt install -y fonts-emojione-svginot

但這次跑是跑起來，emoji也有，但竟然他X的是空心的！

問題五. emoji字型

ubuntu版的emoji font 只有用firefox (或者Gecko-based browser)才會有顏色而phantomjs是用webkit作為底層的，所以看到的emoji只有外框

夠了，我放棄

最後也懶得再找phantomjs 的替代品(好吧其實是有的https://slimerjs.org/) 只好不deploy，直接在本機上跑就是了(反正是HACK我不管)

結論

如果你是用phatomjs來跑一些測試的話其實在docker上也沒有很多問題但這次的CASE比較特別，要在ubuntu上面跑phantomjs來截圖出來的效果當然跟MAC/PC上的差很遠所以要有emoji/中文support的話真的要三思