0
0
Lập trình
Harry Tran
Harry Tran106580903228332612117

Hướng Dẫn Xây Dựng Container Docker Cho Ứng Dụng Vue.js - Laravel - MySQL - PHP - Composer - NPM - Rector - Swagger - Nginx

Đăng vào 3 tuần trước

• 4 phút đọc

Giới Thiệu

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước để xây dựng container Docker cho các thành phần của một ứng dụng bao gồm: Laravel (app), Vue.js (client), MySQL, Nginx, và các công cụ hỗ trợ như Swagger, Rector.

Bạn sẽ học cách sử dụng lệnh cơ bản để kiểm tra mã nguồn với PHPStan và chất lượng mã với Rector.

Phiên bản

Phần 1: Container MySQL

1.1 Hướng Dẫn Từng Bước

  • Tạo tệp docker-compose.yml cho container MySQL
  • Sử dụng image: mysql/mysql-server:8.0 để quản lý dữ liệu.

docker-compose.yml:

yaml Copy
mysql:
  container_name: mysql
  image: mysql/mysql-server:8.0
  restart: unless-stopped
  tty: true
  ports:
    - "3309:3306"
  environment:
    MYSQL_DATABASE: linebot
    MYSQL_USER: hivanmanh
    MYSQL_PASSWORD: hivanmanh
    MYSQL_ROOT_PASSWORD: hivanmanh
    SERVICE_TAGS: dev
    SERVICE_NAME: mysql
  networks:
    - laravel

Giải Thích

  • container_name: Tên của container.
  • restart: Chế độ khởi động lại trong trường hợp container tắt.
  • tty: Thiết lập terminal TTY cho container.
  • ports: Ánh xạ cổng 3306 từ container ra 3309 trên máy chủ.
  • environment: Biến môi trường cần thiết để kết nối đến cơ sở dữ liệu.

1.2 Kết Quả

Phần 2: Container Ứng Dụng Laravel

2.1 Hướng Dẫn Từng Bước

  • Sắp xếp tệp và thư mục, chứa mã nguồn của Laravel, PHPStan, Rector, Swagger.
  • Tạo tệp php.dockerfile để xây dựng container cho ứng dụng, sử dụng PHP và Composer.

docker-compose.yml của Container App:

yaml Copy
app:
  container_name: app
  build:
    context: ./docker
    dockerfile: php.dockerfile
    args:
      - UID=${UID:-1000}
      - GID=${GID:-1000}
  ports:
    - "9000:9000"
  volumes:
    - ./contents:/var/www/html:delegated
  working_dir: /var/www/html
  tty: true
  entrypoint:
    - sh
    - -c
    - |
      composer install &&
      php artisan migrate:refresh --seed &&
      php-fpm -y /usr/local/etc/php-fpm.conf -R
  networks:
    - laravel

Giải Thích

  • Tương tự như cấu hình MySQL, các thông số này chống lại việc khởi động và quản lý mã nguồn của Laravel.

2.2 Kết Quả

Sử dụng lệnh docker ps để kiểm tra các container đang chạy. Vào container ứng dụng với docker exec -it app sh để sử dụng Composer, PHP, Artisan.

Phần 3: Container Nginx

3.1 Hướng Dẫn Từng Bước

  • Xây dựng container Nginx để phục vụ ứng dụng Laravel.
  • docker-compose.yml cho Nginx:
yaml Copy
nginx:
  container_name: nginx
  build:
    context: ./docker
    dockerfile: nginx.dockerfile
    args:
      - UID=${UID:-1000}
      - GID=${GID:-1000}
  ports:
    - "99:80"
  volumes:
    - ./contents:/var/www/html:delegated
  depends_on:
    - app
    - mysql
  networks:
    - laravel

Giải Thích

  • depends_on: Đảm bảo các container app và mysql được khởi động trước Nginx.

3.2 Kết Quả

Truy cập: http://localhost:99/

Phần 4: Container Vue.js

4.1 Hướng Dẫn Từng Bước

  • Xây dựng container Vue.js với Node.js.
  • docker-compose.yml cho Client:
yaml Copy
client:
  image: node:18.14.2
  container_name: client
  volumes:
    - ./contents/client:/var/www/html/client:delegated
  ports:
    - "8089:8080"
  working_dir: /var/www/html/client/
  entrypoint:
    - sh
    - -c
    - |
      npm install &&
      npm run serve &&
      tail -f /dev/null
  networks:
    - laravel

Giải Thích

  • entrypoint: Thực hiện cài đặt npm và khởi động ứng dụng Vue.js.

4.2 Kết Quả

Truy cập: http://localhost:8089/login

4.3 Đọc Thêm

  • Cách khắc phục lỗi hot reload trong Vue.js.

Phần 5: Container Rector

5.1 Hướng Dẫn Từng Bước

  • Sử dụng Rector để kiểm tra chất lượng mã.
  • docker-compose.yml cho Rector:
yaml Copy
rector:
  container_name: rector
  build:
    context: ./docker
    dockerfile: rector.dockerfile
    args:
      - UID=${UID:-1000}
      - GID=${GID:-1000}
  volumes:
    - ./contents:/var/www/html
  working_dir: /var/www/html
  depends_on:
    - app
  tty: true
  entrypoint:
    - sh
    - -c
    - |
      cd tools/rector &&
      composer install &&
      tail -f /dev/null
  networks:
    - laravel

Giải Thích

  • Đây là cấu hình để đảm bảo rằng Rector có thể chạy và kiểm tra mã nguồn PHP.

5.2 Kết Quả

Chạy lệnh composer rector-dry hoặc composer rector-process để xem kết quả.

Phần 6: Container Swagger

6.1 Hướng Dẫn Từng Bước

  • Sử dụng Swagger trong Laravel để tạo tài liệu API.
  • docker-compose.yml cho Swagger:
yaml Copy
l5-swagger-app:
  image: l5-swagger-app
  container_name: swagger
  restart: "no"
  build:
    context: ./docker
    dockerfile: swagger.dockerfile
  volumes:
    - ./contents:/app/l5-swagger-app:rw
  ports:
    - "7777:80"
  depends_on:
    - mysql
    - app
    - rector
    - client
  networks:
    - laravel

Giải Thích

  • Cấu hình cho Swagger đảm bảo tài liệu API được tạo ra chính xác và có thể truy cập dễ dàng qua trình duyệt.

6.2 Kết Quả

Truy cập: http://localhost:7777/api/documentation để xem tài liệu API của bạn.

6.3 Đọc Thêm

  • Các tài liệu chính thức về Swagger và Laravel.

source: viblo

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào