- Mình start 1 cái pet project mới để học golang và vuejs (thật ra học golang thôi nhưng chẳng lẽ lại deploy mỗi api không có view) - Vì nghèo và tiếc server vẫn dư resource (server ram 1gb 🤣 cpu đơn "de gu lờ in teo" của digital ocean), nên mình quyết định deploy hết lên cùng 1 con server
2. Ý tưởng
- Nhìn là 2 con project nhưng ngoài mấy cái database, nginx, redis ra thì nó có 3 con app chính: con app rails dùng để tạo / serve các bài viết mà bạn đang đọc đây, 1 con chạy api gọi là golang, 1 con chạy source front-end gọi là vuejs. - Để biết mỗi request từ client chạy vào app nào thì mình chia nó bằng path (location trong file config của nginx) thằng app rails là mặc định location: '/', golang location: '/api/v1', vuejs location: '/bo' (bo = book organizer). - Tất cả mọi thứ đều chạy trên docker tuy nhiên con rails có 1 file docker-compose riêng mà con vuejs lại có 1 docker-compose riêng
3. Vấn đề
- Vấn đề 1: Trỏ upstream mà không ăn vào container mà ăn ngay 502 Bad Gateway Nginx Tại trước đó mình đã từng trỏ upstream cho con app rails rồi nên khi config thêm để trỏ thì mình trỏ y hệt. App Rails:
upstream app_service {
server app:3000;
}
Golang & vuejs:
upstream app_be_service {
server app_be:3000;
}
upstream app_fe_service {
server app_fe:8080;
}
Trong docker-compose file thì service chạy Rails là app, service chạy Golang là app_be, service chạy vuejs là app_fe. Ban đầu mình cứ nghĩ do upstream trỏ sai, sau kiểm tra lại thì con vuejs & golang đang chạy trên một network riêng bookorganize_internal, còn con nginx và rails đang chạy trên blog_internal. Sửa lại cho con golang & vuejs chạy chung network với nginx là lại ngol ngay.
- Vấn đề 2: Trỏ được upstream rồi nhưng sao con vuejs vẫn nhả lỗi 404 thế này Sau khi build lại con golang & vuejs start lại xong, mình có test với route '/api/v1/healthcheck' thì thấy okee con server golang sống rồi
Sống rồi
Nhưng không hiểu tại sao con vuejs lại nhả lỗi 404 🤯. Nhưng thôi 404 vẫn tốt hơn là 502 ít ra là nó vào tới app rồi. Lại thêm một hồi research lỗi với test lòi trên local thì mình nhận ra con vuejs khi mình để base route '/bo' (mình dùng vue-router) thì mỗi khi mình vào path xyz:9999/ thì nó sẽ tự nhảy sang xyz:9999/bo và hoạt động bình thường, nhưng khi nhập url xyz:9999/bo ấn enter thì nó sẽ nhảy sang 404 =)))) Mình mạnh dạn đoán là các path của mình vẫn giữ nguyên như cũ vd /login chứ nó không tự chuyển sang /bo/login như mình nghĩ. Chỉ là sau khi nhận path /login thì nó sẽ tự chèn thêm cái /bo/ vào trước thôi. Vậy nên khi nhập /bo thì nó sẽ tìm trong path xem có cái /bo nào không và không tìm thấy nên nó kệ mịa mình và trả 404. Đoán là thế thôi chứ mình cũng không biết sửa cái source vuejs thế nào để nó nhận đúng ý mình (chèn thủ công /bo vào trước từng route thì tốn sức quá). Mình quyết định sửa nginx cho mỗi khi /bo nó sẽ bỏ cái /bo trước khi nhảy vào app. Hóa ra cách này lại dễ hơn chỉ cần thêm cái / vào cuối cái proxy_pass image.png Config vue-router của mình: image.png Build lại nginx rồi start lại thì đã thấy hết bị lỗi 404.
- Vấn đề 3: Vuejs đã hết lỗi 404 giờ nó bị lỗi load resource 😭 Con vuejs đã nhận được request và serve file thành công 🥳 Đùa thôi nó không bị lỗi 404 nữa nhưng màn hình vẫn trắng toát Check console của browser thì thấy: image.png Uồi nó không load được assets kìa do là xyz/assets thì nó vẫn chạy vào con Rails chứ không phải con vuejs. Tuy nhiên mình không thể config lại nginx trong trường hợp này để mỗi khi path là /assets thì nó chạy vào con vuejs được do con Rails thì cx sẽ load file js, css từ assets làm thế thì con Rails sẽ lại trắng trang mất. Hiện mình vẫn đang tìm cách xem cho con vue load assets thì chèn thêm cái /bo/ ở trước được không =))) Hy vọng phần 2 con app này chạy được
