Sunday, October 23

[WEB] 用 Heroku 架設 Wordpress 網站

算是陰錯陽差下學到怎麼用 Heroku 架設網站。Heroku 是一個提供雲端 APP 管理的公司,看了半天還是沒看懂他們的賣點在哪(掩面),不過他們自己創了一個叫做 dyno 的單位,來計算使用者 APP 的流量。網站設計真心漂亮,有日式和風又有科技感,愛死了都(重點錯)。

於是繼續每篇的內容摘要:
  1. Heroku 簡介與帳號申請
  2. 安裝與設定 Ruby 和 Git 
  3. Wordpress(以下簡稱 WP)config 問題
  4. Git push 上載 WP 資料夾到 Heroku
另外要說一下,第一個想到可以用 Heroku 來 host Wordpress 的應該是這位神(依照發表時間推斷,雖然之後大部分的教學都是英文的)。他架的示範站在這。裡面也有解說,但是因為這位大神已經習慣使用 Ruby 和 RoR,所以對於一些剛接觸 Ruby(像廢柴某舒這種)、沒有安裝過 Ruby 、RoR 和 Git 的人來說,會遇到一點困難。因此雖然中英文都有介紹如何用 Heroku 架站的文章,這邊某舒還是把筆記作一下。

另外在 GitHub 上有一個 WP 架設專用的 file,可以直接 clone 到 Heroku 上。有興趣的人可以直接參考 GitHub 上的安裝步驟,在那之前還是得先完成這篇所提到的第一、二步。另外中文版可以參考本站另一篇文章

第一部分:Heroku 簡介與帳號申請


誠如開頭所說,Heroku 簡單來說就是一個雲端介面,像所有架網站時需要網路空間一樣,在開發好網路應用元件(application,簡稱 APP)後,需要一個平台讓使用者可以使用開發者寫出的程式,只是跟架網站不太一樣的地方是,通常這些 APP 是用 Ruby/C語言/Java 寫的,而開發者也習慣使用 Git 或是其他軟體來 compile 及除錯(以上是印象中的程序,某舒沒有寫過 app 所以也不知道詳細細節,但是基本上這些開發者習慣的介面跟寫網頁和設計網站是不一樣的)。

點開可以看大圖。
1. 按 login 可以申請帳號。只有英文介面就是了。
2. 這就是他們用的單位,用這個計算你會使用多少計算資源和流量。
3. 可以移動滑桿來看你大概需要付多少錢來支援你的 app。
要申請 Heroku 帳號,只要有可用的 email 帳號就可以了。帳號是免費的,一開始他也提供你免費 5MB 的共享資料庫(shared database)和 750 小時的 dyno。就單一一個 WP 網站來說是夠的,除非你的網頁非常熱門或是內容很多,database 一直被 query 不然應該是足夠。

申請以後在使用者介面會出現你現在所有的 APP list。在創建 WP 之前,建議你先把網站名稱在 My APP 下改過來,因為用 Git 上傳和建立 APP ,Heroku 會用隨機代碼當做你的 APP 連結位址,也就是預設的網址會是:http://Heroku 主機名稱+亂碼.heroku.com。(可以看一下示範站的網址,就知道我說的是什麼了)既然是要作為個人網站,又不想要轉址,當然名稱越容易記越好,先把名稱改過來,安裝完成後就不用再修改網頁名稱以及逐一修改 WP 內部連結(這是會死人的!)。

修改站名的介面。
Heroku 上有根據各種 APP 開發常用的平台而寫的使用說明,目前他是臉書公開建議使用的雲端 APP host。可以直接用站內搜尋尋找你想找的問題。另外在這裡也有一些練習可以參考。



第二部分:安裝與設定 Ruby 和 Git


這部分真心是我花最多時間搞懂的(除根本搞不懂的 Heroku 概念外<喂)。我之前完全沒有用過 Ruby 和 Git,架站以後也只是模模糊糊知道 Ruby on Rails 是滿多人在使用的 APP 開發介面,而 Git 算是管理和上載 APP 的軟體。根據 Wiki ,Ruby on Rails 是一個以 Ruby 這種程式語言為基礎而建立的結構,要使用它需要先安裝 Ruby。

這個連結可以連到 Ruby 中文官網的下載頁面。下載和安裝應該不會遇到什麼問題。Ruby on Rails 使用 gems 來稱呼每個 package,也就是已經寫好,可以直接安裝在 Ruby 資料夾下然後使用的程式碼。Ruby on Rails 網站上可以下載 Ruby Gems ,這也是一定要安裝的,不然使用 Ruby command panel 會不能連線到 Heroku 的 server(為了這個錯誤搞了一星期的某舒再次提醒)。此外,安裝了 Ruby Gem,就可以直接用 gem 這個指令來安裝 heroku gem 了。

Ruby 的 command 介面對 linux 系統比較親切,為了避免路徑輸入的麻煩,我把 Ruby 直接安裝在 C:\ 下面。Heroku 官網上建議使用 Ruby 1.9.2 以上版本,如果已經安裝過 Ruby ,也有安裝 Ruby Version Manager 的捧由,麻煩在 command panel 輸入以下字串,更新一下 Ruby:

rvm install 1.9.2 && rvm use 1.9.2 --default

接下來是安裝 Git 。下載以後很容易安裝,另外也有給 Mac OSLinux 使用的版本。安裝了Git 之後,需要安裝 heroku gem。指令如下:

$ gem install heroku

根據官網,heroku gem 常常更新,所以建議大家要用之前記得先檢查更新一下:

$ gem update heroku

之後請記得要把 heroku 的 credential 儲存在自己的電腦上,指令如下:

$ heroku keys:add

這樣以後要登入會簡單許多。輸入上述指令以後,會出現以下的確認訊息(紅字是需要輸入的部分):

Enter your Heroku credentials.
Email: 你註冊的 email 帳號
Password: Heroku 上的密碼,不會顯示出來
Uploading ssh public key /Users/電腦上的帳戶名稱/.ssh/id_rsa.pub

Git 本身又是另一個軟體,他有自己的 commend line,這裡是 tutorial,因為我也只用了上傳檔案需要用的 Git commend,所以這邊就不多介紹,能用就好。

Enter your Heroku credentials.
Email: 你註冊的 email 帳號
Password: Heroku 上的密碼,不會顯示出來
Uploading ssh public key /Users/電腦上的帳戶名稱/.ssh/id_rsa.pub

1. 檢查你 Heroku 帳戶下已經建立的 APP:在 commend window 裡要先開啟你放 wordpress 的那個資料夾,然後在那個資料夾下輸入以下指令。

$ cd 你的資料夾路徑
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "new app"
Created initial commit 5df2d09: new app
44 files changed, 8393 insertions(+), 0 deletions(-)

2. 建立 SSH key:開啟你的 Git Bash(開始→Git→Git Bash),輸入以下指令。

$ cd ~/.ssh

檢查有沒有 SSH keys。如果出現 “No such file or directory“ 的提示,就需要建立一個新的 key。請回到上面 Heroku 設定的地方儲存下你的 SSH key 序號,或是用以下的指令新建一個。

$ ssh-keygen -t rsa -C "申請 Heroku 帳戶所使用的 email"

之後它會請你輸入密碼(passphrase),然後就建立完成了。

如果你已經將 Heroku 專用的 SSH key 存在電腦裡,就可以直接選用。如果你不確定這個 key 是不是你要的,那就用以下指令將舊的 key 存起來,然後建立一個新的:

$ lsLists all the subdirectories in the current directory
config id_rsa id_rsa.pub known_hosts
$ mkdir key_backupmakes a subdirectory called "key_backup" in the current directory
$ cp id_rsa* key_backupCopies the id_rsa and id_rsa.pub files into key_backup
$ rm id_rsa*

3. 申請一個 GitHub 帳號,把這個 key 存在 GitHub 上,以供往後登入使用。在 GitHub 網站上點選 “Account Settings” > “SSH Public Keys” > “Add another public key”,然後把 /Users/電腦上的帳戶名稱/.ssh/id_rsa.pub 這個檔案用記事本或是其他編成軟體打開,將內容複製貼上,然後點 Add Key 。

4. 測試一下,用以下指令試試看可不可以連到 GitHub。

$ ssh -T git@github.com

中間會需要你確認,輸入 yes 就可以了。成功的話會出現以下資訊:

Hi 帳戶名稱! You've successfully authenticated, but GitHub does not provide shell acess.

5. 設定 GitHub token。回到 GitHub 的網站,選擇 “Account Settings” > “Account Admin.” 裡面有一欄叫做 API token 的字串,複製以後在以下指令中貼上(或是手動輸入)。

$ git config --global github.user 帳戶名稱
$ git config --global github.token 你的 API token 字串

以上步驟對等等要直接複製 GitHub 的 WP 檔案到自己的 Heroku 帳戶下很重要,沒有這些設定是不能用 cloning 的方式安裝 WP 的。

接下來終於可以開始安裝了!

在 Ruby 的 command window 或是 Git Bash 依序輸入以下指令來新增一個新的 Heroku App。

$ heroku create
Enter your Heroku credentials.
Email: Heroku email 帳號
Password: 密碼
Uploading ssh public key /Users/電腦使用者名稱/.ssh/id_rsa.pub
Created http://HEROKU伺服器和編碼.heroku.com/ | git@heroku.com:HEROKU伺服器和編碼.git
Git remote heroku added

如果你之前已經把 API Token 存好,就不需要再認證一次,可以繼續下面的步驟。HEROKU伺服器和編碼這一項就是先前提到需要再 APP list 裡面修改的部分。預先修改可以省下之後修改 WP 內部連結的時間。

$ heroku open

這個指令會自動在瀏覽器裡打開你新建的 Heroku APP 主頁。

到這邊,Heroku 上已經有一個空間準備好可以放你的 WP 程式了。



第三部分:Wordpress Config 問題


在上傳 WP 到 Heroku 上之前,需要修改 wp-config.php 這個檔案,檔案應該是在 WP 打開的第一層資料夾內,有一個是 wp-config-sample.php。需要把這個檔案裡面一些參數做調整。這些參數可以用下面的指令取得:

$ heroku config
> DATABASE_URL => postgres://共享資料庫的使用者名稱:資料庫密碼@伺服器名稱/資料庫名稱
> SHARED_DATABASE_URL => postgres://username:password@host/database_name

heroku config 會傳回資料庫的位址,並且以上面的格式呈現,也就是,在冒號前是你的共享資料庫內的使用者名稱,冒號到@符號前是密碼,"host/"之後是資料庫的名稱。這些參數都是亂碼,所以抄的時候要抄對。接著把這些資訊貼到 wp-config.php 相對應的參數裡。

/** The name of the database for WordPress */
define('DB_NAME', '資料庫名稱');

/** Database username */
define('DB_USER', '共享資料庫的使用者名稱');

/** Database password */
define('DB_PASSWORD', '資料庫密碼');

/** Database hostname */
define('DB_HOST', '伺服器名稱');

這些步驟在一般 ftp 安裝 WP 中是可以自動執行的,但是因為 Heroku 用的 database 不是 WP 預設的 MySQL,而是 PostgreSQL,所以需要手動重設。此外,也需要預先安裝可以讀取 PostgreSQL 的 plug-in(PG4WP)在 wp-content 資料夾下。

除了這個,如果有其他 plug-in 或 theme 想要安裝,也建議一次把所有組件都放到 wordpress 的資料夾裡,因為 Git push 不比 FTP,每次要上傳都要 commit 一次,而且連線也滿麻煩,如果先把所有要上傳的東西都放到資料夾裡一次上傳,就會方便許多。



第四部分:Git push 上載 WP 資料夾到 Heroku


剩下的步驟就簡單多了,只有一兩行指令就完成了。

$ git commit -m "zomg wordpress"

這一步是將其中一個版本的 WP 檔案標示為正式版本,並且標注它為要上傳使用的版本。在 Git 的 Repository 裡面,程式會自動儲存每次修改的版本,也就是每次用 Git 修改 APP 時,程式都會自動複製一次你的原始碼,供你修改。但是只有 commit 過的才會被保存下來,下次你開啟檔案時就是開啟 commit 過的版本。這邊必須要 commit 過你的整個 WP 資料夾,才能接著下面 push 的動作。

$ git push heroku master

最後一行指令!如果成功會出現下面的訊息:

Counting objects: 65, done.
Compressing objects: 100% (58/58), done.
Writing objects: 100% (65/65), 80.54 KiB, done.
Total 65 (delta 14), reused 0 (delta 0)

-----> Heroku receiving push
-----> Rails app detected
Compiled slug size is 0.1MB
-----> Launching....... done
App deployed to Heroku

To git@heroku.com:你的伺服器名稱.git
* [new branch] master -> master

這樣就大功告成了!

步驟很繁雜,但是除了第一、二步設定上需要花多一點時間,WP 的設定其實有已經設定好的模板可以從 GitHub 上複製到 Heroku 上。中文版可參考本站另一篇文章。英文版則在這裡

2 comments :

  1. 如果直接安装heroku的SDK安装包应该会自动部署完成了吧?
    水水是事后看看才发现用到的是RUBY部署上行

    GIT在使用的时候会经常用到嘛=w=

    ReplyDelete
    Replies
    1. 嗚哇! 不好意思遲回覆! 是說我不知道 SDK 的安裝包是什麼耶 orz
      不過另一篇 http://yapeshu.invenio.us/2011/10/web-github-wp-heroku.html 裡面有提到用 github 的 package 迅速安裝的方法.

      是的都是用 Ruby, 所以在安裝之前都要把這些軟件裝好. 另外 GIT 如果是 developer 的話應該會常常用到吧XD 或是會比較常用到 heroku 的玩家. 我是除了安裝 wp 以外就沒有再去研究 heroku 了, 所以跟 git 還是沒很熟XD|||

      Delete