• About
  • Advertise
  • Privacy & Policy
  • Contact
NQ NEWS
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • Tất cả
    • Bí ẩn - Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game - Trò chơi
    • Kỹ năng
    • Là gì?
    • Mẹo hay
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Vivo Y33s

    3 cách chụp ảnh đẹp trên Vivo Y33s với nhiều hiệu ứng, filter độc đáo

    cách xem tin nhắn đã thu hồi trên messenger trên điện thoại

    Cách xem tin nhắn đã thu hồi trên Messenger cho điện thoại Android

    Cách hẹn giờ gửi tin nhắn chúc mừng

    Cách hẹn giờ gửi tin nhắn chúc mừng trên điện thoại vào dịp đặc biệt

    cách nhập code Play Together

    Nhập Full Code Play Together MỚI NHẤT hôm nay nhận quà khủng 2022

    • Bí ẩn – Chuyện lạ
    • Câu chuyện Khoa học
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Cưới hỏi
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
  • Nhịp sống công nghệ
    • Tất cả
    • Ảnh đẹp Khoa học
    • Anh tài công nghệ
    • Ảnh, đồ họa
    • Bình luận công nghệ
    • Chuyện công nghệ
    • Công nghệ
    • Công nghệ mới
    • Dịch vụ công trực tuyến
    • Dịch vụ nhà mạng
    Cuoc Thi Bao Mat 700 1

    Hai chuyên gia bảo mật Việt Nam giành giải thưởng 40.000 USD trong cuộc thi tấn công mạng Pwn2Own 2021

    He Tri Thuc Viet So Hoa 650 1

    Trải nghiệm sử dụng itrithuc.vn – dự án hệ tri thức Việt được số hóa đầu tiên

    Viettel Kiem Tra Thong Tin Thue Bao 700 1

    Kiểm tra thông tin thuê bao Viettel như thế nào?

    Hang Dien Thoai Lon Nhat 640 1

    Danh sách những hãng smartphone lớn nhất thế giới (cập nhật liên tục)

    Ai Gpt 3 Cua Elon Musk Vua Viet Ca Mot Bai Xa Luan Gay Chan Dong Tren Bao Anh 640 1

    AI viết bài xã luận gây chấn động trên báo Anh, tuyên bố sẽ không hủy diệt loài người

    V120 Viettel Dang Ky 640 1

    Cách đăng ký gói V120 Viettel

    Youtube Da Ra Doi Nhu The Nao Doi Net Ve De Che Youtube640 1

    YouTube đã ra đời như thế nào? Đôi nét về ‘đề chế’ YouTube

    Apple Ung Dung Nhan Dien Airtag Tren Android700 1

    Apple phát hành ứng dụng nhận diện AirTag trên Android

    He Dieu Hanh Se Khong Con Co The Su Dung Whatsapp640 1

    Đây là những hệ điều hành không thể tải WhatsApp trong thời gian tới

Không có kết quả
Xem tất cả kết quả
NQ NEWS
Không có kết quả
Xem tất cả kết quả
Trang chủ Quản trị hệ thống

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

@admiz bởi @admiz
03/05/2021
trong Quản trị hệ thống
0
Cài đặt Môi Trường Phát Triển Docker Cho Project Vue.js 60902c4180dc8.jpeg

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. 

Nội dung

  • 1 Lợi ích khi sử dụng Docker
  • 2 Chuẩn bị : Docker
  • 3 Bước 1 : Tạo project trống
  • 4 Bước 2 : Build docker image npm và vuejs.
  • 5 Bước 3 : Tạo template source code
  • 6 Bước 4 : Tải các node_modules
  • 7 Bước 5 : Chạy project

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.

>> Xem thêm:  Post Views: 58

Có thể bạn quan tâm bài viết

Quicktime Player Logo650 1
macOS

Cách ghép video trên macOS bằng QuickTime Player

26/12/2021
Kali Linux 2021 4 700 1
Linux

Kali Linux 2021.4: Thêm 9 công cụ mới và hỗ trợ tốt hơn cho Apple M1

26/12/2021
Openbsd La Gi 1
Linux

OpenBSD là gì? Đây là mọi thứ bạn cần biết về hệ điều hành này!

26/12/2021
Mac Os Xoa Ung Dung Cai Dat Logo640 1
macOS

Cách gỡ, xóa ứng dụng trên Mac OS

26/12/2021
Tim Thu Vien Anh Photos Library Tren May Mac700 1
macOS

Hướng dẫn tìm thư viện ảnh Photos Library trên máy Mac

26/12/2021
So Sanh Macbook Pro Macbook Air Va Ipad Pro 1
macOS

So sánh MacBook Pro 13 inch với MacBook Air và iPad Pro

26/12/2021

Bài mới nhất

A/b Testing Là Gì Và 4 Bí Quyết Triển Khai A/b Testing đạt Hiệu Quả 612d041d91bdc.jpeg

A/B Testing là gì và 4 bí quyết triển khai A/B Testing đạt hiệu quả

29/01/2023
Kích Thước ảnh đại Diện Facebook Chuẩn Nhất Năm 2020 612d0424a3475.jpeg

Kích thước ảnh đại diện facebook chuẩn nhất năm 2020

29/01/2023
Top 12 Phần Mềm Quản Lý Bán Hàng Miễn Phí Tốt Nhất Hiện Nay 612cfef8d98cf.jpeg

Top 12 phần mềm quản lý bán hàng miễn phí tốt nhất hiện nay

28/01/2023
Bạn Có Biết Bộ Nhận Diện Thương Hiệu Gồm Những Gì? 612d043067116.jpeg

Bạn có biết bộ nhận diện thương hiệu gồm những gì?

28/01/2023
Tại Sao Landing Page Bán Hàng Hiệu Quả Hơn Website Thông Thường? 612d035564a6c.jpeg

Tại sao landing page bán hàng hiệu quả hơn website thông thường?

27/01/2023

Categories

  • Android
  • Ảnh đẹp Khoa học
  • Anh tài công nghệ
  • Ảnh, đồ họa
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Bí ẩn – Chuyện lạ
  • Bình luận công nghệ
  • Câu chuyện Khoa học
  • Chăm sóc Nhà cửa
  • Chăm sóc Sức khỏe
  • Chụp ảnh – Quay phim
  • Chuyện công nghệ
  • Công nghệ
  • Công nghệ mới
  • Cưới hỏi
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ ngân hàng
  • Dịch vụ nhà mạng
  • DIY – Handmade
  • Đời sống thường thức
  • Game – Trò chơi
  • Giải pháp bảo mật
  • Giải trí
  • Giáng sinh – Noel
  • Giao tiếp, liên lạc, hẹn hò
  • Hệ thống
  • Hệ thống
  • Hỗ trợ học tập
  • Họp, học trực tuyến
  • Internet
  • iPhone
  • Khám phá khoa học
  • Khám phá thiên nhiên
  • Khoa học công nghệ
  • Khoa học Vũ trụ
  • Khoa học vui
  • Kiến thức bảo mật
  • Kiến thức căn bản
  • Kiến thức cơ bản
  • Kiến thức tổng hợp
  • Kinh nghiệm Du lịch
  • Kỹ năng
  • Là gì?
  • Làm đẹp
  • Lập trình
  • Linux
  • Linux OS
  • Lưu trữ đám mây
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • Máy công cụ
  • Máy hút mùi
  • Mẹo hay
  • Mẹo vặt
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Nhà thông minh
  • Phần cứng
  • Phần cứng
  • Phần Mềm
  • Phân phối
  • Quà tặng
  • Quản trị hệ thống
  • Quạt các loại
  • Quiz công nghệ
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tải game
  • Tấn công mạng
  • Tăng tốc máy tính
  • Tết 2022
  • Tết Trung thu
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Tivi
  • Trí tuệ nhân tạo (AI)
  • Tủ lạnh
  • Uncategorized
  • Ứng dụng
  • Ứng dụng văn phòng
  • Video Khoa học
  • Video, phim, nhạc
  • Website
  • Windows Server 2012

Tags

#app #chatbot #chatbot tự động #CRM #Email Marketing #Kiến thức cơ bản #Techblog #Thiết kế website Android apple cách chơi Pokémon Go Gmail Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền máy tính học css học python học SQL ios iphone iphone 12 Microsoft minecraft mssql MS SQL Server Pokémon Go PUBG Mobile python Raspberry Pi Samsung smartphone SQL Server thiết bị số tivi tài liệu python windows windows 10 YouTube điện thoại di động điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

Không có kết quả
Xem tất cả kết quả
  • Home

© 2022 Pha Le Solution

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?