// in production, Express serves the frontend's 'dist' folderapp.use(express.static(path.join(__dirname,'client/dist')));

→Chức năng:
Khi một yêu cầu HTTPđến máy chủvàkhông khớp với route APInào chúng ta đã định nghĩa (ví dụ:
không bắt đầu bằng/api), Express sẽ tìm trongthư mục dist!
Nếu tìm thấy file phù hợp với URL được yêu cầu (ví dụ:/style.css), nó sẽ gửi ngay choclientvà dừng quá trình định tuyến❗

Phát triển vs Sản xuất:

→ Nếu chúng ta thấy lệnhnpm run devđược sử dụng trong cảfrontend(React) vàbackend(Express), chúng ta có thể nghĩ chúng làm việc giống nhau.Không phải vậy❗ Đây làđiểm khác biệt quan trọng, đặc biệt khi nghĩ vềbảo mậtvàhiệu suất.

→Hai phiên bảnnpm run dev:
Hai Máy chủ, Hai Mục đích

Khi nói vềChế độ Phát triển(Dev) vàChế độ Sản xuất(Prod), chúng ta đang mô tảtrạng tháivàmục đíchcủa mã đang chạy.

Chế độ Phát triển (bàn làm việc):

Chế độ Phát triển làbàn làm việccủa chúng ta, được tối ưu cho tốc độ và gỡ lỗi.

→Mục đích:
mục tiêu duy nhất là hỗ trợlập trình nhanh,kiểm thử, vàgỡ lỗi.
→Thiết lập Frontend:
máy chủ chạyVite Dev Servertrên một cổng (ví dụ:5173).
→Công cụ Backend:
chúng ta sử dụng các công cụ nhưnodemonđể tự độngkhởi động lạimáy chủ ngay khi chúng ta lưu thay đổi.
→Lỗi:
lỗi được hiển thị chi tiết và rõ ràng (stack traces) và in trực tiếp ra console, giúp bạnsửa vấn đềngay lập tức.
→Tối ưu hóa:
file được phục vụ nguyên trạng, vớitối ưu hóa tối thiểu, vì kích thước file và tốc độ không phải là mối quan tâm chính.

Chế độ Sản xuất (máy chủ công khai trực tiếp)

Chế độ Sản xuất là phiên bản cuối cùng, được tối ưu hóa để cung cấp cho công chúng, được xây dựng choổn địnhvàbảo mật.

→Mục đích:
mục tiêu là cung cấp trải nghiệm ổn định,nhanh, vàbảo mậtcho công chúng.
→Thiết lập Frontend:
mã frontend đượcbuildtrước (biên dịch và thu nhỏ) và sau đó được phục vụ bởimáy chủ Express duy nhấttrên cổng được chỉ định (ví dụ:3000).
→Công cụ Backend:
chúng ta sử dụng các trình quản lý tiến trìnhđược tối ưu hóa cao(như PM2) để giữ máy chủ chạy liên tục và mạnh mẽ.
→Lỗi:
lỗi được ghi nhậnnội bộnhưng không bao giờ hiển thị chongười dùng công khai, ngăn chặn rò rỉ bảo mật❗
→Tối ưu hóa:
file được thu nhỏ mạnh mẽ và cache tích cực để đạthiệu suất tối đavà thời gian tảinhanh hơncho tất cả người dùng.

Rủi ro Bảo mật:

Tại sao không chạy chế độ phát triển trong môi trường sản xuất❓
Chạy máy chủ Express trong Chế độ Phát triển trên máy chủ công khai trực tiếp làlỗ hổng bảo mật nghiêm trọngvàkhông được khuyến khích.

→Rò rỉ Bảo mật:
Lỗi phát triển thường bao gồmdữ liệu nhạy cảm, như đường dẫn file trên máy chủ của bạn,biến môi trường, hoặc thậm chícái nhìnvào cấu trúc cơ sở dữ liệu của bạn.
Tiết lộ thông tin này cho kẻ tấn công làlỗ hổng nghiêm trọng❗

→Hiệu suất:
Chế độ dev được xây dựng chotiện lợi, không phải tốc độ.
Bạn sẽ trải nghiệm thời gianphản hồi chậm, quản lýtài nguyênkém và khả năngmở rộnghạn chế dưới tải người dùng thực.

→Ổn định:
Các công cụ nhưnodemonđược thiết kế đểkhởi động lạimã của bạn bất cứ khi nào bạn lưu thay đổi.
Hành vi này không thể đoán trước vàcực kỳ không ổn địnhcho ứng dụng công khai cần chạy 24/7❗

Thứ tự Quan trọng:
Xử lý Đường dẫn Quan trọng trong Express

Bây giờ, hãy xem quy trình quan trọng của việcthiết lậproutes vàmiddlewaretheo đúng thứ tự để đảm bảo Express xử lý tất cả yêu cầu chính xác.

Vai trò của Middleware:
app.use()

Trong Express, Middleware đơn giản là một hàm thực thi trong chu kỳrequest-response.
Nó có quyền truy cập vào đối tượngrequestreq, đối tượngresponseres, và hàmnextnexttrong chu kỳ.

→app.use(middleware):
Phương thức này chủ yếu được sử dụng để đăng ký middleware.
Nó thực thi hàm được cung cấp cho TẤT CẢ phương thứcHTTP(GET,POST, v.v.) và cho TẤT CẢđường dẫn(trừ khi chúng ta chỉ định tiền tố đường dẫn).

→Quy tắc Vàng:
Middleware thực thi theođúng thứ tựchúng được định nghĩa trong mã của chúng ta.
Khi một middleware gửiresponse(ví dụ:res.send('Hello')), chu kỳ dừng lại và không cómiddlewarehoặcroutexử lý nào tiếp theo được thực thi❗

Ví dụ về Thứ tự Luồng:

1. app.use(cors)
2. app.use(express.json)
3. app.use('/api', apiRouter)
4. app.use(express.static(dist_path))<
   – Đây là điểm phân tách quan trọng❗
5. …
   các route khác …

Bẫy React Router:

Tại sao Chúng ta Cầnapp.get('*')❓Đây làmảnh ghépcuối cùng của câu đố liên kết logicbackendcủa chúng ta với ứng dụngfrontend.

→Mục đích:
routeapp.get('*')là trình xử lýBắt mọi yêu cầu.
Nó sử dụng ký tự đại diện*để khớp vớimọi yêu cầuGETmàchưađược xử lý bởi bất kỳ middleware hoặc route nào được định nghĩa trước đó.

→Tình huống:
khi người dùng nhập một liên kết trực tiếp nhưmysite.com/profilevào trình duyệt, máy chủ sẽ nhận được yêu cầu cho/profile.

1. Expresskiểm tracác routeAPI(ví dụ:/api).
   Không khớp❗
2. Expresskiểm traexpress.static()để tìm file tên profile.
   Không khớp❗
3. Yêu cầuđược chuyểntớiapp.get('*').

→Giải pháp:
chúng ta hướng dẫn Express phục vụ file ứng dụng chính (index.html) chomọi đường dẫn không khớp.

app.get('*',(req,res)=>{// we tell Express:
"Send the HTML file and let React Router handle the URL."res.sendFile(path.resolve(FRONTEND_BUILD_PATH,'index.html'));});

→Kết quả:
Trình duyệt tảiindex.html, React tiếp quản, và React Router đọc URL/profilerồihiển thị component chính xác, tạo ra trải nghiệm ứng dụng một trang liền mạch❗

Kết luận❤️

Nếu bạn là người mới bắt đầu với phát triển backend và những điều này chưa thực sự rõ ràng ngay lập tức, đừng thất vọng, chúng chắc chắn có thểgây bối rối lúc đầu.
Tôi nghĩ tất cả chúng ta đều từng có những thắc mắc này khimới bắt đầu…
Tôi biết tôi chắc chắn đã từng❗ 🙃

Thách thức chính là chúng ta cầnthay đổi tư duyvàcáchsuy nghĩ, từ việc phục vụ tự động trong bộ nhớ của công cụ frontend như Vite, sang cách tiếp cậnthủ công hơnvàcó cấu trúc về routingcủa Express.

Tôi hy vọng bài viết nàygiúp ích cho bạn, hoặc có lẽ nhắc bạn nhớ về những khó khăn bạn đã đối mặt ởgiai đoạn đầuhành trình backend của mình.🤗