Cách phục vụ phía trước trong thư mục công cộng với ứng dụng Rails trong Sản xuất

Tram Ho

Trong thời gian vừa rồi trong dự án mình cần sử dụng font tùy chọn ở các trang như 500.html, 404.html,… tùy đã dưa font tùy chọn vào trong thư mục vendor/assets/fonts/ của Rails app nhưng vẫn không thể nhận được font tùy chọn ở các trang trên. Sau khi điều tra cho thấy rằng các trang lỗi được chỉ định bởi nginx lấy response luôn file ở thự mục public mà không thông qua Rails app cho nên font không được phục vụ. Thông thường Rails sẽ thực hiện precompile các assets khi deploy lên production và tên file sẽ nối với fingerprinting eg. application-4dd5b109ee3439da54f5bdfd78a80473.css. Bài toán đặt ra ở đây là làm sao để các font tùy chọn phục vụ cho các trang html do nginx chỉ định?

Nginx phục vụ các file tĩnh như thế nào?

Trước tiên chúng ta cần tìm hiểu sơ qua cách mà nginx phục vụ các file tĩnh .
Dưới này là cấu trúc trong Rails app chứa các trang lỗi

Trong config của nginx

Với config trên khi nhập URL trên trình duyệt www.example.com/404.html response trả về sẽ là một trang html tĩnh được chỉ định ở trên server là /usr/local/rails_apps/current/public/404.html.
Hãy check tiếp trong file html khi cần dùng font tùy chọn

Khi đó ở mục console của trình duyệt khi inspect element sẽ hiển thị lỗi sau

Để khắc phục lỗi này sẽ trình bay phần tiếp theo

Config bên Rails app

Tạo một thư mục fonts dưới public/fonts

Trong file 404.html vẫn giữ nguyễn khai báo font

Cập nhật Nginx config file để phục vụ file cần dùng

Ở đây cần làm 2 việc đó là check mime types và config cho phép phục vụ file tĩnh với định dạng file.

Mime type

Để cho nginx có thể hiểu được request header Content-type phải check cat /etc/nginx/mime.types nhưng trong bài toán này file yêu cầu là .otf do config mặc định của nginx không có nên phải thêm vào để mở rộng.
Hãy thêm như dưới bằng vi /etc/nginx/mime.types

Static files

Thực hiện thêm config cho file vi /etc/nginx/sites-enabled/default

Ở đây mình cho thêm add_header Access-Control-Allow-Methods GET; để chặn các request ngoài GET vì mục đích chỉ cho phép get về không được update hay xóa bằng methods khác.

Cuối cùng cần khởi động lại nginx để nó nhận config mới bằng cmd sudo systemctl restart nginx.

Testing

Để biết lỗi đã khác phục có thể check bằng 2 cách:

  • Truy cập vào trang lỗi 404.html quan sát các vùng được quanh đỏ

  • Truy cập vào url đường link example.com/fonts/ABC.otf của font đã đặt vào trong thư mục public/fontssau đó font tải về thành công.

Kết luận

Hỳ vọng bài viết này có thể giúp bạn giải quyết vấn đề khi bạn gặp lỗi tượng tự.
Cảm ơn các bạn đã đọc bài viết này. 😄

References

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo