在 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

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

撰寫 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 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 就當場掛掉XD

因為我安裝的是 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
0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。