Cài đặt môi trường phát triển Docker cho project Vue.js

0 Comments

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.

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

Thông tin docker trên môi trường của mình:
– Docker: Docker version 17.06.0-ce, build 02c1d87

– 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.

Project mình sẽ cần npm và vuejs để chạy, và mình sẽ tạo 1 image có chứa nó sẵn.
Có thể các bạn sẽ hỏi vậy package đã được cài rồi thì tiếp theo source code ở đâu? Mình sẽ không tạo source code thủ công mà sẽ dùng vue-cli để tạo template source code, vue-cli có được sau khi cài đặt npm.

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 :

root@df7973abb727:/opt/app#

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:

Ảnh 18.
Kết luận

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.

Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *