在Centos上安裝phantomjs的過程

時間 2019-12-09

原文原文鏈接

本文首發於於個人博客，可做爲 prerender-spa-plugin 預渲染失敗的參考javascript

想着在年前把博客更新升級一下，因而順手修復了一些已知的BUG，優化了留言模塊，升級了nginx，更是爲了利於SEO，在webpack的編譯中加入了prerender-spa-plugin預渲染模塊。經本地window主機測試後，一切OK。這便着手在線上Linux主機中配置，nginx, node, mongod 等的升級一切順利，但就是在項目中 npm install 的時候卡住了，並且這一卡就是一天多！難道是我安裝姿式不對，須要起來重睡？查看npm報錯緣由，就出如今本文的主角phantomjs上。關於phantomjs，不管是在以前的項目中寫單元測試，錄製UIrecorder測試用例時都遇到過，但僅僅也是遇到而已，只覺得僅僅是一個依賴模塊，照着文檔npm install一下，對其甚至連基本的瞭解都沒有，因而問題就出現了。html

遇到的問題

EPERM or operation not permitted or permission denied

在項目中執行npm install 安裝依賴時，發生以下錯誤：前端

#...
Removing /XXX/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract-1496325965675/phantomjs-2.1.1-linux-x86_64 -> 
/XXX/node_modules/phantomjs-prebuilt/lib/phantom
Phantom installation failed { Error: EACCES: permission denied, link '/tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract-1496325965675/phantomjs-2.1.1-linux-x86_64' -> '/XXX/node_modules/phantomjs-prebuilt/lib/phantom'
    at Error (native)
  errno: -13,
  code: 'EACCES',
  syscall: 'link',
  path: '/tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract-1496325965675/phantomjs-2.1.1-linux-x86_64',
  dest: '/XXX/node_modules/phantomjs-prebuilt/lib/phantom' } Error: EACCES: permission denied, link '/tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract-1496325965675/phantomjs-2.1.1-linux-x86_64' -> '/XXX/node_modules/phantomjs-prebuilt/lib/phantom'
    at Error (native)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! phantomjs-prebuilt@2.1.14 install: `node install.js`
npm ERR! Exit status 1
#...

權限問題？瞅了眼終端，root啊，懵逼了~因而去查看官方文檔，在文檔中有以下描述：java

You don't have write access to the installation directory.
The permissions in the NPM cache got messed up, and you need to run npm cache clean to fix them.
You have over-zealous anti-virus software installed, and it's blocking file system writes.

我沒有執行權限？搞笑了，雖然linux我是個渣渣，可是root用戶我想應該和我理解的沒有區別吧~; 用 npm clean 來修復 npm緩存權限，這個應該有可能，照着執行 npm clean --force後繼續 npm install，問題依舊；
谷歌後發現這個問題很廣泛，也在https://github.com/Medium/phantomjs/issues/707這裏找到了解決方式，在命令後面加參數 --unsafe-perm 就好了，因而 rm -rf ./node_modules 後再次執行 npm install --unsafe-perm, 此次除了一些警告外，算是安裝成功了。接着執行 npm run build，因而第二個問題來了。node

compile-to-html.js:82

/XXX/node_modules/prerender-spa-plugin/lib/compile-to-html.js:82
      if (error) throw stdout
                ^
error Command failed with exit code 1.

這個問題以前有遇到過，是prerender-spa-plugin預渲染過程當中出錯了。覺得是本身代碼中有什麼問題，仔仔細細的檢查了打包模塊，沒有問題，又在開發環境(Windows)中打包重試，仍是沒有問題。那麼問題就仍是出在phantomjs上了，由於prerender-spa-plugin是依賴phantomjs的。linux

也就是說問題仍是沒有解決，只能繼續谷歌，繼續嘗試，繼續失敗~webpack

`phantomjs` 是什麼？

不懂就問！nginx

PhantomJS是一個基於WebKit的服務器端JavaScript API，它基於 BSD開源協議發佈。PhantomJS無需瀏覽器的支持便可實現對Web的支持，且原生支持各類Web標準，如DOM 處理、JavaScript、CSS選擇器、JSON、Canvas和可縮放矢量圖形SVG。

`phantomjs` 的使用場景

Mocha,UIrecorder等無需瀏覽器的狀況下進行快速測試 (這個有使用瞭解)
頁面自動化操做：使用標準的DOM API或一些JavaScript框架（如jQuery）訪問和操做Web頁面。
屏幕捕獲：以編程方式抓起CSS、SVG和Canvas等頁面內容，便可實現網絡爬蟲應用。構建服務端Web圖形應用，如截圖服務、矢量光柵圖應用。
網絡監控：自動進行網絡性能監控、跟蹤頁面加載狀況以及將相關監控的信息以標準的HAR格式導出。

簡單能夠總結爲一個<mark>很牛逼的虛擬瀏覽器</mark>？git

很遺憾，上面的使用場景，只有第一條 "Mocha,UIrecorder等無需瀏覽器的狀況下進行快速測試" 中咱們有過嘗試，並且項目 UIrecorder 的測試用例在linux中的自動化運行依然沒有解決，難道仍是和phantomjs有關係？github

如何解決的？

嘗試到大半夜，玩了玩跳一跳後，靈感來了。能夠先在系統中全局預安裝phantomjs做爲系統服務啊。如下命令執行後真的成功了，喜極而泣~

#...
#下載
wget https://npm.taobao.org/mirrors/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
#加入環境變量
vim /etc/profile
#末尾加入
export PATH=$PATH:/usr/local/phantomjs-2.1.1-linux-x86_64/bin
source /etc/profile

回到項目目錄後， rm -rf ./node_modules 後再次執行 npm install --unsafe-perm :

rm -rf ./node_modules
npm install --unsafe-perm
npm run build

哈哈哈，終於看到了我熟悉的結果：

總結

以上即是此次升級中遇到的最大問題，最終也只是以 知其結果而不知其因此然 的方式解決了問題。
在之後的學習道路上，應該對package的依賴包有所瞭解，至少應該去瀏覽下其文檔，瞭解其用處。對linux知識也要更深刻的學習，不要由於前端的職位而只是膚淺的將知識層面停留在大學時的課本上；對前端的自動化知識（包括測試）也要跟上步伐，說不定哪天就解決了項目中在Linux上自動跑UIrecorder測試用例的遺留問題。