How to use Docker for the WordPress localhost environment

如何運用 Docker 搭建本機開發環境 賴俊吾 / Oberon Lai

時速兩百麥的  WordPress 接案術

時速兩百麥的 WordPress 接案術

A b o u t m e賴俊吾    

Oberon Lai  (喔！布朗)  

 

WordPress 使用經驗  7  年  

分享過多篇佈景主題整合教學  

致力讓前端工程師無痛上手  WordPresss 

弄弄設計合作工程師

時速兩百麥的 WordPress 接案術

N O N G D E S I G N

時速兩百麥的 WordPress 接案術

i n t r o d u c t i o n

本機開發的好處與工具  Localhost Development

Kusanagi 的環境部署  Install Kusanagi Env

Docker 的基本操作  Docker 101

實機操作與  Q&A Live demo

時速兩百麥的 WordPress 接案術

OUR GOAL增加網站開發的速度

讓大家能準時下班

時速兩百麥的 WordPress 接案術

01WordPress 本機開發環境介紹WordPress localhost environment introduce

時速兩百麥的 WordPress 接案術

使用本機開發的好處

1.減少網路延遲的等待時間  

2.節省開發期間的主機成本  

3.避免伺服器當機時無事可做  

4.快速搭建數個  WordPress 網站  

5.整合前端自動化生產流程

S t r e n g t h s

時速兩百麥的 WordPress 接案術

視覺化操作介面

指令模式操作介面

Graphic User Interface

Command Line Interface

s o f t w a r e

G U I s o f t w a r e

視覺化介面本機軟體

1.WAMP、XAMP、AMPPS、MAMP 

2.InstantWP、ServerPress 

3.Local by Flywheel 

4.Bitnami 

5� .

時速兩百麥的 WordPress 接案術

G U I s o f t w a r e

個人踩雷心得

1.真的非常方便架站新手使用(?)  

2.預設安裝太多不需要的套件  

3.有些進階功能需要額外付費  

4.無法彈性搭配套件  

5.網站執行效率

時速兩百麥的 WordPress 接案術

時速兩百麥的 WordPress 接案術

C L I s o f t w a r e

指令介面本機軟體

1.手動安裝  LAMP 

2.Wordpressify 

3.Varying Vagrant Vagrants (VVV) 

4�

時速兩百麥的 WordPress 接案術

C L I s o f t w a r e

個人踩雷心得二

1.光要熟悉指令就會花上大半的時間  

2.安裝步驟繁瑣  

3.安裝速度慢  

4.網站執行效率

時速兩百麥的 WordPress 接案術

有沒有更好的本機環境軟體？

速度快  

安裝方便  

彈性擴充免錢

Docker 輕量化虛擬機介紹

時速兩百麥的 WordPress 接案術

02Docker Introduce

時速兩百麥的 WordPress 接案術

Docker 是什麼玩意兒？

1.由  dotCloud 公司開發，現為開源專案  

2.輕巧的虛擬小電腦  

3.小電腦可以安裝獨立的軟體  

4.各台小電腦間可以彼此溝通協作  

5.小電腦可以打包外帶

i n t r o

時速兩百麥的 WordPress 接案術

Docker 的基本元素

1.Container 容器  

2.Image 映像檔  

3.Volume 資料卷  

4.Compose 自動化工具

B A s i c e l e m e n t

時速兩百麥的 WordPress 接案術

c o m p u t e r^ ^

時速兩百麥的 WordPress 接案術

c o n ta i n e r

時速兩百麥的 WordPress 接案術

c o n ta i n e r

i m a g e

時速兩百麥的 WordPress 接案術

c o n ta i n e r

i m a g eV o l u m e

時速兩百麥的 WordPress 接案術

c o n ta i n e r

i m a g e

c o m p o s e

V o l u m e

時速兩百麥的 WordPress 接案術

Docker 的外掛市集(？)

1.Images 是一切  Container 的起源  

2.在  Docker hub 上有各式各樣打包好的   Image 

3.小電腦外帶就是要打包成   Image 

4.利用   Image 檔來彈性搭配需要的軟體及版本

D o c k e r i m a g e

時速兩百麥的 WordPress 接案術

Docker 的  WordPress Image

1.在  Docker hub 搜尋  WordPress 有  4,932 筆結果  

2.官方提供的   Image，超過千萬次下載  

3.Wocker 

4.wp‑local‑docker 

5�

D o c k e r w o r d p r e s s i m a g e

時速兩百麥的 WordPress 接案術

茫茫大海中該選哪一套好？

PHP7 

Nginx 

phpMyAdmin 

�

Kusanagi 超高速伺服器介紹

時速兩百麥的 WordPress 接案術

03Kusanagi Introduce

時速兩百麥的 WordPress 接案術

Kusanagi 是什麼玩意兒？

1.由  Prime Strategy 開發，客製化的伺服器架構  

2.搭配系統架構，提供專屬的快取機制  

3.號稱地表最快的  WordPress 環境  

4.內建針對裝置切換主題、圖片優化等功能

i n t r o

時速兩百麥的 WordPress 接案術

D E M OK u s a n a g i

時速兩百麥的 WordPress 接案術

Kusanagi 本機如何安裝？

1.初始設定  

2.創建TLS用服務器秘鑰文件  

3.設定服務器的時區  

4.設定語言環境

5.設定鍵盤類型  

6.設定用戶密碼  

7.設定密鑰認證  

8.MySQL root密碼的設定

9.網路服務器的選擇  

10.選擇應用服務器  

11.完成初始設定  

以及其它十個步驟 . . .

i n s ta l l

時速兩百麥的 WordPress 接案術

Kusanagi 用  Docker Compose 安裝

1.下載  Kusanagi 客製安裝包  

2.執行  docker‑compose up 

3.進入  WordPress 安裝畫面完成安裝

i n s ta l l

時速兩百麥的 WordPress 接案術

i n s ta l l

安裝  Dockerhttps://www.docker.com/get‑started

時速兩百麥的 WordPress 接案術

i n s ta l l

下載安裝包https://github.com/m615926/wp_local

時速兩百麥的 WordPress 接案術

i n s ta l l

執行  docker‑compose up

1.切換到資料夾目錄  

2.輸入  docker‑compose up 

3.去樓下買杯咖啡鬆一下

時速兩百麥的 WordPress 接案術

第一次下載   Image 檔需要比較久的時間，  

之後的專案都可以沿用這些   Image~

時速兩百麥的 WordPress 接案術

04手把手實機操作Live Demo

時速兩百麥的 WordPress 接案術

i n s ta l l D E M OK u s a n a g i & D o c k e r

時速兩百麥的 WordPress 接案術

部署到正式主機

1.打包成   Image 後上傳到裝有  Docker 的主機建立  Container 

2.直接租用內建有  Kusanagi 的  VPS 或雲主機  

3.找專業廠商協助部署  

4.只搬  wp‑content 跟資料庫到一般的  WordPress 主機

D e p l o y m e n t

時速兩百麥的 WordPress 接案術

R e v i e w

小小的小結

1.本地開發可以有效降低開發成本以及資料傳輸時間  

2.使用  Docker 可以彈性配置環境以及打包外帶  

3.使用  Kusanagi 可以加速開發時間  

4.明年的  WordCamp 再來分享部署心得(逃)

時速兩百麥的 WordPress 接案術

Thank you very much不保證有問必答的 時間

請各位大大鞭小力一點  Orz

Q A&