Tạo Static Web trên Storage Account của Azure Portal kết hợp với Cloudflare

Keyword: Create static web on Storage Account of Azure Portal combined with Cloudflare

Cách đây tầm 2 năm bản thân mình còn sử dụng AWS nhưng từ khi chuyển sang công ty mới thì dường như mình đụng chạm khá nhiều về Azure thành ra hôm nay mình mới có bài viết này dành cho mọi người, ở AWS thì chúng ta có S3 và trước đây bản thân mình cũng có một vài bài viết để làm một trang Static Web chứa hình ảnh cũng như kết hợp Cloudflare để thực hiện cho quá trình CDN, còn hôm nay mình sẽ nói về hàng của Azure nhé.

Bạn nào có nhu cầu muốn xem lại bài viết S3 và Cloudflare đó thì tại đây nhé:

• Tạo CDN Cloudflare cho S3 AWS để giảm chi phí khi sử dụng

Phía Azure thì việc tạo dựng Static Web thật sự khá đơn giản, đầu tiên mình cần tạo một Storage Account trước, điều này là chắc cú rồi, sau đó chúng ta truy cập vào phần Data Management của STA và thực hiện truy cập đến mục Static Website và Enable nó lên như hình bên dưới

Tại đây chúng ta sẽ set index và error mà chúng ta sẽ add vào trong blob $web của STA, sau đó các bạn truy cập đến Container trong phần Data Storage sẽ thấy một blob mới được tạo ra là $web

Thằng $web này được Microsoft tạo ra để chứa đựng static website, do nó là hàng để MS xác nhận và quản lý static website nên mình hoàn toàn không thể đổi được, thật ra bản thân mình cũng không thích cái name này và cũng muốn đổi cái name này lắm mà hiện tại chưa biết làm sao để đổi nó, thôi thì dùng tạm cái name $web mặc định luôn vậy, trong $web này chúng ta sẽ có thể điều chỉnh Static Web theo ý của chúng ta

Như các bạn đã thấy mình add index.html ban đầu set ở trên vào $web còn thằng error.html thì chưa vì lười quá, cái này các bạn tự tạo và thêm vào nha, mình chỉ làm trước index.html cũng như lấy nó làm ví dụ thôi, giờ đây thì mọi thứ ok rồi đó, bạn có thể truy cập đến, nhưng chỉ có thể truy cập bằng domain của MS Azure thôi, để truy cập bằng domain của chúng ta, cũng như thiết lập Cloudflare cho nó CDN thì làm sao?

Các bạn còn nhớ Primary endpoint ở trên không? hoặc các bạn cũng có thể truy cập vào $web và open thằng index.html mà bạn đã tạo và upload vào trong $web để xem.

Chúng ta sẽ thấy phần URL lúc này các bạn nhớ copy phần domain thôi nha còn phần path phía sau thì kệ bà nó đi, sau khi copy xong rồi các bạn thực hiện truy cập vào Cloudflare và add dưới dạng CNAME

• static.abc.com => CNAME => storage-account-name.blob.core.windows.net

Ở đoạn này trong phần Cloudflare các bạn khoan bật proxy lên vì để cho phía Azure xác nhận đã nên vì vậy chúng ta sẽ truy cập đến vào phần "Security + Networking > Networking > Custom Domain" và các bạn thực hiện điền domain của các bạn đã add ở Cloudflare vào.

• Ví dụ: "static.abc.com" và thực hiện save nó lại.

Ở đoạn này nhiều khi nó sẽ vẫn chưa ăn vì bạn mới add domain vào Cloudflare nên thành ra có gì các bạn đợi tầm 10p hoặc 5p gì đó cho nó ăn DNS rồi mới add vào đây nhé, đến khi chúng ta click Save mà nó ok thì là thành công

Ở phần Cloudflare để add với thằng Static Web của Azure mà có SSL thì buộc phía Cloudflare phải set SSL là Full thì mới proxy và không bị lỗi được.

Vậy giả sử như phía các bạn đang set mặc định là Flexible thay vì là Full thì làm sao? để giải quyết vấn đề này Cloudflare có cho chúng ta một Rules để hổ trợ, các bạn truy cập vào phần Rules của Cloudflare 

Tại đây các bạn tạo cho mình một Rules như sau

Điều chỉnh SSL sang Full khi hostname là host mà chúng ta đã cài trong Cloudlfare đến Static Website

Ok như vậy là mình đã hướng dẫn cho các bạn setup xong phần Cloudflare kết hợp với Static Web của Storage Account rồi đó, các bạn có thể thực hiện web này để lưu trữ Images của web hoặc có thể là các file để lấy dưới dạng text/plain, việc đẩy file lên để toàn bộ file dưới dạng text/plain mình sẽ hướng dẫn thêm nho nhỏ ở dưới đây, còn lại các bạn tự xử nhé.

az storage blob upload-batch \
        --account-name ${STA_NAME} \
        --account-key ${STA_ACCESS_KEY} \
        --destination ${STA_PATH} \
        --source . \
        --content-type "text/plain"

Ở phần này bản thân mình chỉ hổ trợ các bạn sơ qua, để các bạn những ai có muốn xây dựng CI/CD cho nó thì có thể áp dụng thôi, kiểu như build Static Web bằng CI/CD chẳng hạn, giống như mình hiện tại.

Nguồn: www.itblognote.com