Dockerize React App with a Docker multi-staged build

Hello mọi người!
Hôm nay mình sẽ deploy react app lên server sử dụng docker. Ok, vào việc luôn nhỉ?

Nội dung:
- Install Docker On Ubuntu 18.04.
- Dockerizing a React App with Nginx.

I.  Install Docker On Ubuntu 18.04

- Truy cập vào server và cài các gói dịch vụ cần thiết:  

sudo apt-get update
sudo apt-get install curl apt-transport-https ca-certificates software-properties-common

Bây giờ chúng ta thêm Repositories Docker

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update

Đảm bảo rằng bạn đang cài từ Docker repo thay vì Ubuntu repo bằng lệnh sau: 

apt-cache policy docker-ce

Giờ chỉ cần dùng lệnh apt để install Docker lên Ubuntu

sudo apt-get install docker-ce

Kiểm tra tình trạng docker sau khi cài: 

sudo systemctl status docker

À mình dùng cả docker compose nữa nên mình sẽ cài thêm bằng lệnh sau: 

sudo apt-get install docker-compose

II. Dockerizing a React App with Nginx

- Đầu tiên chuẩn bị project reactjs.

1. Build Image

- Để dockerize một project trước hết chúng ta cần phải cấu hình Dockerfile để định nghĩa Image với môi trường và những thứ cần thiết cho project.

Cấu hình Dockerfile

1. Nói với thằng docker rằng t cần môi trường với Image có tên là node:10-alpine. Tại sao là alpine?
- Alpine Linux nhỏ hơn nhiều so với hầu hết các base Image khác (~ 5MB). 
- Nhẹ, tối giản và tập trung vào bảo mật cao.
Giai đoạn này gọi là buid. ( as build )
2. Workdir /app: trong image tạo thư mục app và chuyển đến đường dẫn /app.
3. Copy toàn bộ code ở môi trường gốc.
4. Cài đặt các package.
5. Buid project.
6. Sang giai đoạn mới. FROM nginx:stable-alpine. Ý là nói với thằng docker là  t cần thêm image nginx nữa. 
Nginx là cái gì? Thì nginx ở đây là webserver. Nginx rất xịn nhé ( Khoai khi mới tiếp cập, khi đã giác ngộ thì bánh cuốn vc. Chắc sẽ viết thêm về nginx sau này).
7. Copy files build ở giai đoạn buid phía trước sang /usr/share/nginx/html, đây chính là nơi Nginx sẽ tìm tới và trả về cho user khi user truy cập ở trình duyệt.
8. Copy files config nginx sang.
9. App sẽ chạy ở port 80.
10. Khới động nginx. 

File config nginx.


File .dockerignore

File docker-compose.yml

Đặt tên cho ứng dụng mình. Đề cập tới Dockerfile sử dụng. Mapping port 80 với port 80 của ứng dụng. ( port 80 bên trái là port của server - môi trường gốc, port 80 bên phải là port của container).

Giờ ta chỉ cần run container

docker-compose up

Chạy nền thì sử dụng: docker-compose -d up

Vậy là mình đã sử dụng docker để deploy react app lên server sử dụng công nghệ ảo hóa.

Lợi ích:

- Docker cho bạn môi trường mục tiêu cụ thể.

- Môi trường trong docker độc lập với môi trường gốc ( không bị xung đột, phụ thuộc lẫn nhau).

- Docker có nhiều tiện tích đi kèm ( Kubernetes: tự động scale, tự động deploy, tự động và tự động)

- .......

III. Docker

- Khái niệm: Docker là một dự án mã nguồn mở giúp tự động triển khai các ứng dụng Linux và Windows vào trong các container ảo hóa. Docker cung cấp một lớp trừu tượng và tự động ảo hóa dựa trên LinuxDocker là một dự án mã nguồn mở giúp tự động triển khai các ứng dụng Linux và Windows vào trong các container ảo hóa. Docker cung cấp một lớp trừu tượng và tự động ảo hóa dựa trên Linux.

- Docker có hai khái niệm chính cần hiểu, đó là image và container.

1. Image 

- Image sẽ định nghĩa cho 1 môi trường và những thứ có trong môi trường đó. Ứng dụng của ta muốn chạy được thì cần phải có Image.

Ví dụ: trong image có thể định nghĩa các thành phần: Ubuntu, Mysql,...

- Để tạo Image ta cần tạo một Dockerfile.

Một số lệnh trong Dockerfile:

FROM <base_image>:<phiên_bản>: đây là câu lệnh bắt buộc phải có trong bất kỳ Dockerfile nào. Nó dùng để khai báo base Image mà chúng ta sẽ build mới Image của chúng ta.

MAINTAINER <tên_tác_giả>: câu lệnh này dùng để khai báo trên tác giả tạo ra Image, chúng ta có thể khai báo nó hoặc không.

RUN <câu_lệnh>: chúng ta sử dụng lệnh này để chạy một command cho việc cài đặt các công cụ cần thiết cho Image của chúng ta.

CMD <câu_lệnh>: trong một Dockerfile thì chúng ta chỉ có duy nhất một câu lệnh CMD, câu lệnh này dùng để xác định quyền thực thi của các câu lệnh khi chúng ta tạo mới Image.

ADD <src> <dest>: câu lệnh này dùng để copy một tập tin local hoặc remote nào đó (khai báo bằng <src>) vào một vị trí nào đó trên Container (khai báo bằng dest).

ENV <tên_biến>: định nghĩa biến môi trường trong Container.

ENTRYPOINT <câu_lệnh>: định nghĩa những command mặc định, cái mà sẽ được chạy khi container running.

VOLUME <tên_thư_mục>: dùng để truy cập hoặc liên kết một thư mục nào đó trong Container.

WORKDIR: Thiết lập thư mục đang làm việc cho các chỉ thị khác như: RUN, CMD, ENTRYPOINT, COPY, ADD,…

EXPOSE: khai báo port lắng nghe của image

Câu lệnh build image:

docker build -t “name image” .

Ở cuối có 1 dấu "chấm" ý bảo là Docker hãy build Image với context (bối cảnh) ở folder hiện tại này. Và Docker sẽ tìm ở folder hiện tại Dockerfile và build.

Để show: docker images

Xóa image: docker rmi “mã image”

2. Container

- Container: Tương tự như một máy ảo, xuất hiện khi mình khởi chạy image.

docker container run -p port:port  “name images”

-p port:port ( port trái là port môi trường gốc, port phải là port của container

Truy cập vào container và gắn terminal bash vào nó

docker exec -it <container id> /bin/bash


Cảm ơn mọi người đã đọc đến đây. Nếu cảm thấy hay và có ích thì hãy chia sẻ để mọi người cùng biết thêm kiến thức.

Tài liệu tham khảo:
https://docs.docker.com/get-started
https://dev.to/bahachammakhi/dockerizing-a-react-app-with-nginx-using-multi-stage-builds-1nfm
https://viblo.asia/p/docker-nhung-kien-thuc-co-ban-phan-1-bJzKmM1kK9N


Nodejs | Lỗi khi khởi tạo project Strapi và cách khắc phục

Hey! Mình là HQK. Như bao ngày đẹp trời khác, mình ngồi vào bàn với cái máy tính quen thuộc. Nhìn trời, nhìn mây, nhìn cây, nhìn lá, nhìn các thứ cần nhìn,....hahaha. Nay mình được giao tìm hiểu về thằng Strapi, uây, hào hứng vãi shit, xem demo thấy xịn xò đấy, chất lượng phết. Lên đọc docs, các thứ, xong xuôi, mình bắt tay vào build thử một cái demo như docs hướng dẫn.



Ok! và mình ngồi đợi, và đơi, vãi shits, build lâu éo chịu được, chắc lỗi rồi. Rồi mình thử những cách khác, ôi vãi khá đau đầu khi nó đều bị như thế.

Mình định chụp ảnh cho các bạn xem lỗi ntn, nhưng mà mình fix rồi, lười không muốn xóa, haha các bạn thông cảm nhé.
Triệu chứng khi là nó đã tạo được project cho mình rồi, nhưng khi cài các thư viện bên ngoài vào nó bị lỗi, nên nó cứ quay mãi một hồi lâu.
- Bắt đầu fix thôi, mình bắt đầu thử vài keyword search gg xem, uây thằng này tài liệu ít vãi. Mò mẫm đọc và đọc, rồi mình fix, éo được, vừa cay vừa cáu. Mình đã đọc đến trang thứ 6 của gg và bắt đầu chán, bất lực. Chẳng nhẽ lại phải cài lại win với cái bug này, hay sang ubuntu code... suy nghĩ này bắt đầu nảy sinh trong đầu mình. Rồi mình quyết định là éo. Mình bắt đầu đọc xem cmd nó báo lỗi gì. Ồ! Một lúc lâu cmd nó trả về hàng dài những cảnh báo, trong đó có Error while installing dependencies. Sống rồi! chắc là do cài thư viện nó ko nhận được, rồi mình nghĩ vào cài lại cho nó xem sao.


Rồi mình chạy lại, fu*k, vẫn báo lỗi thư viện, nhưng lần này nó báo lỗi thư viện cụ thể hơn là do thằng sqlite3. Mình tiếp tục cài lại. Strapi mà tốn thời gian của mình vậy ư, cáu. Khi cài xong. Mình chạy yarn start. Wtf chạy được rồi, nhưng nó báo not found.



Không sao, mình quên chưa build lại. Npm run build. Tốt đã chạy xong, vui vãi, .....

Nói chung mình đã làm như sau để fix:
1. npm i
2. npm run build
3. npm run develop
Ok. Chúc các bạn không bị như mình, haha, mà có bị thì có thể làm theo mình, chúc các bạn success.
Đây là trang web của mình:
https://khanhkitin.herokuapp.com


React.js | Làm sao code của bạn trở nên tốt hơn!
Hey! Mình là HQK. Đợt này mình đang được nghỉ dịch COVID-19. Nên mình có thời gian lên đây viết blog....chia sẻ cùng mọi người, cùng nhau học tập và phát triển, hey zô. Vào luôn chủ để chính đây.

1. Naming
-
Sử dụng .jsx cho React components
- Tên file đặt theo PascalCase. Ví dụ: SearchCar.jsx