Học Docker: Sử dụng docker để xây dựng app Nuxt.js

Docker đang là hot trend hiện nay nên dạo này mình cũng tập trung tìm hiểu về nó một chút. Nhân tiện gần đây mình cũng đang nghiên cứu về Vue.js (và Nuxt.js) nên quyết định kết hợp 2 cái này lại với nhau. Dưới đây là memo các bước build môi trường docker để phát triển app Nuxt.js.

Môi trường:

1. Windows 10 Pro
2. Docker Desktop for Windows ver2.1

Cấu trúc hệ thống:

1. Môi trường cần thiết để phát triển app (nodejs, vue-cli...) chứa trong docker container.
2. Source code được sync trực tiếp từ thư mục trên windows vào docker container để có thể chỉnh sửa source code trực tiếp trên windows và thực thi trên docker container.

Cấu trúc thư mục source code

.
├── docker
│   └── nuxt
│       └── Dockerfile
├── docker-compose.yml
└── các file & thư mục khác của source code

Các bước thực hiện:

1. Cài đặt Docker Desktop for Windows (cần đăng ký tài khoản)
   https://hub.docker.com/?overlay=onboarding

2. Tạo file docker-compose.yml với nội dung sau:

   version: "3"
   services:
     nuxt:
       container_name: node-nuxt
       build: ./docker/nuxt
       image: node:nuxt
       working_dir: /home/node/app
       volumes:
         - ./:/home/node/app
       ports:
         - 4000:3000 # host:container
       environment:
         - HOST=0.0.0.0
       networks:
         - node-nuxt
       command: npm run dev
   networks:
       node-nuxt:
         driver: bridge
   

3. Tạo file Dockerfile với nội dung sau:

   FROM node:latest
   
   RUN npm install -g @vue/cli nuxt create-nuxt-app
   

4. Build docker image (thực hiện 1 lần lúc đầu tiên)

   docker-compose build
   

5. Cài đặt node_modules (thực hiện 1 lần lúc đầu tiên)

   docker-compose run --rm nuxt npm install
   

   Mặc định mỗi lần thực hiện lệnh docker-compose run sẽ có 1 container mới được tạo ra với tên có chứa chuỗi ký tự random. Option --rm dùng để tự động xóa container này sau khi thực hiện xong script.

6. Khởi động docker container

   docker-compose up
   

   Sau khi khởi động, truy cập vào http://localhost:4000 để xem màn hình của nuxt.js.

7. Khi sử dụng Docker trên windows, chức năng Hot Reloading mặc định của nuxt.js không hoạt động được. Cần thêm thiết lập sau vào file nuxt.config.js để sửa vấn đề này:

   watchers: {
     webpack: {
       poll: true
     }
   },
   

   Tham khảo: https://github.com/nuxt/nuxt.js/issues/2481