Merge pull request #7 from FCJ-DNTU/content/3456789

Add content for section 3, 4, 5, 6, 7, 8, 9

content/3-prepare-for-deployment/3.1-push-image-to-ecr/_index.vi.md

@@ -5,3 +5,44 @@ weight = 1
 chapter = false
 pre = "<b>3.1. </b>"
 +++
+
+#### Tải image lên ECR
+
+Trước tiên, vào trong giao diện ECR Console
+
+- Chọn image của Frontend
+- Copy **URI**
+
+**INSERT IMAGE HERE**
+
+Vào lại EC2 mà chúng ta đã cấu hình trước đó
+
+- Vào trong thư mục của dự án.
+- Vào trong thư mục **frontend**.
+- Dùng câu lệnh bên dưới và thay "image-uri" thành image uri tương ứng của bạn.
+
+```bash
+sudo docker build . -t "image-uri":latest -f Dockerfile.prod
+```
+
+**INSERT IMAGE HERE**
+
+{{% notice note %}}
+Ở trong thư mục **frontend** này, bạn có thể thấy có 2 docker file là **Dockerfile** và **Dockerfile.prod** và 2 file config của nginx là **default.conf** và **default.conf.template**. Với docker file, thì **Dockerfile.prod** nó khác biệt ở chỗ là Docker sẽ sao chép file **default.conf.template** sang thư mục **/etc/nginx/templates** để trong quá trình build thì có thể dùng lệnh `envsubst` để có thể thay thế các tham số **${BACKEND_HOST}** và **${BACKEND_PORT}** trong file **default.conf.template**. Sau khi được thay thế xong thì file template này sẽ được nginx dùng để cấu hình. Hai thông số này khi cấu hình về sau thì mình sẽ giải thích rõ hơn.
+{{% /notice %}}
+
+Sau khi build image xong, thì giờ chúng ta sẽ đổi sang Root User để có thể tải image lên trên ECR.
+
+```bash
+docker push "image-uri":latest
+```
+
+**INSERT IMAGE HERE**
+
+Giờ thì mình sẽ vào lại trong ECR Console
+
+- Vào trong frontend repository (tên là `fcjresbar-fe`)
+
+**INSERT IMAGE HERE**
+
+Ok vậy thì chúng ta đã có thể đẩy được image mới lên trên ECR. Trong bài này mình sẽ dùng `latest` để gắn nhãn cho Docker image, nhưng thực chất thì các bạn nên đánh số version cho mỗi tag mà các bạn thay đổi để quản lý version tốt hơn, có thể tham khảo hơn ở đây: [https://semver.org/](https://semver.org/)

content/3-prepare-for-deployment/3.2-push-image-to-dockerhub/_index.vi.md

@@ -5,3 +5,26 @@ weight = 2
 chapter = false
 pre = "<b>3.2. </b>"
 +++
+
+#### Tải image lên Dockerhub
+
+Ở trong bước trước thì chúng ta đã đẩy lên ECR thành công, trong bước này thì chúng ta sẽ tải image lên trên Dockerhub.
+
+- Đăng xuất (xoá ECR Credential) ECR khỏi Docker với `docker logout`.
+- Và tiến hành đăng nhập với `docker login -u "your-docker-username"`.
+
+**INSERT IMAGE HERE**
+
+Liệt kê lại các Image đang có, giờ chúng ta sẽ không build lại nữa, mà chỉ cần thêm một tag khác cho Dockerhub là được. Gắn tag xong thì liệt kê lại thì mình sẽ thấy tag mới đã được thêm.
+
+**INSERT IMAGE HERE**
+
+Giờ thì tiếp tục tải image này lên Dockerhub
+
+**INSERT IMAGE HERE**
+
+Và kiểm tra lại kết quả
+
+**INSERT IMAGE HERE**
+
+Như vậy thì chúng ta đã tải image lên cả ECR và Dockerhub. Giờ thì bạn có thể dùng image ở bất cứ Registry nào để triển khai Frontend Service.

content/3-prepare-for-deployment/_index.vi.md

@@ -5,3 +5,12 @@ weight = 3
 chapter = false  
 pre = "<b>3. </b>"  
 +++
+
+Để có thể triển khai được ứng dụng Node JS và Nginx với React, thì chúng ta cần phải chuẩn bị các Docker Images cho cả NodeJS và Nginx React. Docker Image đóng vai trò giống như Code đã được xây dựng và đóng gói (ngày trước thì Code được build xong thì sẽ nén lại).
+
+Ở cuối bài trước thì chúng ta đã thực hiện thao tác build image cho cả NodeJS và Nginx React, và Docker Image của NodeJS đã có thể hoạt động được với ECS Service như bình thường, nhưng với Image của Nginx React thì cần phải thay đổi lại một chút, cho nên là ở trong phần này chúng ta sẽ thực hiện lại thao tác xây dựng image cho Nginx React.
+
+#### Nội dung
+
+1. [Tải Docker image lên ECR](3.1-push-image-to-ecr/)
+2. [Tải Docker image lên Dockerhub](3.1-push-image-to-ecr/)

content/4-register-namespace-in-cloudmap/_index.vi.md

@@ -5,3 +5,78 @@ weight = 4
 chapter = false
 pre = "<b>4. </b>"
 +++
+
+Các bước sắp tới thì chúng ta sẽ cấu hình Frontend và Backend ở trong từng ECS Service riêng biệt, tuy nhiên thì chúng ta không có hình thức giao tiếp giữa các Services với nhau (mặc dù ở trong cùng một Cluster) thế nên là trong phần này thì chúng ta sẽ phải cấu hình Namespace và Service ở trong Cloud Map.
+
+Khi có được Serivce Discovery Name thì Frontend Service có thể dùng cái "tên" đó để phân giải ra được địa chỉ IP của Backend Service, khi đó thì Frontend Service có thể giao tiếp được với Backend Service.
+
+#### Tạo namespace
+
+Tìm `Cloud Map` ở trên trang console
+
+- Chọn Cloud Map
+
+**INSERT IMAGE HERE**
+
+Trong mục namespace
+
+- Ấn **Create namespace**
+
+**INSERT IMAGE HERE**
+
+Trong giao diện tạo namespace
+
+- Name: `fcjresbar.internal`
+- Description: `Use for internal API Calls and DNS`
+- Instance discovery: chọn **API calls and DNS queries in VPCs**.
+
+**INSERT IMAGE HERE**
+
+Tiếp theo
+
+- Chọn VPC mà chúng ta đã tạo trước đó
+- TTL (Time to live): 20s
+- Ấn **Create namespace**
+
+**INSERT IMAGE HERE**
+
+Namespace của chúng ta đã được tạo thành công
+
+**INSERT IMAGE HERE**
+
+#### Tạo service trong namespace
+
+Giờ thì chúng ta sẽ tạo service trong Namespace mới tạo
+
+- Vào lại thông tin của namespace mới tạo
+- Kéo xuống dưới cùng
+- Ấn **Create service**
+
+**INSERT IMAGE HERE**
+
+Điền một số thông tin sau để tạo service
+
+- Name: `backend`
+- Description: `Backend Service Discovery Name`
+- Discoverable by: chọn **API and DNS**
+
+**INSERT IMAGE HERE**
+
+{{% notice note %}}
+Với service name là **backend**, thì chúng ta sẽ có tên đầy đủ của Service Discovery cho Backend là `backend.fcjresbar.internal`, nhớ sao chéo lại tên này vì chúng ta cần nó để cấu hình Task Definition cho Frontend service.
+{{% /notice %}}
+
+Tiếp theo trong phần DNS Configuration
+
+- Routing policy: chọn **WEIGHTED**
+- Record type: **A** (cho IPv4)
+- TTL: 300
+- Health check option: chọn No health check
+
+**INSERT IMAGE HERE**
+
+**INSERT IMAGE HERE**
+
+Giờ chúng ta phải chờ một lúc để service có thể được tạo xong
+
+**INSERT IMAGE HERE**

content/5-create-ecs-cluster/_index.vi.md

@@ -6,4 +6,41 @@ chapter = false
 pre = "<b>5. </b>"
 +++
 
-#### Creating an Admininistrator Group
+#### Tạo ECS Cluster
+
+Trên thanh tìm kiếm
+
+- Gõ `ECS`
+- Chọn **Elastic Container Service**
+
+**INSERT IMAGE HERE**
+
+Trong giao diện chính của ECS Console
+
+- Chọn **Cluster**
+- Ấn **Create cluster** để tạo một cluster mới
+
+**INSERT IMAGE HERE**
+
+Trong trang tạo Cluster
+
+- Name: nhập `FCJ-Lab-cluster`
+- Namespace: sẽ đươc tự động tạo
+- Infrastructure: chọn **AWS Fargate**.
+
+**INSERT IMAGE HERE**
+
+Trong phần Monitoring
+
+- Chọn **Use Container Insight**
+- Ấn **Create** để tạo cluster
+
+**INSERT IMAGE HERE**
+
+{{% notice note %}}
+Bật Container Insight là vì trong bài workshop sau chúng ta sẽ quan sát kĩ hơn về các ECS Service và các Container ở bên trong một Cluster.
+{{% /notice %}}
+
+Kết quả
+
+**INSERT IMAGE HERE**

content/6-create-task-definition/6.1-backend-task-definition/_index.vi.md

@@ -5,3 +5,73 @@ weight = 1
 chapter = false
 pre = "<b>6.1. </b>"
 +++
+
+Lưu ý, như mình đã nói ở trên thì trong phần này, bạn có thể dùng image ở ECR hoặc Dockerhub đều được.
+
+**INSERT IMAGE HERE**
+
+**INSERT IMAGE HERE**
+
+#### Cấu hình Task Definition cho Backend Service
+
+Vẫn ở trong giao diện ECS Console
+
+- Chọn **Task definitions**
+- Ấn **Create new task definition**.
+
+**INSERT IMAGE HERE**
+
+Điền trước một số thông tin cho task definition
+
+- Family name: nhập `fcjresbar-task-be`
+- Trong phần **Infrastructure requirements**
+  - Launch type: chọn **AWS Fargate**
+  - OS, Architecture, Network: chọn **Linux/x86_64**, network mặc định là **awsvcp** khi chọn AWS Fargate.
+
+**INSERT IMAGE HERE**
+
+Các thông tin tiếp theo
+
+- CPU: **4 vCPU**
+- Memory: **8 GB**
+- Task role và Task execution role để mặc định
+
+**INSERT IMAGE HERE**
+
+Trong phần định nghĩa container, điền các thông tin
+
+- Name: `backend`
+- Image URI: uri của backend image trong ECR hoặc Dockerhub, ở đây mình sẽ dùng trong ECR.
+- Container port: `5000`; protocol: **TCP**; App protocol: **HTTP**
+- Resource allocation limits:
+  - CPU: `2`
+  - Memory hard limit: `4`
+  - Memory soft limit: `3`
+
+{{% notice note %}}
+Khi cấu hình container trong AWS Fargate, thì mình sẽ không cần quan tâm tới Port của host, vì mặc định port của host sẽ là của container.
+{{% /notice %}}
+
+**INSERT IMAGE HERE**
+
+Tiếp theo là thêm biến môi trường, phần này quan trọng, nếu như không cấu hình thì NodeJS server ở bên trong không chạy được, bao gồm:
+
+- `MYSQL_USER` = `admin`
+- `MYSQL_PASSWORD` = `letmein12345`
+- `MYSQL_DATABASE` = `fcjresbar`
+- `DB_HOST` = "your rds endpoint"
+- `DB_DIALECT` = `mysql`
+- `PORT` = `5000`
+- `JWT_SECRET` = `0bac010eca699c25c8f62ba86e319c2305beb94641b859c32518cb854addb5f4`
+
+**INSERT IMAGE HERE**
+
+Giữ các cấu hình này mặc định
+
+**INSERT IMAGE HERE**
+
+Cuối cùng là ấn **Create** để tạo task definition
+
+**INSERT IMAGE HERE**
+
+**INSERT IMAGE HERE**

content/6-create-task-definition/6.2-frontend-task-definition/_index.vi.md

@@ -5,3 +5,60 @@ weight = 1
 chapter = false
 pre = "<b>6.2. </b>"
 +++
+
+Tương tự, giờ chúng ta sẽ tạo task definition cho frontend
+
+#### Cấu hình Task Definition cho Frontend Service
+
+Trở lại màn hình Task definition
+
+- Xổ **Create new task definition**
+- Chọn **Create new task definition**
+
+**INSERT IMAGE HERE**
+
+Tiếp tục điền các thông tin cơ bản
+
+- Family name: nhập `fcjresbar-task-fe`
+- Trong phần **Infrastructure requirements**
+  - Launch type: chọn **AWS Fargate**
+  - OS, Architecture, Network: chọn **Linux/x86_64**, network mặc định là **awsvcp** khi chọn AWS Fargate.
+
+**INSERT IMAGE HERE**
+
+Các thông tin tiếp theo
+
+- CPU: **2 vCPU**
+- Memory: **6 GB**
+- Task role và Task execution role để mặc định
+
+**INSERT IMAGE HERE**
+
+Trong phần định nghĩa container, điền các thông tin
+
+- Name: `frontend`
+- Image URI: uri của frontend image trong ECR hoặc Dockerhub, ở đây mình sẽ dùng trong ECR.
+- Container port: `80`; protocol: **TCP**; App protocol: **HTTP**
+- Resource allocation limits:
+  - CPU: `1`
+  - Memory hard limit: `3`
+  - Memory soft limit: `2`
+
+**INSERT IMAGE HERE**
+
+Tiếp theo là thêm biến môi trường, bao gồm:
+
+- `BACKEND_HOST` = `backend.fcjresbar.internal`
+- `BACKEND_PORT` = `5000`
+
+**INSERT IMAGE HERE**
+
+Giữ các cấu hình này mặc định
+
+**INSERT IMAGE HERE**
+
+Cuối cùng là ấn **Create** để tạo task definition
+
+**INSERT IMAGE HERE**
+
+**INSERT IMAGE HERE**

content/6-create-task-definition/_index.vi.md

@@ -6,4 +6,9 @@ chapter = false
 pre = "<b>6. </b>"
 +++
 
-#### Creating an Admininistrator Group
+Để ECS Service có thể tạo ra và quản lý các container ở trong Cluster, thì mình cần sẽ phải tạo Task Definition trước. Trong phần này thì chúng ta sẽ cùng tạo task definition cho Frontend và Backend.
+
+#### Nội dung
+
+1. [Tạo task definition cho backend](6.1-backend-task-definition/)
+2. [Tạo task definition cho frontend](6.2-frontend-task-definition/)