Cài đặt môi trường phát triển Docker cho project Vue.js
Docker là 1 dịch vụ giúp thống nhất môi trường cài đặt và Vuejs là 1 frontend framework với nền tảng là javascript và nodejs. Chi tiết mọi người có thể tham khảo trên trang web chính thức của Docket. CùngBizfly Cloud tìm hiểu những thông tin liên quan đến Docker ngay tại bài viết này nhé.
Lợi ích khi sử dụng Docker
- Member trong team không phải lo lắng về việc nodejs version của mình có thống nhất với mọi người hay không.
- Dễ dàng cài đặt và tiết kiệm thời gian setup môi trường.
Chuẩn bị : Docker
- Môi trường host: Ubuntu 16.04.02 LTS
Và Docker là tất cả những gì mình cần. Npm và vue mình sẽ cài vào image của Docker.
Tiếp theo mình sẽ trình bày các bước thực hiện. Các bước thực hiện cụ thể như sau:
1. Tạo project trống
2. Build docker image npm và vuejs
3. Tạo template source code.
4. Tải các node_modules
5. Chạy project
Bước 1 : Tạo project trống
Bật terminal lên, tạo 1 directory mới và chuyển current directory vào đây
mkdir sample-vue
cd sample-vue
Bước 2 : Build docker image npm và vuejs.
Ta tạo Dockerfile cho docker image này :
# base image là node:8
FROM node:8
Giờ hãy cài thêm vue-cli ở global, optional
RUN npm install -g vue-cli
Khi login từ host vào container, mặc định sẽ là vào đây.
WORKDIR /opt/app/
Với base image là node là đã đủ để chạy, mình cài thêm vue-cli vì nghĩ trên môi trường phát triển có thể sẽ cần đến nó sau này, môi trường production mình nghĩ hoàn toàn không cần đến.
Vậy là ta đã tạo xong file cấu hình. Giờ ta sẽ build nó.
docker build -t username/projectname .
username/projectname ở trên là phần mà ta có thể tùy ý chọn tên cho phù hợp. username thường là tên tài khoản Docker Hub, nhưng ta cũng không cần chú ý đến nó trong phạm vi bài viết này.
Build thành công ta sẽ thấy như sau:
my@mymy:~/Projects/vue3$ docker build -t mytv/vue .
Sending build context to Docker daemon 2.048kB
Step 1/3 : FROM node:8
8: Pulling from library/node
aa18ad1a0d33: Already exists
15a33158a136: Already exists
f67323742a64: Already exists
c4b45e832c38: Already exists
f83e14495c19: Already exists
41fea39113bf: Already exists
f617216d7379: Pull complete
cbb91377826f: Pull complete
Digest: sha256:a8918e06476bef51ab83991aea7c199bb50bfb131668c9739e6aa7984da1c1f6
Status: Downloaded newer image for node:8
---> 9ea1c3e33a0b
Step 2/3 : RUN npm install -g vue-cli
---> Running in a11cff4f870b
npm info it worked if it ends with ok
....
Removing intermediate container 31397476982b
Successfully built c94d549fb64a
Successfully tagged mytv/vue:latest
Vậy là mình đã có image chứa các package cần thiết. Tiếp theo mình sẽ tạo template source code.
Bước 3 : Tạo template source code
docker run -it -v $(pwd):/opt/app username/projectname /bin/bash
• docker run: chạy container với image ta vừa build là username/projectname
• -it: -i yêu cầu docker cung cấp cho ta stdin stream và -t yêu cầu docker gắn vào nó terminal driver, để ta tương tác với stdin
• -v $(pwd):/opt/app: mound directory hiện tại (pwd) với /opt/app trong container, module tải trong container cũng sẽ thấy trên host và sửa source code trên host cũng phản ánh trên container.
• cmd: cho ta 1 shell để chạy command trên container
Sau khi chạy câu lệnh, nếu thành công ta sẽ thấy :
Vậy ta đã ở trong container. Và vì nó đã có sẵn npm và vue-cli, ta sẽ dùng vue-cli để tạo template source code bằng câu lệnh :
vue init webpack
webpack là 1 trong những template mà vue-cli cung cấp sẵn. Ta có thể chọn những template khác, các bạn có thể tham khảo ở vue-cli Github.
Sau khi chạy câu lệnh, ta sẽ được hỏi 1 số option về việc init project dạng Y/N. Mặc định là yes, ta có thể nhập theo hướng dẫn in ra đó hoặc tạm thời cứ enter pass qua hết mình nghĩ cũng không vấn đề gì.
Chạy thành công ta sẽ thấy source được generate ra như sau (trước đó chỉ có duy nhất Dockerfile):
root@df7973abb727:/opt/app# ls
Dockerfile README.md build config index.html package.json src static test
Vậy là template source code đã chuẩn bị xong. Ta cần cài thêm thư viện (node_modules) cho nó.
Bước 4 : Tải các node_modules
Trong container mà ta đang đứng ở bước 3 trên, chạy câu lệnh:
npm install
Ta có kết quả là node_modules thư mục được tạo ra.
Bước 5 : Chạy project
Như vậy ta đã sẵn sàng để chạy project. Hiện tại ở bước 4 mình đang ở trong container. Trên thực tế, khi chạy câu lệnh sẽ tiện hơn nếu ở ngoài host, vậy mình sẽ thoát ra host:
root@6a5dc99ef51d:/opt/app# exit
Để tiện dùng, mình sẽ đưa lệnh chạy vào bash script, mình đặt tên là dev
touch dev
Lệnh chạy:
echo "docker run -it -p 8080:8080 -v $(pwd):/opt/app username/projectname npm run dev" > dev
chmod 777 dev
So với command run và vào container ở bước 3, mình có 2 thay đổi đó là :
• -p 8080:8080: Mount port 8080 trên máy host vào port 8080 trên container.
• npm run dev: Khởi tạo và chạy dev-server, tương đương với node build/dev-server.js
Vậy là ta đã chuẩn bị xong script, tiếp theo là chạy thôi.
./dev
Nếu thành công, terminal sẽ hiện ra như sau:
DONE Compiled successfully in 2152ms 06:12:09
> Listening at http://localhost:8080
Trên container có thể sau khi chạy sẽ có báo lỗi như sau :
(node:17) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:17) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Nếu chạy trực tiếp trên host, thì sẽ không có lỗi này, có vẻ lỗi này chỉ xảy ra trên container. Nếu chạy trên host thì sau khi gõ command chạy thành công, tự động sẽ gọi đến browser mở đến url này, có lẽ lỗi này do trong container thì không thể gọi đến browser trên host luôn được, nhưng mình nghĩ cũng không ảnh hưởng khi developement.
Giờ hãy mở browser để xem thành quả, mở trên browser:
Vậy là Setup đơn giản project vue.js với Docker của mình đến đây là hết. Thực tế có lẽ sẽ phải setup phức tạp hơn 1 chút ví dụ như reverse proxy server như nginx, lúc đó có lẽ ta sẽ dùng docker-compose và thêm build thêm 1 image nữa, nhưng cơ bản để chạy được, phát triển được thì mình nghĩ đến đây là đủ. Hy vọng bài viết này sẽ có ích cho những ai nhập môn vue.js và Docker.
>> Xem thêm: Cơ bản về Docker Network
