10306241-Lab05

การติดตั้ง MySQL Server

การติดตั้ง MySQL Server ด้วย Docker ประกอบไปด้วยขั้นตอนต่าง ๆ ดังต่อไปนี้

ขั้นตอนที่ 1. ให้นักศึกษาสร้าง directory ชื่อ it241 ในเครื่องคอมพิวเตอร์ของตัวเอง เช่นสร้างไว้ที่ C:\workspaces\it241

หรือนักศึกษาอาจสร้างใน directory อื่นได้ตามต่้องการเช่น D:\workspaces\it241 หรือ E:\workspaces\it241 เป็นต้น

PS C:\workspaces\it241> tree
C:.
└────workspaces
     └───it241

ขั้นตอนที่ 2. ให้นักศึกษาสร้างไฟล์ชื่อ docker-compose.yaml ไว้ใน directory ที่นักศึกษาได้สร้างขึ้น เช่น C:\workspaces\it241\docker-compose.yaml

PS C:\workspaces\it241> tree
C:.
└────workspaces
     └───it241
         └───docker-compose.yaml

ขั้นตอนที่ 3. สร้าง MySQL Server service โดยพิมพ์คำสั่งดังต่อไปนี้ลงในไฟล์ docker-compose.yaml

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql  
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db 

ขั้นตอนที่ 4. รันและทดสอบ โดยใช้คำสั่ง docker-compose up -d (Docker compose คือคำสั่ง command line ดังนั้นจำเป็นต้องเปิด Terminal เพื่อให้ Docker Compose ทำงาน)

หากเป็นการรันครั้งแรก Docker จะโหลด MySql Image และติดตั้งระบบฐานข้อมูลให้รอประมาณ 1-2 นาที

ขั้นตอนที่ 5. เมื่อ Docker ติดตั้งค่าต่าง ๆ เสร็จเรียบร้อยให้รันคำสั่ง docker-compose down เพื่อหยุดการทำงานก่อนเพื่อติดตั่ง service อื่น ๆ ในขั้นตอนต่อไป

การติดตั้ง phpMyAdmin service

ขั้นตอนที่ 1. เพิ่ม phpMyAdmin service โดยเพิ่มคำสั่งดังต่อไปนี้ในไฟล์ docker-compose.yaml ให้ต่อจาก mysql service ดังแสดงต่อไปนี้

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql  
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db 

  phpMyAdmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "3001:80"
    depends_on:
      - mysql
    environment:
      - PMA_HOST=mysql
      - PMA_PORT=3306
      - MYSQL_ROOT_PASSWORD=1234
      - UPLOAD_LIMIT=200M

ขั้นตอนที่ 2. รันและทดสอบ โดยใช้คำสั่ง docker-compose up -d

ขั้นตอนที่ 3. เปิดบราวเซอร์พิมพ์ URL http://localhost:3001/ ดังแสดงต่อไปนี้ (กรอก Username: root และ Password: 1234)

ขั้นตอนที่ 4. รันคำสั่ง docker-compose down เพื่อหยุดการทำงานก่อนเพื่อติดตั่ง service อื่น ๆ ในขั้นตอนต่อไป

หมายเหตุ: นักศึกษาสามารถศึกษาการติดตั่งค่าต่าง ๆ ของ Docker PhpMyAdmin เพิ่มเติมได้ที่ https://github.com/wildscamp/docker-phpmyadmin

การติดตั้ง WordPress service

ขั้นตอนที่ 1. เพิ่ม WordPress service โดยเพิ่มคำสั่งดังต่อไปนี้ในไฟล์ docker-compose.yaml

services:
  mysql:
    image: "mysql:latest"
    restart: always
    volumes:
      - ./mysql-data:/var/lib/mysql  
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=wordpress_db 

  phpMyAdmin:
    image: phpmyadmin:latest
    restart: always
    ports:
      - "3001:80"
    depends_on:
      - mysql
    environment:
      - PMA_HOST=mysql
      - PMA_PORT=3306
      - MYSQL_ROOT_PASSWORD=1234

  wordpress:
    image: wordpress:latest
    restart: always
    ports:
      - "3002:80"
    depends_on:
      - mysql
    environment:
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_USER=root
      - WORDPRESS_DB_PASSWORD=1234
      - WORDPRESS_DB_NAME=wordpress_db
      - UPLOAD_LIMIT=200M

    volumes:
      - ./wordpress:/var/www/html
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini

ขั้นตอนที่ 2. สร้างไฟล์ uploads.ini ไว้ที่เดียวกับไฟล์ docker-compose.yaml

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───... 
        ├───docker-compose.yaml
        └───uploads.ini

ขั้นตอนที่ 3. กรอกข้อมูลในไฟล์ uploads.ini การกำหนดค่านี้จะทำให้สามารถติดตั้ง Extension หรือ Plugin โดยการ upload ขั้นตอนนี้จะทำให้ WordPress สามารถ download และติดตั้ง plugins ไฟล์ที่มีขนาดใหญ่ได้ ซึ่งปกติแล้ว PHP จะจำกัดขนาดไฟล์ในการ upload เพิ่มโค้ดดังแสดงต่อแสดงไปนี้

file_uploads = On
memory_limit = 500M
upload_max_filesize = 500M
post_max_size = 500M
max_execution_time = 600

ขั้นตอนที่ 4. รันและทดสอบ Docker services ด้วยคำสั่ง docker-compose up -d ดังแสดงต่อไปนี้ (รอประมาณ 1-2 นาทีเพื่อให้ wordpress โหลดและติดตั้งค่าง ๆ)

หลังจากรันคำสั่งรายการ files และ directories ใน C:\workspaces\it241\wordpress ควรแสดงดังต่อไปนี้

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───... 
        ├───wordpress
        │   └───... 
        ├───docker-compose.yaml
        └───uploads.ini

ตรวจสอบความถูกต้องของการติดตั้ง

รายละเอียดของ services ต่าง ๆ ที่ปรากฎในหน้า Docker Desktop ทุก services จะต้องมีสถานะ Running ดังแสดงอต่อไปนี้

ขั้นตอนที่ 5. เพิ่มโค้ดในไฟล์ wp_config.php ด้วยโค้ดด้านล่างต่อไปนี้

C:.
└───workspaces
    └───it241
        ├───mysql-data
        │   └───...
        ├───WordPress_db
        │   ├───...
        │   ├───wp_config.php <<- แก้ไขไฟล์นี้
        │   └───...
        ├───docker-compose.yaml
        └───uploads.ini

แทรกโค้ดไปในตําแหน่งที่ กําหนดให้ดังต่อไปนี้ จะทําให้การติดตั้ง Extension สามารถติดตั้งได้โดยไม่ต้องใช้ FTP Protocol (ประมาณบรรรทัดที่ 66)

...
/** The database collate type. Don't change this if in doubt. */
define('DB_COLLATE', getenv_docker('WordPress_DB_COLLATE', ''));

define('FS_METHOD', 'direct');
...

เข้าสู่ phpMyAdmin  โดยพิมพ์ที่ url : http://localhost:3001

Username: root
Password: 1234

เมื่อ login แล้วจะเข้าสู่หน้าจอ

การตั้งค่า WordPress

เข้าสู่ WordPress  โดยไปที่ url : http://localhost:3002/wp-admin จะปรากฎหน้าเว็บดังแสดงต่อไปนี้

ให้เลื่อกรายการ English (United States) จากนั้นกดปุ่ม Continue จากนั้น WordPress จะแสดงหน้าจอให้ตั้งค่าครั้งแรกต่าง ๆ ดังแสดงต่อไปนี้ (บางครั้งหน้านี้อาจไม่ปรากฎขึ้นอยู่กับเวอร์ชัน wordpress ในช่วงเวลาที่นักศึกษาทำการติดตั้ง)

เมื่อกรอกข้อมูลเสร็จแล้ว

จะแสดงหน้าเว็บให้ลงชื่อเข้าสู่ระบบ ในตอนนี้เรามีแค่ผู้ใช้เดียวคือ Admin

เมื่อเข้าสู่หน้าเว็บด้วยผู้ใช้ที่เป็น Admin จะมีรายการเมนูให้สร้าง post, page, media, user, และเครื่องมือต่าง ๆ

หากไม่ได้ลงชื่อเข้าสู่ระบบให้เข้าไปที่ลิงค์ url: http://localhost:3002

แบบฝึกหัดเพิ่มเติม

ให้นักศึกษาแก้ไขหน้า page “Simple Page” ของ WordPress โดยแสดงข้อมูล Profile ของนักศึกษาดังแสดงในตัวอย่างต่อไปนี้

** นักศึกษาทำเป็นภาษาไทยหรืออังกฤษก็ได้

** ให้นักศึกษาเพิ่มเติมข้อมูลอื่น ๆ เช่น ประวัติการศึกษา ความสามารถพิเศษ และอื่น ๆ พร้อมทั้งตกแต่งให้สวยงาม

** ให้นักศึกษา Capture หน้าจอส่งใน MS Teams Assignment เก็บ 5 คะแนน