{
  "version": 1,
  "locale": "vi",
  "updated": "2022-03-08",
  "page": {
    "type": "article",
    "title": "Microservices #4: Làm việc đa môi trường và sự chờ đợi của Frontend",
    "description": "Xin chào, tiếp tục loạt bài về trải nghiệm của mình trong việc xây dựng hệ thống microservices tại EGANY, hôm nay xin đề cập với mọi người một vấn đề mà nhóm...",
    "url": "https://egany.com/blogs/ecommerce-cro/microservices-4-lam-viec-da-moi-truong-va-su-cho-doi-cua-frontend/",
    "markdown_url": "https://egany.com/blogs/ecommerce-cro/microservices-4-lam-viec-da-moi-truong-va-su-cho-doi-cua-frontend.md",
    "json_url": "https://egany.com/blogs/ecommerce-cro/microservices-4-lam-viec-da-moi-truong-va-su-cho-doi-cua-frontend.json",
    "group": "ecommerce-cro",
    "author": "Thuan Nguyen",
    "published": "2022-02-28T01:58:49.000Z",
    "modified": "2022-03-08T12:19:03.000Z",
    "categories": [
      "Engineering",
      "Optimization"
    ]
  },
  "organization": {
    "name": "EGANY",
    "legal_name": "CÔNG TY CỔ PHẦN CÔNG NGHỆ EGANY",
    "alternate_name": "EGANY Technology JSC",
    "url": "https://egany.com/",
    "address": "77/6 Hồ Thị Kỷ, Phường Vườn Lài, TP. Hồ Chí Minh",
    "telephone": "+84934269700",
    "email": "support@egany.com",
    "tax_id": "0313000791",
    "opening_hours": "Thứ 2 - Thứ 6, 9:00 - 17:00",
    "same_as": [
      "https://www.facebook.com/egany.tech/",
      "https://www.youtube.com/user/eganydotcom",
      "https://zaloapp.com/qr/p/15np7bg4k8s47?src=qr"
    ]
  },
  "headings": [
    {
      "level": 1,
      "text": "Microservices #4: Làm việc đa môi trường và sự chờ đợi của Frontend",
      "id": "microservices-4-lam-viec-da-moi-truong-va-su-cho-doi-cua-frontend"
    },
    {
      "level": 2,
      "text": "Bối cảnh",
      "id": "boi-canh"
    },
    {
      "level": 2,
      "text": "Vấn đề",
      "id": "van-de"
    },
    {
      "level": 2,
      "text": "Phân tích",
      "id": "phan-tich"
    },
    {
      "level": 2,
      "text": "Giải pháp",
      "id": "giai-phap"
    }
  ],
  "links": [
    {
      "text": "Microsevices #1 – Sự lựa chọn",
      "url": "https://egany.com/blogs/microsevices-1-su-lua-chon/"
    },
    {
      "text": "Microsevices #2 – Triển khai microservices “tinh gọn” để bắt đầu dễ dàng hơn",
      "url": "https://egany.com/blogs/microsevices-2-trien-khai-microservices-tinh-gon-de-bat-dau-de-dang-hon/"
    },
    {
      "text": "Microsevices #3 – Service Communication – 3 lần thay đổi",
      "url": "https://egany.com/blogs/microservices-so-3-service-communication-3-lan-thay-doi/"
    },
    {
      "text": "EGANY Back-End Tech Stack",
      "url": "https://egany.com/blogs/egany-back-end-tech-stack/"
    }
  ],
  "sections": [
    {
      "id": "hero",
      "heading": "Microservices #4: Làm việc đa môi trường và sự chờ đợi của Frontend",
      "content_markdown": "Xin chào, tiếp tục loạt bài về trải nghiệm của mình trong việc xây dựng hệ thống microservices tại EGANY, hôm nay xin đề cập với mọi người một vấn đề mà nhóm mình đang gặp phải khi phát triển hệ thống với nhiều môi trường khác nhau. Trong bài viết này sẽ đề cập tới vướng mắc gặp phải khi xác thực và phân quyền. Vậy vấn đề này cụ thể là gì? Tại sao Frontend lại phải chờ? Frontend chờ gì? Hãy cùng tìm hiểu nhé! Trước hết xin đi qua một chút về bối cảnh.",
      "links": []
    },
    {
      "id": "boi-canh",
      "heading": "Bối cảnh",
      "content_markdown": "EGANY cung cấp các giải pháp nhằm giúp tăng trải nghiệm và tỉ lệ chuyển đổi trên website e-commerce bằng nhiều giải pháp khác nhau với chi phí tiết kiệm, một trong các giải pháp đấy là cung cấp các ứng dụng web chạy trên các nền tảng như Haravan, Sapo, Shopify (apps.egany.com) và các nền tảng khác với bộ ứng dụng Cross Platform (egany.app). Ứng dụng cung cấp giao diện thân thiện để người dùng thiết lập cá nhân hóa để phù hợp cho website của họ, xem hình minh họa dưới đây.\n\n![Hình minh họa giao diện](https://cdn.egany.com/images/blogs/2022/02/index-guideline-cro-buttons.png)\n\nGiao diện trên được Frontend triển khai và tích hợp thông qua API do Backend cung cấp. Thông thường API sẽ yêu cầu xác thực mới có thể sử dụng được, tại EGANY sử dụng Access Token thông qua OAuth để gọi API, xem mô tả về OAuth dưới đây.\n\n![Abstract Protocal Flow](https://cdn.egany.com/images/blogs/2022/02/Abstract-Protocal-Flow.png)\n\nChi tiết hơn sẽ như sau\n\n![Authorization Code Flow](https://cdn.egany.com/images/blogs/2022/02/Authorization-Code-Flow.png)\n\nBạn có thể tìm hiểu thêm trong bài The OAuth 2.0 Authorization Framework\n\nTrong hình trên, mọi người có thể thấy có tham số Redirection URI ở bước (D), đây chính là URI sẽ được chuyển hướng/redirect đến Frontend để nhận và xử lý tiếp yêu cầu, vấn đề xảy ra ở đây, vậy cụ thể nó là gì?",
      "links": []
    },
    {
      "id": "van-de",
      "heading": "Vấn đề",
      "content_markdown": "Thông thường một hệ thống khi đến tay người dùng thì cần đảm bảo được tính ổn định của hệ thống, do đó quá trình phát triển, kiểm thử và release sẽ được triển khai trên nhiều môi trường khác nhau gồm:\n\n**Backend**\n\nMôi trường | Gọi tắt\nDevelopment | dev\nStaging | stag\nProduction | prod\n\nvà\n\n**Frontend**\n\nMôi trường | Gọi tắt\nDevelopment | dev\nStaging | stag\nProduction | prod\n\nNhư vậy có thể nhận thấy là Backend và Frontend đều chia thành các môi trường khác nhau để phát triển, nếu bạn là một Backend developer bạn sẽ thiết kế hệ thông của mình như thế nào để Frontend và Backend có thể làm việc với nhau một cách mượt mà? Mình có 2 giải pháp dưới đây\n\n**Giải pháp 1** – Thiết kế để Backend và Frontend tương tác cùng 1 môi trường giống nhau\n\n| Dev backend | Stag backend | Prod backend\n**Dev frontend** | ✅ | – | –\n**Stag frontend** | – | ✅ | –\n**Prod frontend** | – | – | ✅\n\n**Giải pháp 2** – Thiết kế Backend để Dev và Stag Frontend có thể kết nối với môi trường Dev và Stag Backend\n\n| Dev backend | Stag backend | Prod backend\n**Dev frontend** | ✅ | ✅ | –\n**Stag frontend** | – | ✅ | –\n**Prod frontend** | – | – | ✅\n\nVậy theo bạn giải pháp nào sẽ xảy ra việc Frontend chờ đợi?\n\n![](https://cdn.egany.com/images/blogs/2022/02/giphy.gif)\n\nĐó là giải pháp 1, hãy cùng phân tích",
      "links": []
    },
    {
      "id": "phan-tich",
      "heading": "Phân tích",
      "content_markdown": "Trước hết cần phải biết đặc điểm của Dev Backend là:\n\n- Thường xuyên thay đổi\n- Là nơi thử nghiệm cho các tính năng và công nghệ mới\n- Là nới sửa lỗi/fix bugs\n- Do đo thường sẽ không có tính ổn định cao.\n\nVí dụ trong quá trình nghiên cứu công nghệ mới làm cho một vài service không hoạt động trong một khoảng thời gian, vậy chuyện gì xảy ra nếu Dev Frontend đang làm việc với Dev Backend?\n\n![](https://cdn.egany.com/images/blogs/2022/02/giphy-1.gif)\n\nLúc này bạn sẽ nhận được những lời hỏi thăm nồng thắm từ đồng nghiệp của mình ví dụ như\n\n> Ê bạn, sao API nó báo lỗi 404 nè \n> \n>  Ê bạn, API trả lỗi Service Unavailable nè\n\nLúc này bạn sẽ làm gì? Nở một nụ cười thật tươi và nói\n\n> À, tại vì mình mới thử một công nghệ mới, mà đang gặp một số trục trặc nên server đang lỗi, xin lỗi nha, chờ xíu để khôi phục lại\n\nLúc này Frontend phải chờ Backend khôi phục lại môi trường Dev để có thể tiếp tục công việc của mình. Trong một số trường hợp thì chuyện này sẽ không ảnh hưởng quá nhiều nếu việc khôi phục không mất nhiều thời gian hoặc công việc của Frontend không quá gấp hoặc sửa lỗi nghiêm trọng nào đấy. Trong trường hợp ngược lại thì sẽ là vấn đề cực kỳ nghiêm trọng khi sản phẩm của bạn đang trong giai đoạn nước rút chuẩn bị release, đang gặp lỗi nghiêm trọng, tính năng đang cần được triển khai trên môi trường Stag để nhiều giai đoạn tiếp theo có thể tiếp tục như viết nội dung, kiểm thử, demo cho đối tác…",
      "links": []
    },
    {
      "id": "giai-phap",
      "heading": "Giải pháp",
      "content_markdown": "Với những vấn đề ở trên thì hệ thống nên được thiết kế một cách linh động để tránh những việc rủi ro không đáng có. Qua ví dụ trên dễ nhận thấy giải pháp 2 sẽ tránh được việc Dev Frontend phải.\n\n**Giải pháp 2** – Thiết kế Backend để Dev và Stag Frontend có thể kết nối với môi trường Dev và Stag Backend\n\n| Dev backend | Stag backend | Prod backend\n**Dev frontend** | ✅ | ✅ | –\n**Stag frontend** | – | ✅ | –\n**Prod frontend** | – | – | ✅\n\nBài viết đến đây là hết rồi, hy vọng qua bài viết này sẽ giúp các bạn có được một góc nhìn về vấn đề trên, để từ đấy có các giải pháp cho mình để tránh những vấn đề không đáng có và giúp cho team của mình có thể phối hợp một cách mượt mà, tạo ra những sản phẩm chất lượng, nhanh chóng đến với người dùng.\n\nNgoài ra các bạn cũng có thể xem thêm các bài viết khác của mình từ danh sách dưới đây, tạm biệt và hẹn gặp lại trong các bài viết tiếp theo.\n\n- [Microsevices #1 – Sự lựa chọn](https://egany.com/blogs/microsevices-1-su-lua-chon/)\n- [Microsevices #2 – Triển khai microservices “tinh gọn” để bắt đầu dễ dàng hơn](https://egany.com/blogs/microsevices-2-trien-khai-microservices-tinh-gon-de-bat-dau-de-dang-hon/)\n- [Microsevices #3 – Service Communication – 3 lần thay đổi](https://egany.com/blogs/microservices-so-3-service-communication-3-lan-thay-doi/)\n- [EGANY Back-End Tech Stack](https://egany.com/blogs/egany-back-end-tech-stack/)",
      "links": [
        {
          "text": "Microsevices #1 – Sự lựa chọn",
          "url": "https://egany.com/blogs/microsevices-1-su-lua-chon/"
        },
        {
          "text": "Microsevices #2 – Triển khai microservices “tinh gọn” để bắt đầu dễ dàng hơn",
          "url": "https://egany.com/blogs/microsevices-2-trien-khai-microservices-tinh-gon-de-bat-dau-de-dang-hon/"
        },
        {
          "text": "Microsevices #3 – Service Communication – 3 lần thay đổi",
          "url": "https://egany.com/blogs/microservices-so-3-service-communication-3-lan-thay-doi/"
        },
        {
          "text": "EGANY Back-End Tech Stack",
          "url": "https://egany.com/blogs/egany-back-end-tech-stack/"
        }
      ]
    }
  ]
}