Mở đầu

Tản mạn trên Quiita, mạn phép share bài viết về tạo 1 Webapp sử dụng kĩ thuật infra rất được ưa chuộng hiện nay đó là Docker, CircleCI, AWS, Backend sử dụng Laravel, FrontEnd sử dụng Vue.js.

Overview về app

Đây là SNS app phục vụ việc meeting buổi sáng (hoặc meeting online nói chung) App được đặt tên là 「AsaKotsu」「朝活」.

URL vào app ở link sau, hiện tại mới hoàn thiện bản trên PC, chưa hoàn thiện trên SP, các bạn có thể vào thao tác thử nhé URL：https://pf.asakotsu.com/ GitHub：https://github.com/ngsw877/asakotsu

Các màn hình sử dụng

Top page（List các bài post và ranking etc)

List post của mỗi tag

Post detail và List comment

List Zoom Meeting

User detai

Unlimited scroll

Tính năng của app

Cơ bản thì gồm các chức năng SNS như là Post bài, comment, Like, Follow gôngiống như twitter, ngoài ra còn có các đặc tính sau đây:

• Thông qua app, gọi đến ZoomAPI để Thêm/Sửa/Xóa được Asakotsu Zoom Meeting
• Set giờ báo thức, record được số ngày dậy sớm theo giờ báo thức
• Chức năng sếp ranking theo số ngày dậy sớm theo giờ báo thức (summary theo đơn vị tháng)
• Gắn tag vào bài post (gắn category), có thể share bằng các tag

Kĩ thuật sử dụng trong app

• FrontEnd

  • Vue.js 2.6.11
  • jQuery 3.4.1
  • HTML / CSS / Sass / MDBootstrap

• Backend

  • PHP 7.4.9
  • Laravel 6.18.36
  • PHPUnit 8.5.8
  • ZoomAPI (guzzlehttp/guzzle 7.0.1)

• Infra

  • CircleCi
  • Docker 19.03.12 / docker-compose 1.26.2
  • nginx 1.18
  • mysql 5.7.31 / PHPMyAdmin
  • AWS ( EC2, ALB, ACM, S3, RDS, CodeDeploy, SNS, Chatbot, CloudFormation, Route53, VPC, EIP, IAM )

Logic bên server được code bằng PHP/Laravel, các thiết kế chi tiết của Frontend hiệu chỉnh bằng Sass, khi thêm thao tác thì thực hiện bằng Vue.js và Query. Sử dụng Docker/docker-compose trên môi trường dev, về piperline CI/CD, thực hiện Autotest-build bằng CircleCI, và cho auto deploy bằng CodeDeploy của AWS.

Cấu tạo infra

Môi trường dev, Môi trường product

Trên môi trường dev, sử dụng Docker / docker-compose, chia ra sử dụng 4 container sau đây:

1. Web server container： Nginx
2. Application container： PHP / Laravel / Vue.js
3. DB container： MySQL
4. DB Management container： PHPMyAdmin

Refer link：

• 絶対に失敗しないDockerでLaravel+Vueの実行環境（LEMP環境）を構築する方法〜前編〜

• 絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜後編〜

• phpMyAdmin on docker が便利すぎる

AWS trên môi trường PRD vốn mong muốn là deploy bằng ECS nhưng mà đoạn này khó quá, bỏ qua, tìm hiểu sau nên lần này tạm dùng EC2 để deploy do đã có kinh nghiệm.

Phát hành SSL certification

Phát hành SSL certification thực hiện HTTPS hóa nên sử dụng ACM(AWS Certificate Manager).

Để sử dụng ACM thì cũng cần thêm ALB(ELB) và CloudFront và EC2, khá phức tạp nên lần này tôi áp dụng ALB. Ngoài ra, dù là dùng ALB, nhưng do chưa tính được lượng access nào mà gây quá tải nên tạm chuẩn bị 2 instance EC2. Và keymark ở address bar, nếu không setting proxy bên Laravel thì sẽ không đọc được file css và js, routing sẽ không được https hóa nên cần lưu ý điểm này

Refer link：

• AWS：無料でSSL証明書を取得する方法
• 信用するプロキシの設定

Upload lên S3 bucket

Về S3 chia ra làm 2 phần sau

1. Lưu source đã build bằng CircleCI
2. Lưu data hình ảnh đã upload bằng app trên EC2

Mục số 2. cần phải setting bucket policy của S3, install package dành cho S3 nữa.

Refer link：

• Rails, Laravel(画像アップロード)向けAWS(IAM:ユーザ, S3:バケット)の設定
• LaravelでAWS S3へ画像をアップロードする

Setting push notification to Slack

Hiện nay thông qua CodeDeploy,SNS. Chatbot có thể bắn các thông báo khi bắt đầu - kết thúc deploy lên Slack. khá là tiện.

Function list

• About User Register

  • Chức năng Sign up. Edit profile
  • Chức năng login. logout
  • Chức năng login đơn giản ( login dành cho guest user）

• Liên kết ZoomAPI

  • Chức năng Asakotsu Zoom Meeting (CRUD)
    • Thêm mới Meeting, hiển thị list, Edit, Xóa

• Chức năng nhận định dậy sớm thành công

  • Mỗi user đều có thể setting thời gian target thức dậy（trong khoảng 4:00〜10:00）
  • Nếu post bài trước giờ thức dậy thì số ngày dậy sớm tăng lên 1
    
    • ※Lưu ý phải detect sao cho các bài post xuất hiện sau giờ đêm khuya sẽ không được count ngày dậy sớm
      　 và post bài sớm hơn giờ thức dậy 3 tiếng cũng không được tính
      （Ex）Set giờ thức dậy là 7:00 thì khi post bài trong khoảng 04:00~07:00 thì sẽ được count.

• Chức năng ranking số ngày dậy sớm của user（monthly）

• Chức năng unlimited scroll (jQuery / inview.js / ajax)

• About user post(CRUD)

• Chức năng comment

• Chức năng tag (Vue.js / Vue Tags Input)

• Chức năng like (Vue.js / ajax)

• Chức năng follow

  • Following/Follower list（phân trang）

• Chức năng hiển thị flash message (jQuery/ Toastr)

  • Hiển thị flash message khi Post, Edit, Delete, Login. Logout.

• Chức năng upload ảnh (AWS S3バケット)

• PHPUnittest

DB design

ER diagram

Tables

Chức năng báo dậy sớm\

wake_up_timecủa table users là phần record giờ báo thức. Nếu dậy sớm hơn giờ đã set và post bài thì user đa đạt chỉ tiêu.

và cũng cân nhắc sao cho khi 「giờ báo thức là 7:00, post bài lúc 1:00」thì trường hợp này sẽ không được tính vì nó quá sớm so với giờ hẹn, như đã lưu ý ở trên. Để đạt được cơ chế này thì có thêm giá trị range_of_success trong bảng users . Giá trị này là chỉnh số thể hiện phạm vi cho phép count dậy sớm thành công bằng cách khoanh vùng thời gian. Default là 3, ví dụ đặt giờ báo là 07:00 thì cho phép trong khoảng trước đó 3 tiếng, tức là khoảng từ 04:00 〜 07:00 mà post bài thì sẽ coi là dậy sớm thành công

Khi dậy sớm thành công thì sẽ record lịch sử ngày dậy sớm này vào giá trị date của bảng achievement_days. 例） 2020-11-22 Dùng data của ngày này để thực hiện chức năng sau: ① 　Tính ra số ngày dậy sớm trong 1 tháng ②　Sử dụng kết quả ở ① để tính ranking

※ Do đây là app hướng đến hoạt động buổi sáng nên giờ thức dậy ban đầu tôi dự định để set trong khoảng 04:00~10:00 nhưng hiện tại tôi thử nghiệm hướng open, để set khoảng giờ nào cũng được. --Tobe continued--