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

Trần Mỹ viết ngày 27/10/2017

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

Xin chào mọi người.

Hôm nay mình xin chia sẻ kinh nghiệm về cài đặt môi trường phát triển docker cho project vue.js. Và như mọi người đã biết, bằng việc sử dụng docker chúng ta có được các lợi ích như sau :

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

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

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, tóm tắt flow 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

# 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

Ok vậy 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

Ok 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, 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.

Và thành quả, mở trên browser :
alt text

Tổng kết

Setup đơn giản project vuejs 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à đủ. Hi vọng sẽ có ích cho những ai nhập môn vuejs và docker. Hi vọng nhận được góp ý từ mọi người.

Tham khảo :

http://bytesize.xyz/creating-a-new-vue-project-with-docker/

TranMy 09-10-2017

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Trần Mỹ

8 bài viết.
64 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 3
Xin chào mọi người. Thời gian ngắn gần đây mình có tìm hiểu 1 chút về Bitcoin và Blockchain, và để củng cố kiến thức thu nạp được mình quyết định ...
Trần Mỹ viết 4 tháng trước
24 3
White
23 9
XIn chào mọi người. Thời gian gần đây mình có tìm hiểu về blockchain và golang. Mình viết bài viết này với mục đích chia sẻ và tổng hợp những kiến...
Trần Mỹ viết 1 tháng trước
23 9
White
12 7
Tạo project Laravel với Docker Hiện nay mình thấy đã có nhiều bài viết về tạo project laravel với docker trên kipalog rồi. Mọi người có thể search...
Trần Mỹ viết 7 tháng trước
12 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
64 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!