วงแหวนเว็บ
Published on

ทำ Strapi ให้อยู่บน Docker

ทำ Strapi ให้อยู่บน Docker
ทำ Strapi ให้อยู่บน Docker

วันนี้ฤกษ์งามยามดี เจมส์เลยมาเขียนบทความเกี่ยวกับ Strapi ไว้นิดนึงครับ พอได้ในช่วงสัปดาห์ที่ผ่านมามีโอกาสได้ลองเล่น Strapi คือจริง ๆ เคยได้ยินมาสักพักและ แต่ตอนแรกคิดว่าเป็นเกี่ยวกับ Payment (ของ Payment มันชื่อ Stripe ฮ่าาาา) แต่มันบ่จ่ายยยย จริงมันคือ headless CMS จร้า

Headless CMS คืออะไร

Headless CMS คือระบบจัดการเนื้อหาที่ไม่มีส่วนหน้าบ้าน ซึ่งทำให้ส่วนหน้าบ้านเราสามารถเขียน UI มาจัดการได้ตามที่เราต้องการเลยครับ

จากที่ลองเล่นถ้าจะให้เจมส์เปรียบจริง ๆ เหมือนเป็นหน้า Admin ที่จัดการต่าง ๆ เพียงแต่สิ่งที่เราจัดการมันเป็นจัดการข้อมูลในฐานข้อมูล ซึ่งภายใน CMS จะมี API ที่ใช้ในการเรียกข้อมูลนั้น ๆ และนำไปใช้ในส่วนของ frontend

อย่างที่เกริ่นไว้ในบทความนี้เราจะมาเริ่มต้นจากการทำให้มันอยู่ใน Docker และ docker-compose up แล้ว Start Strapi ขึ้นมาให้ใช้งานได้ก่อนครับ คิดว่าในอนาคตจะเขียนบทความเกี่ยวกับการใช้งานต่าง ๆ เป็นบทความย่อย ๆ ไปอีก

มาเริ่มกันเลย

ในขั้นแรกเจมส์จะสร้าง Project ชื่อ example-strapi ขึ้นมาก่อนเน้อครับ

mkdir example-strapi && cd example-strapi

สร้าง MySQL

จากนั้นให้สร้างไฟล์ docker-compose.yaml ขึ้นมาครับ

ในที่นี้เราจะให้ Strapi ใช้ร่วมกับ MySQL เน้อครับ ขั้นแรกเดี๋ยวเราใส่โค้ดในส่วนของสร้าง MySQL ขึ้่นมาก่อนครับใส่ใน docker-compose.yaml เน้อครับ

docker-compose.yaml
version: "3.8"
services:
  database:
    image: mysql:5.7.44
    platform: linux/amd64
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=1234
      - MYSQL_DATABASE=example
      - TZ=Asia/Bangkok
    volumes:
      - ./tmp/mysql-data:/var/lib/mysql
      - ./db:/docker-entrypoint-initdb.d

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_HOST=database
    ports:
      - 8302:80

ในขั้นตอนนี้ ถ้าหากเราสั่ง run

 docker-compose up

แล้วเปิด URL: http://localhost:8302 จะพบว่าเราสามารถเข้า phpMyAdmin ได้ (ไว้จัดการ MySQL ของเรา)

โดย username จะเป็น root และ password จะเป็น 1234 (password จะตรงกับที่เรากำหนดไว้ใน docker-compose.yaml ตรง MYSQL_ROOT_PASSWORD)

ซึ่งเมื่อเรา Login เข้าไปจะพบ database ชื่อ example แสดงอยู่ (database ที่แสดงจะตรงกับที่เรากำหนดไว้ใน docker-compose.yaml ตรง MYSQL_DATABASE)

สร้าง Strapi Project

สร้าง Project Strapi ให้อยู่ใน directory ชื่อ admin โดยเราจะใช้คำสั่ง

npx create-strapi-app@latest admin

โดยมันจะมี prompt ขึ้นมาให้เรากรอกข้อมูลแต่ละอัน

  • ? Choose your installation type: ให้เราเลือก Custom
  • ? Choose your preferred language ให้เราเลือก JavaScript
  • ? Choose your default database client ให้เราเลือก mysql
  • ? Database name: ให้เราพิมพ์ example
  • ? Host: ให้เราพิมพ์ database
  • ? Port: ให้เราพิมพ์ 3306
  • ? Username: ให้เราพิมพ์ root
  • ? Password: ให้เราพิมพ์ 1234
  • ? Enable SSL connection: ให้เราเลือก No

ถ้าหากเราลอง cd เข้าไปใน admin และสั่ง run npm run develop จะพบว่า Error เพราะว่า host ที่เรากรอกไปว่า database นั้นมันหาไม่เจอ เดี๋ยวเราจะมาทำให้ admin อันนี้อยู่ใน docker แล้วเอาไป run ใน docker-compose.yaml ครับ

ขั้นแรกให้เราอยู่ใน directory admin ก่อนนะครับ จากนั้นสร้างไฟล์ชื่อ Dockerfile ขึ้นมาครับ โดยเราจะใส่ข้อมูลดังนี้ลงไปครับ

Dockerfile
FROM node:18-alpine
WORKDIR /app

COPY ./package.json .
RUN npm install
COPY . .

CMD [ "npm", "run", "develop" ]

จากนั้นให้ไปแก้ไขไฟล์ docker-compose.yaml ที่เราสร้างไว้ในตอนแรก โดยเราจะแก้เป็นแบบนี้ครับ

docker-compose.yaml
  version: "3.8"
  services:
    database:
      image: mysql:5.7.44
      platform: linux/amd64
      ports:
        - 3306:3306
      environment:
        - MYSQL_ROOT_PASSWORD=1234
        - MYSQL_DATABASE=example
        - TZ=Asia/Bangkok
      volumes:
        - ./tmp/mysql-data:/var/lib/mysql
        - ./db:/docker-entrypoint-initdb.d

    phpmyadmin:
      image: phpmyadmin/phpmyadmin
      environment:
        - PMA_HOST=database
      ports:
        - 8302:80

    admin:
      container_name: admin.example.com
      build:
        context: ./admin
        dockerfile: Dockerfile
      ports:
        - 1337:1337
      volumes:
        - ./admin:/app
        - /app/node_modules
        - /app/.tmp
        - /app/build
      depends_on:
        - database

จากนั้นให้ปิด docker-compose up อันเก่าที่เปิดใช้ตอนแรกออกก่อน โดยการกด ctrl + c แล้วให้สั่ง run docker-compose up ใหม่อีกครั้งครับ

จากนั้นลองเข้า http://localhost:1337/ จะพบว่าสามารถเข้าหน้าสร้าง administrator ได้แล้ว เย้ !!!!

เดี๋ยวบทความหน้า ถ้ามีโอกาสเดี๋ยวเราจะมาลองใช้งาน Strapi กันครับ ขอไปคิด Mini Project ก่อนเน้อครับ หากบทความนี้มีส่วนไหนผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยเน้อครับ

Github: https://github.com/jame3032002/example-strapi

แชร์ใน Facebook