如何使用 gce 架設 wordpress 網站？

中小企業在網站架設的解決方案上，通常會在一個主機上安裝多個網站，這篇教學使用 docker-compose + nginx 架設 wordpress 網站在 google compute engine 上。

---

前置作業

進行之前你必須要先擁有幾項東西：

1. 一個 gcp 專案
2. 在 gcp 專案中開啟一個 compute engine (vm)
3. vm 必須已經保留外部 ip
4. 註冊一個網域（網路上有很多免費網域註冊教學，但是你要正式使用的最好是付費保留地址，每年續約）

vm 的設定：

1. 機器設定：可以選擇最小的 e2-micro(2個 vCPU, 1GB記憶體)
2. 開機磁碟：選擇 ubuntu，大小10GB
3. 防火牆：http打勾、https打勾

依照這樣設定的話，一個月是大概8塊多美金，也就是200多塊台幣～

裡面可以放不只一個網站，還算是很便宜的一種選項。

日後生意做大XD，覺得性能容量不夠，都可以再調大 vm 設定，只是調整的時候會需要暫停 vm，網站會暫時連線不上。

等你調整好，再重啟服務即可，下面會教學如何重啟服務。

 

流程大綱

本篇文章大概會有以下流程：

1. 在 vm 安裝 docker、docker compose
2. 撰寫 docker-compose.yml
3. 啟動或停止 docker compose
4. 安裝 nginx
5. 撰寫 nginx .conf 設定反向代理
6. nginx 刷新
7. dns 指向

 

---

安裝 docker

可以參考這篇文章ＸＤ 懶得再寫一次

在 vm ubuntu 安裝 docker

撰寫 docker-compose.yml

架設 wordpress 網站，會需要用到 mysql 資料庫，所以在docker-compose.yml檔案中會使用到兩個 image，一個是 mysql，一個是 wordpress。

新增一個專案資料夾：

$ sudo mkdir blog
$ cd blog

在資料夾中新增docker-compose.yml

$ sudo vim docker-compose.yml

貼上以下內容：

version: "3.9"
 services:
   db:
     image: mariadb:latest
     volumes:
       - ./db/:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: mysql_root_password
       MYSQL_DATABASE: wordpress
       MYSQL_USER: admin
       MYSQL_PASSWORD: wp_database_password
 wordpress:
     depends_on:
       - db
     image: wordpress:latest
     volumes:
       - ./wordpress/:/var/www/html
     ports:
       - "5000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db
       WORDPRESS_DB_USER: admin
       WORDPRESS_DB_PASSWORD: wp_database_password
       WORDPRESS_DB_NAME: wordpress

docker-compose.yml檔案的詳細解說可以參考這篇：

使用 docker 架設 wordpress 網站

啟動或停止 docker compose

檔案寫好之後，就可以啟動 container，

在docker-compose.yml相同路徑下，執行指令：

$ docker compose up -d

-d的意思就是在背景執行，這樣你的終端機就不用再開一個視窗，可以繼續執行其他指令。

啟動後可以檢查看看是否有兩個 container 正在運行：mysql、wordpress

$ docker ps

如果要關掉服務，一樣在docker-compose.yml相同路徑下：

$ docker compose down

在修改docker-compose.yml檔案後，需要關掉服務再重啟，修改才會生效

# 關掉
$ docker compose down 

# 重啟
$ docker compose up -d

 

安裝 nginx

安裝 nginx 目的是要讓別人可以透過 ip 或是自訂網址(blog.example.com)訪問到你裡面的 5000port 網站。

在任何路徑下：

$ sudo apt install -y nginx

安裝好之後，訪問 vm 的外部 ip 就可以看到 nginx 的預設畫面。

反正就是寫一些「Welcome to nginx ! 」之類的～

然後你繼續訪問外部 ip:5000就可以看到 wordpress 網站

但是我們想要把自己註冊的 domain 掛上去，我不要讓別人用 ip+port 號訪問，這時候就需要反向代理。

 

撰寫 nginx .conf 設定反向代理

進入到 nginx 放 config 檔案的地方

$ cd /etc/nginx/sites-available

新增一個.conf檔案（先假設我們要用的 domain 叫做blog.example.com)

$ sudo vim blog.example.com.conf

貼上以下內容：

server {
         root /var/www/html;
         listen 80; 
         listen [::]:80;
         server_name blog.example.com;
         location / {
             proxy_pass         http://127.0.0.1:5000;
             proxy_redirect     off;
             proxy_set_header   Host $host;
             proxy_set_header   X-Real-IP $remote_addr;
             proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header   X-Forwarded-Host $server_name;
             proxy_set_header   X-Forwarded-Proto $scheme;
         }
 }

其中有兩個地方要注意：

1. server_name要放你到時候要指向過來的 domain
2. location / 表示在任何路徑下，要進行以下設定
3. proxy_pass這樣表示要跳轉的位置，也就是我們網站輸出的localhost:5000。

這時候我們要把這個檔案，連結到/sites-enabled。

$ cd /etc/nginx/sites-enabled
$ sudo ln -s /etc/nginx/sites-available/blog.example.com.conf blog.example.com.conf

完成之後重新啟動 nginx

$ sudo service nginx restart

設定好之後我們要把我們註冊的 domain 加上這個 vm 的 ip 紀錄

 

dns 指向

我的網域是在godaddy註冊的，但不論你在哪裡註冊，你要找到可以新增網域 A紀錄的地方。

新增紀錄的時候，選擇「A紀錄」、名稱「blog」、主機「你的vm的外部ip」

dns 不會管 port 號的，所以你只需要輸入外部 ip，不需要輸入 port 號。

新增好之後重新訪問blog.example.com就可以看到 wordpress 網站了。

 

幫網站加上HTTPS

要幫網站加上 SSL 憑證，需要安裝 certbot 這個套件。

依照以下步驟，前提是你已經依照上面步驟寫好blog.example.com.conf

如果你是 ubuntu 18 以上才是安裝python3-certbot-nginx喔！其他版本請自行查詢。

$ sudo apt install software-properties-common
$ sudo apt update
$ sudo add-apt-repository -r ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python3-certbot-nginx
$ sudo certbot --nginx -d blog.example.com
$ sudo service nginx restart

進去看看certbot有沒有幫你在blog.example.com.conf加上443輸出

$ cd /etc/nginx/sites-availables
$ cat blog.example.com

有的話就可以訪問http://blog.example.com，他應該要自動幫你導向https://blog.example.com，並且網址前面會出現一個鎖頭。

---

第二個wordpress網站

要建立第二個網站，要先新增一個新的資料夾

$ sudo mkdir blog-2
$ cd blog-2
$ sudo vim docker-compose.yml

貼上以下內容（其實只有改 wordpress port 號)

version: "3.9"
 services:
   db:
     image: mariadb:latest
     volumes:
       - ./db/:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: mysql_root_password
       MYSQL_DATABASE: wordpress
       MYSQL_USER: admin
       MYSQL_PASSWORD: wp_database_password
 wordpress:
     depends_on:
       - db
     image: wordpress:latest
     volumes:
       - ./wordpress/:/var/www/html
     ports:
       - "5001:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db
       WORDPRESS_DB_USER: admin
       WORDPRESS_DB_PASSWORD: wp_database_password
       WORDPRESS_DB_NAME: wordpress

啟動網站，在blog-2/路徑下：

$ docker compose up -d

訪問外部ip:5001就可以看到第二個網站。

---

常見錯誤

創建好網站後時不時會遇到一些錯誤，在這邊統一整理。

 

1. wordpress網站突然跑很慢

有時候 wordpress 網站突然跑很慢，看了同一台 vm 其他網站也發現都突然一起卡住不動。

連SSH都無法連進去檢查，直接死機只能停掉 vm 重啟。

這是因為我開的 vm 記憶體只有1G，而初始啟動的 vm 並沒有幫我設定虛擬記憶體的大小，wordpress 網站又需要耗費大量記憶體，所以一個不小心就很容易用爆記憶體， vm 就當場掛掉ＸＤ

因為我安裝的是 ubuntu 20，所以設定的方法每個作業系統版本都會有不同，這邊找到網路上一篇手把手設定swap虛擬記憶體教學。

那這邊要注意 swap 的大小，可以設定跟你的真實記憶體一樣(1G)，最多就是不超過真實記憶體的兩倍(2G)。

當然這也要看你的空間夠不個切出這些容量放虛擬記憶體喔！

教學傳送門：

https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-20-04

 

2. Nginx 錯誤: 413 Request entity too large

可能你在安裝主題或外掛的時候，突然爆出這個錯誤，這是因為雖然我們開了wordpress的檔案上傳上限，但是nginx自己也有自己的檔案上傳上限，解除這個上線就進入到你的 /etc/nginx/sites-availables/blog01.example.com.conf 新增一行：

client_max_body_size 20M;

大小可以自己制定，然後放的位置在這裡：

server {
          root /var/www/html;
          listen 80; 
          listen [::]:80;
          server_name blog01.example.com;
          location / {
              proxy_pass         http://127.0.0.1:5000;
              proxy_redirect     off;
              proxy_set_header   Host $host;
              proxy_set_header   X-Real-IP $remote_addr;
              proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header   X-Forwarded-Host $server_name;
              proxy_set_header   X-Forwarded-Proto $scheme;
              client_max_body_size 20M; # <----新增這行
          }
  }

儲存檔案後重啟 nginx

$ sudo service nginx restart