WordPress + GCP + SSL:給你最完整的免費網站架設教學

by 班陳
wordpress

GCP (Google Cloud Platform) 和 AWS (Amazon Web Service) 應該是架站雲端主機的兩大山頭
其中我們的估狗大神 Google 對台灣的重視是有目共賭的
尤其實是在台灣彰化建了個資料中心後,整個服務與台灣的關係又是加深了一層
足顯誠意啊~

近年來人人皆可架站
個人部落格、公司型象網站、網路商城等等多到不行
其中可以使用的網站架設資源百百種,為什麼要選 WordPress + GCP + SSL 呢?

為什麼要使用 WordPress + GCP + SSL

1. 免費雲端主機

Google 提供一年300USD的免費額度,已經足夠拿來架基本的WordPress
使用後喜歡或覺得流量要更大,到時候再來加價升級也非常彈性

2. 免費SSL

嘿丟! SSL 也是免費的
使用 Let’s Encrypt Certificate + WordPress 的 Really Simple SSL 免費外掛
就可以免費讓你的網站有 SSL 憑證
提升安全性之外,還強化了你的 SEO & 網站排名,何樂而不為呢?

3. 連線速度快

所謂天下武功,唯快不破
不知道是不是因為 Google 在彰化建資料中心的關係
選對機器讓你上天堂啊
下面是用 Google PageSpeed Insights 測試的結果
比起 Siteground 之類的服務,整整快上一大截啊

GCP speed test - Great!

4. 簡單便利

Bitnami 已經提供了適合 WordPress 運作的範本
方便我們一鍵完成 WordPress 架站的工作
真心方便,5分鐘搞定!


網站架設流程

以下就帶各位一步步來免費架設自己的網站
希望能多少幫助到少踩一點坑 (我自己是踩了滿多次的XD)
整個流程約略可切成四大塊:

一、申請 Google 帳號並啟用 GCP 雲端主機
二、開一台專門給 WordPress 用的機器並啟用 WordPress
三、將網域名稱 (Domain Name) 對應到 GCP 雲端主機
四、申請 SSL 憑證並設定自動更新

準備好了嗎? 最完整的免費網站架設教學要開始囉!

一、申請 Google 帳號並啟用 GCP 雲端主機

這邊其實就是申請 Google 帳號,簡單帶一下

step 1


建立個人帳戶

apply for google's account

step 2


填入各種資訊,這邊就不另多做說明了

info for registration

二、啟用 GCP 並開一台專門給 WordPress 用的主機

step 1


看到以下畫面後就可以確認
並點選右上角的【啟用】以免費試用GCP

click to confirm start using GCP

step 2


再次填入各種資訊,其中信用卡並不會真的扣款
一年的免費期間到期 (或300USD額度用完) 後也會主動跟你確認是否要付款
可以放心驗證

continue to start using GCP

step 3


看到以下畫面,就代表已成功申請 GCP 囉!

succeed in starting GCP

step 4


點選左側邊欄的【Marketplace】以套用 Bitnami 範本

Click marketplace

step 5


在搜索欄內輸入【wordpress ssl】並點選第一個【WordPress with NGINX and SSL Certified by Bitnami】
接著點選【在 COMPUTE ENGINE 上啟動】

step 6


在【部署作業】中依照以下畫面中操作

  • Zone: asia-east1-a: 這個是指台灣彰化的機房,速度應該是對我們台灣用戶來說是最快的
  • Machine type: 選小型 1.7 GB 記憶體,這個算夠用而且在免費額度範圍內
  • Boot Disk: 選【SSD Persistent Disk】,大小選【30】; 這也是夠用且在免費額度內
  • 檢查一下右上方的每月預約費用,目前是$20.43,一年是$245.16,在免費額度 1年/$300 USD 的範圍內
  • 最後確認有點選【我接受 GCP Marketplace 服務條款】並點選【部署】

step 7


看到以下左邊畫面代表 GCP 正在部署中
稍等一下後,看到右邊畫面就代表完成了!

step 8


點選【Log into the admin panel】後
輸入畫面中的Admin user (帳號) 及 Admin password (密碼) 就可以登入 WordPress後台
在 settings 裡將 Site Language 改成繁體中文,最後點選 Save Changes 就可以看到中文界面

step 9


點選左上的【造訪網站】就可以看剛建好的網站囉!

step 10


有發現右下角這個礙眼的Logo嗎?
要移除這傢伙,須要藉助一下我們神秘的終端機

首先回到主控台,並點選 SSH 旁邊的倒三角形,再點選【在瀏覽視窗中開啟】
然後稍微等一下,就會進入神秘的終端機

step 11


分別鍵入以下兩行指令後
回到 WordPress 主頁,就可以發現惱人的 Logo 不見囉!

sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart nginx

到這個階段其實網站就已經差不多了
不過我們還沒有 Domain,別人想要看我們的網站是非常困難的
所以接下來就來看怎麼設定 Domain 吧!


三、將網域名稱 (Domain Name) 對應到 GCP 雲端主機

這部份原則上就是在 DNS 服務中設定 A Record 對應到你的 GCP 主機 IP 位址,等待生效後就能連結到網站
不過倒是有一件事要先做 : 把外部位址改成靜態的
做完這步後你的 IP 位址就會固定下來,不會因為重新啟動機器而變動

step 1


點選 VPC 網路 → 外部 IP 位址

choose VPC internet

step 2


點選靜態後,填一個自己好記的名稱
再點選保留,這樣子 IP 就會固定下來了!

step 3


在 DNS 服務中設定 A Record 對應到你的 GCP 主機 IP 位址
我使用的是 NameCheap,如何購買可以參考這篇文章
以下以一張圖片來圖解A Record設定

點選【Advanced DNS】,接著點下面的【ADD NEW RECORD】,最後照上圖填入,記得要把Value那邊改成你剛剛在 GCP 設定為靜態的那個外部 IP 喔!

好的! 這樣子其他人應該也可以透過你設定好的 Domain 連到你的網站了
(以我的為例,就是 growingdna.com)
最後一步,就是要做 SSL 憑證啦!


四、申請 SSL 憑證並設定自動更新

SSL 憑證可以讓提升你的網站 SEO ,先不說其他的
光是左上角可以看到鎖頭而不是一個問號或紅色警示
這感覺就是爽啊!

step 1


為了安裝免費的 SSL Let’s Encrypt Certificate
我們必須透過 SSH 連線到主機
這邊又會出動我們的神秘終端機

老樣子,回到主控台
並點選 SSH 旁邊的倒三角形,再點選【在瀏覽視窗中開啟】

SSH connection

step 2


接著在神秘的終端機內貼上以下指令

sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m YOURMAIL -d YOURDOMAIN
記得要把【YOURMAIL】和【YOURDOMAIN】改成自己的喔
以我的為例,mail就是growingdna@gmail.com; domain 就是 growingdna.com

開始安裝後,系統會在中途詢問幾個問題,都只要輸入 y 同意即可
不過比較麻煩的是,Let’s encrypt 三個月就會失效
所以我們要自己寫一個腳本 (crontab) 來讓他自動更新

step 3


建立腳本自動更新 SSL

首先在神秘的終端機內輸入以下指令

sudo nano /opt/bitnami/letsencrypt/scripts/renew-certificate.sh

接下來就會出一個全黑的畫面
在這邊複製貼上以下內容

#!/bin/bash

sudo /opt/bitnami/ctlscript.sh stop nginx
sudo /opt/bitnami/letsencrypt/lego --tls --email="EMAIL-ADDRESS" --domains="DOMAIN" --path="/opt/bitnami/letsencrypt" renew --days 88
sudo /opt/bitnami/ctlscript.sh start nginx
老樣子,email 和 domain 都要換成自己的喔

完成後按下 ctrl + X ,系統會問你是否要儲存,按 y 確認,最後再按 enter 儲存
完成後會再回到原畫面

以上是完成了要執行的內容 (也就是更新 SSL
但為了要執行它,我們必須要給它足夠的權限
這邊要在神秘的終端機分別鍵入以下指令

sudo chmod +x /opt/bitnami/letsencrypt/scripts/renew-certificate.sh

sudo crontab -e
下面Choose的部份鍵入 1 ,然後就會開啟一個黑畫面

在這個黑畫面鍵入以下內容

0 0 1 * * /opt/bitnami/letsencrypt/scripts/renew-certificate.sh 2> /dev/null
完成後,跟之前一樣,按ctrl + X、按 y 、按 enter 就完成囉!

到這邊,腳本就會每三個月 (嚴格說起來我們是設了88天)幫你更新一次 SSL
之後如果發現有問題沒更新的話
可以回這裡看看有沒有問題

不過我們 SSL 還須要一點微調才能讓它真的生效
一起看下去吧!

step 4


SSL 設定

在終端機內鍵入以下指令

sudo nano /opt/bitnami/apps/wordpress/htdocs/wp-config.php

找到WP_SITEURL、WP_HOME,將原本的 http:// 改成 https:// (注意多了個 s 喔!)

接著修改一下使用權限
讓我們 WordPress 的外掛可以使用
所以要在終端機內鍵入以下指令

sudo chmod 664 /opt/bitnami/apps/wordpress/htdocs/wp-config.php

step 5


最後的最後,就是使用 WordPress 的外掛來讓 SSL 生效了!

直接在 WordPress 內搜索  Really Simple SSL
安裝完成再啟用就好,不須要額外的設定

有沒有看到代表 SSL 的鎖頭了呢?

到這裡就大功告成了
我看到鎖頭時真的是亂感動一把的
所以才想要寫這篇文章來分享心路歷程
希望能幫助想省錢的朋友少走一點冤枉路 LOL

若有什麼問題都歡迎留言詢問喔
我一定盡自己所能幫助你
彼此加油!!

2020/2/21 新增: 解決無法接收到系統郵件問題

若無法接收到系統的更改郵件
可以依照以下方法操作 (我是用gmail)
https://progressbar.tw/posts/63

2020/7/09 新增: 如何使用 SSH 來遠端連線並操作 PhpMyAdmin

新增如何使用 SSH 來遠端連線並操作 PhpMyAdmin 一文
使用 SSH 遠端連線 GCP Bitnami WordPress 操作 PhpMyAdmin
供須要進階存取資料庫的朋友參考!

You may also like

19 comments

Danny 2019-11-30 - 11:12 上午

hi Ben, 您好, 這篇對我非常實用, 我目前網站是 hosting 在 wordpress 上面掛上自己申請的 domain. 我目前網頁的編輯都是透過 wordpress 的頁面編輯器來新增或修改網頁

那我想請教一下如果我透過您這邊介紹的方式, 是不是我在 GCP 上面就可以一樣生出一套 wordpress 的管理介面來管理我的網站呢?

Reply
班陳 2019-11-30 - 1:06 下午

Hi Danny,
謝謝你的鼓勵~
不過你說你說的管理介面是指什麼呢?
是指wp原生的管理頁面嗎? 像是有左側邊欄的文章、媒體、頁面等的那個
還是指主機商給的管理後台呢?

如果是指wp原生的 那在gcp上就是一模一樣的
但如果是主機商給的話 那就沒有囉~

Reply
aaa 2019-11-30 - 10:54 下午

您好,請問:
1. SSH可以不用瀏覽器版,而是可以直接本地端輸入IP/username/password來SSH進入主機呢?
2. 有SFTP可以用嗎?
謝謝

Reply
班陳 2019-12-23 - 5:09 下午

哈囉
理論上是可以 但可能要自己生成key
我個人是沒試過呢

Reply
Brian Peng 2019-12-07 - 4:15 下午

感謝啦!終於搞定SSL了~!!! 太感謝!!

Reply
班陳 2019-12-23 - 4:32 下午

哈哈不會不會
搞定ssl這檔事我真的也是費了一好一番功夫
彼此加油!

Reply
Henry Chen 2020-02-26 - 10:12 下午

您好 我照著您的步驟做完了 但網站卻顯示不安全 ==
原本還沒做的時候只是 網站資訊 資訊或不安全 這個
請問該怎麼弄0.0

Reply
Ben 2020-03-06 - 11:02 上午

哈囉
請問您是從頭照尾照著我的作法做的嗎?
之前有一個朋友他是使用的bitnami的其他範本
就不適用於我這個作法囉

Reply
Henry Chen 2020-04-04 - 1:37 上午

這邊要加上 sudo 不然沒有權限更改權限
sudo chmod 664 /opt/bitnami/apps/wordpress/htdocs/wp-config.php

Reply
Ben 2020-04-06 - 6:13 下午

喔喔 我的好像不用加sudo也可以
讚啦

Reply
沁偉 2020-05-14 - 9:49 上午

感謝大神這篇!真的是全網最詳細最有用!!!!大推

Reply
Ben 2020-05-15 - 1:46 下午

大神不敢當xd
謝大大美譽哈哈

Reply
macbp 2020-06-04 - 8:08 下午

Dear Ben,

謝謝您詳細解說
想請問一下
因為之前沒有申請自動續憑證
目前憑證過期
要如何讓憑證啟用?

Reply
Ben 2020-06-17 - 1:47 下午

Hello macbp!
你可以在 `四、申請 SSL 憑證並設定自動更新` 裡的 `step2`找到一段指令如下

`sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m YOURMAIL -d YOURDOMAIN`

這個再執行一次就好囉

Reply
Tommy 2021-08-06 - 8:31 下午

可以請教站長要如何解決我的問題嗎?
我在申請SSL的第一步
sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m YOURMAIL -d YOURDOMAIN
就卡關了(我有更改成自己的信箱及域名),顯示
sudo: /opt/bitnami/letsencrypt/scripts/generate-certificate.sh: command not found
希望您可以幫我解決
感謝您用心製作這個網頁!

Reply
Ben 2021-08-11 - 4:17 下午

Hi Tommy,
你用的bitnami範本全名是什麼呢?
之前也有人有類似的問題 後來發現我們用的範本不一樣

Reply
WEIJUN 2021-09-01 - 3:53 下午

HI BEN 如果不存在GCP 網頁存在自己的NAS上 其餘SSL跟你操作設定一樣嗎 謝謝

Reply
Ben 2022-02-21 - 4:30 下午

喔喔感謝大大提供 這個真的是有點舊了沒有 review
感謝支援!!

Reply

Leave a Comment