Electron – Cannot find module ‘app’

最近將舊版的 electron 升級到最新版, 結果所有程式都不能啟動了, 全部回傳 Error: Cannot find module 'app', 在翻閱新版手冊發找到了解決辦法

問題

升級到新版 Electron 出現 Error: Cannot find module 'app'

成因

Electron 新版將 app 模組整合到 electron 內

解決辦法

舊版手冊的範例寫法如下

var app = require('app');
var BrowserWindow = require('browser-window'); 

由於 app 被整合到 electron 內了, 因此只要改寫成下方的寫法就可以正常運作了

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

Electron – Uncaught ReferenceError: $ is not defined

最近因為需要將新的 Web App 封裝成應用程式, 團隊決定使用 Github Electron 進行封裝, 但封裝後的程式無法運作, 本來以為是 VUE 造成的, 直到在 Console 看到了 Uncaught ReferenceError: $ is not defined 才確定是 jQuery 造成的, 但說也奇怪, VUE 正常而 jQuery 卻沒辦法註冊, 粗略看起來應該不是 js 沒有載入的問題, 經過幾番研究後確定了問題成因, 這邊做一個小筆記紀錄一下.

問題

Electron 出現 Uncaught ReferenceError: $ is not defined 錯誤

成因

Electron 的 Render 使用了 Nodejs, 並且掛入 require 到全域變數, 導致 jQuery 註冊的 $ 被覆蓋了

解決辦法

jQuery 實際上是有正確被載入的, 因此我們只需要透過下面的方法重新註冊 $ 就可以了

try {$ = jQuery = module.exports;} catch(e) {}

如此一來, jQuery 重新綁定回 $, 系統就可以正常運作了

Apache .htaccess 沒有效果

我們知道在 Apache 中可以使用 .htaccess 來針對當下目錄做相關設定, 但時常發生 .htaccess 無效的狀況, 這邊分享一下一些常見的原因與排除方法

沒有複寫權限

Apache 根目錄預設是禁止複寫設定的, 可以透過編輯 httpd.conf 當中的設定開啟複寫功能

編輯 httpd.conf

sudo vim /etc/apache/httpd.conf

找到相關目錄設定(這邊以內建路徑為例)

<Directory "/Library/WebServer/Documents">
    Options FollowSymLinks Multiviews
    MultiviewsMatch Any

        AllowOverride None

        Require all granted
</Directory>

將 AllowOverride 修改為 All

<Directory "/Library/WebServer/Documents">
    Options FollowSymLinks Multiviews
    MultiviewsMatch Any

        AllowOverride All

        Require all granted
</Directory>

重新啟動 Apache 即可

檔案名稱錯誤

Apache 可以修改 .htaccess 的名稱, 可能因為某些原因名稱被修改了
可以尋找設定檔中的參數 AccessFileName 來確認正確名稱

模組無效

很多時候其實 .htaccess 有生效, 只是是因為 .htaccess 中有進行模組是否存在的相關檢查, 以至於我們以為沒有生效

.htaccess 可能有類似的內容

<IfModule mod_rewrite.c>
    .......
</IfModule>

上述的 .htaccess 會檢查 Apache 是否有 rewrite 這個模組, 若有才執行, 這種狀況變成要啟動該模組才會正常運行

編輯 httpd.conf, 找到下面的內容並將前方的 # 移除

#LoadModule rewrite_module libexec/apache2/mod_rewrite.so

將 MAC 內建的 PHP 5.6 升級到 PHP 7

在 MAC 上進行開發時使用的是 MAC 內建 PHP 5.6, 但 PHP 7 實在是很好用, 決定把 MAC 的 PHP 5.6 升級成 PHP 7, Mac 上要升級到 PHP 7非常簡單, 國外已經有人提供編譯好的版本與安裝腳本, 使用起來非常容易

相關資料

官方網站 php-macosx

安裝 PHP 7

選擇一個想要安裝的 PHP 版本, 目前支援 PHP 7.0 與 PHP 7.1

選擇 PHP 7.0

curl -s http://php-osx.liip.ch/install.sh | bash -s 7.0

選擇 PHP 7.1

curl -s http://php-osx.liip.ch/install.sh | bash -s 7.1

測試結果

接著寫入一個 phpinfo

<?php phpinfo();

看到下面這個畫面就代表我們成功升級為 PHP 7 了!

調整 Apache 設定

由於 MAC 預設使用 PHP 5, MAC 內建的 Apache 的 PHP 解釋器預設是連結到 libphp5.so, 當安裝新的 PHP 7 之後會產生衝突, 因此我們必須關閉舊版的模組, Apache 才能正常運作

關閉 PHP 5 模組

編輯 httpd.conf

sudo vim /etc/apache2/httpd.conf

找到原先的 libphp5.so 模組

LoadModule php5_module libexec/apache2/libphp5.so

在前面加上 # 將其註解

#LoadModule php5_module libexec/apache2/libphp5.so

重新啟動 Apache

sudo apachectl restart

Laravel 電話長度與選填欄位的實作筆記

最近在處理計畫的網站, 計畫的網站當中有一個選填電話的欄位, 在使用 Laravel 內建 Validation 進行長度檢查時意外踩到坑, 仔細查閱手冊後才發現 Max, Min 的行為與心中所有有所差距, 因此做個筆記避免往後夥伴踩到一樣的坑

Laravel 的 Validation 非常強大, 若要讓欄位選填並且只有在有填寫內容時才進行其他驗證, 可以使用內建的 nullable 達到效果, 而不需要使用 required

$rules = [ 'phone'=>'nullable' ];

針對數字的部分可以用 numeric 來達到驗證

$rules = [ 'phone'=>'nullable|numeric' ];

在長度檢查的部分我一開始是用了 min 與 max 來檢查, 結果無論如何都會觸發長度過長的錯誤, 仔細看過手冊後發現 Laravel 會去猜輸入的型別, 如果猜測結果是數字則 min, max 會變成比大小(min < x < max) 而不是預期的長度檢查, 正確長度檢查要使用 digits_between 這個規則才對

$rules = [ 'phone'=>'nullable|numeric|digits_between:10,12' ];

調整 Mysql/MariaDB Table 名稱大小寫不敏感

MySQL 與 MaraiDB 預設對於 table 的名稱是大小寫敏感的, 也就是 case sensitive, 但最近遇到客戶要求要將表名稱設定為大小寫不敏感, 設定上十分容易, 步驟如下

注意: 請先檢查是否有任何 Table 名稱在改為小寫後會重複的 Table, 若發生衝突 MySQL 會崩潰

編輯 MySQL/MariaDB 設定檔(不同作業系統可能會在不同目錄)

sudo vim /etc/mysql/my.cnf

找到 [mysqld] 這個 section 下方加入

lower_case_table_names = 1

接著重新啟動 MySQL/MariaDB 即可

sudo service mysql restart

不用懶人包在 MAC 上安裝 Apache, PHP, MySQL

當我們需要在 Mac 下進行網站開發時, 時常會用到 Apache, PHP, MySQL (AMP) 組合, 在 Windows 下常見的懶人包有 XAMPP, Appserv…等, 雖然 Mac 也有懶人包像是 MAMP, 但實際上 MAC 已經內建了 Apache 與 PHP , 並不需要用到懶人包, 我們只需要設定一下就可以啟動他們.

提醒

由於許多操作涉及管理員權限, 因此指令都有加上 sudo, 過程中如有詢問密碼若無特別說明則為您的 mac 使用者密碼

啟動 Apache

啟動內建的 Apache

sudo apachectl start

當我們啟動 Apache 後, 便可以訪問一下 http://127.0.0.1 檢查一下是否有正常運作

如果畫面上出現 It Works 就代表我們成功啟動 Apache 了!

整合 PHP

由於 Mac 已經內建 PHP 模組, 我們只要在 Apache 中將他啟用就可以了

使用編輯器編輯 Apache 設定檔

/etc/apache/httpd.conf

找到下面這行將前面的 # 刪除

#LoadModule php5_module libexec/apache2/libphp5.so

重新啟動 Apache

sudo apachectl restart

步驟做完了, 當然要驗證一下 PHP 是否有如期運作, 透過下面指令建立一個測試用的 php 檔案

echo "<?php phpinfo();" | sudo tee /Library/WebServer/Documents/info.php

接著我們就可以瀏覽 http://127.0.0.1/info.php 檢查一下結果

如果出現如上圖的畫面就代表 PHP 已經正常啟動了!(PHP Info 可能會因為版本不同而有些微差異)

安裝 MySQL

由於 Mac 並沒有內建 MySQL, 因此我們需要自己從官方網站下載來安裝
https://dev.mysql.com/downloads/mysql/

使用 DMG 封裝的版本進行安裝

點選下載後會出現要你登入的頁面, 但其實可以直接點選下面的 No thanks, just start my download. 直接進行下載

安裝過程的最後一步會跳出一個臨時密碼的視窗, 我們要記住這個密碼, 後續設定會用到

接著打開 Mac 的系統設定, 左下角會多出一個 MySQL 的選項, 點開 MySQL 進行設定

剛安裝完成 MySQL 並不會啟動, 我們需要手動點選 Start MySQL Server(爾後電腦重開會自動啟動)

當狀態轉變為 running 就代表啟動成功

啟動 Mysql 後, 接著要修改 root 密碼

/usr/local/mysql/bin/mysqladmin -uroot -p password '新的密碼'

指令執行期間會提示輸入 root 密碼, 這時候要輸入的密碼是安裝完成後出現的那組臨時密碼

這樣 Apache + PHP + MySQL (AMP) 的開發環境就建立完成啦!

工作目錄權限調整

Mac 的 Apache 預設工作目錄為

/Library/WebServer/Documents/

由於預設的擁有者是 root, 這會導致我們無法直接寫入檔案, 可以透過以下指令將所有權變成你的

sudo chown -R 你的mac使用者 /Library/WebServer/Documents/

Glances – 超強大資源使用監視工具

只要說到伺服器的資源監視想到的不外乎就是 top 與 進階版的htop, 今天要介紹一個更厲害的資源使用監視工具 Glances.

Glances 是一套使用 python 構成的資源監視工具, 除了基本的資源監視外還提供了 Web 介面以及遠端查看的功能.

Requirements

Python > 2.7, >= 3.3
psutil>=2.0.0

Installation

使用 pip 安裝

pip install glances

使用 shell script 安裝

curl -L https://bit.ly/glances | /bin/bash

Usage

基本使用

就跟 top 一樣, 直接在畫面上顯示資訊

glances

啟動 Web 介面

Glances 可以提供 web 介面, 但在使用前要補安裝相依套件 bootle

pip install bottle

接著啟動

glances -w

接著就可以使用喜歡的瀏覽器訪問 http://127.0.0.1:61208

遠端模式

server 模式

glances -s

client 連接

glances -c ip

Access Control

預設模式下 Glances 是免帳密驗證的, 但是為了安全起見我們還是設定一組帳號進行驗證
加入驗證的方法很簡單, 只需要帶入參數 --username--password

glances -s --username  --password

Glances 便會在啟動過程確認要設置的帳號密碼

Define the Glances server username: keniver
Define the Glances server password (keniver username):
Password (confirm):

最後, Glances 會詢問是否紀錄帳號與密碼, 之後啟動就不會再詢問了

Do you want to save the password? [Yes/No]:

當我們為 Glances 啟動驗證後, 我們連線時需要帶入 --username , --password, 並輸入先前設定的密碼才能連線

Python pip 發生 TypeError: __call__() takes exactly 2 arguments (1 given) 的解決辦法

在某次 apt-get update 後發現 pip install 出現 TypeError: call() takes exactly 2 arguments (1 given), 所有操作都無法繼續進行

追查了一下錯誤資訊, 發生錯誤的原因是 /Library/Python/2.7/site-packages/packaging/requirements.py 的 59 行

原始程式碼如下

MARKER_EXPR = originalTextFor(MARKER_EXPR())("marker")

比對其他版本的 pip 後, 發現這行應該是

MARKER_EXPR = originalTextFor(MARKER_EXPR)("marker")

於是乎就用正確的程式碼替換掉原來的程式碼, 重新運行 pip install 之後就正常了

pip 官方後續也修復了這個 Bug, 可以使用下列指令進行強制更新

python -m pip install --upgrade --force pip 

使用 CloudFlare SSL 憑證後出現過多重新導向的問題

CloudFlare 是一間非常有名的 CDN 廠商, 除了 CDN 與抗DDoS 的功能外, 免費版也提供了 SSL 憑證服務, 讓網站可以立刻從 HTTP 升級到 HTTPS, 使網站內容可以安全傳遞.

某日一個掛在 CloudFlare 的服務突然不能訪問, 只要嘗試訪問服務都會出現 ERR_TOO_MANY_REDIRECTS(過多重新導向) 的問題, 經過追查後整理出成因與解決辦法

發生條件


Cloudflare SSL 模式選擇 Flexible
Server Side 有設定 HTTP rewrite to HTTPS

發生原因

先來看 一下 CloudFlare SSL 的各種模式

(來源: https://www.cloudflare.com)

從上圖可以看出 Flexible 與 Full 最大的差別在於 CloudFlare 與 Origin Server 之間是否走 HTTPS, 這也是過多重新導向的核心原因

若我們在 Origin Server 設定 HTTP 自動導往 HTTPS, 或者程式本身有重新導向(Ex: WordPress), 從 Flexible 的角度來看, CloudFlare 透過 HTTP 存取 Origin, Origin 根據設定要求 Rewrite 到 HTTPS, CloudFlare 將 301/302 導向送往使用者端, 但SSL 模式下, 使用者訪問的網址已經是 HTTPS 了, 因此發生 HTTPS 不斷跳往 HTTPS 的問題, 這也就引發了 ERR_TOO_MANY_REDIRECTS 的問題

解決辦法

  1. Origin Server 關閉 HTTP 導向 HTTPS 功能
  2. 啟動 SSL Full 模式, 直接使用 HTTPS 訪問 Origin (推薦)
    (備註: Origin 要啟動 HTTPS, Strict 模式下憑證必須是有效的不能自簽)

後記

服務本身就有提供HTTPS, 但為了相容一些舊設備因此繼續開放HTTP, 前些日子為了提升整體安全性將所有流量導往 HTTPS, 沒想到悲劇就這樣發生了, 雖然快速找到問題並暫時後復, 但團隊為此猶豫要不要繼續開放 HTTP, 後來研究發現 CloudFlare SSL 相容性竟然意外的好, 因此後續還是強制使用 HTTPS.