thắc mắc Xin gợi ý về hướng redirect url

HaLinhNHP

Senior Member
Xin chào mọi người!

Mình có một web wp với url hiện tại là: domain.com/ten-bai-viet
Hiện mình đang chuyển sang nền tảng mới CSR viết bằng react/preactjs, url mới có dạng: domain.com/category-1/category-1-1/ten-bai-viet

Mình xin hướng làm redirect url, mình có thể sử dụng react và nodejs ạ.


Mong mọi người giúp đỡ.
 
Ý của bạn là khi User request đến URL cũ thì sẽ load được nội dung ở URL mới, mục đích là không cần thay đổi URL cũ, hiểu đơn giản là trên thanh Address Bar của browser vẫn hiển thị URL cũ, nhưng nội dung là của URL mới. Hay là khi User request đến URL cũ thì sẽ đá sang URL mới và lấy nội dung của URL mới? Cả 2 case thì Nginx đều làm được, case 1 thì Rewrite, case 2 thì Redirect.
 
Các bác nhìn cái web ở chữ kí mình, mình đang làm lại nó.

Giờ mình sắp xếp lại nội dung, từ wp chuyển sang CSR dùng react, mình muốn chủ động redirect từng url cũ sang url mới ạ
 
Kiểu mình sẽ có một file json hay txt, file đó chứa url cũ và url mới, app đọc file đó và thực hiện redirect ạ

Do cấu trúc url web mới mình làm lại nên muốn chủ động thực hiện redirect theo ý, làm thủ công từng link một ạ 😀
 
Trên server thì nếu chạy bằng apache thì coi cách config redirect bằng apache từ khoá "apache redirect url".

Tương tự cho Nginx thì tìm từ khoá "nginx redirect url".

Nếu xài WordPress thì coi xem có cái plugin redirect gì đó thì cài vào.

Còn react thì nó nằm ở trang mới thì dùng nó kiểu gì để redirect từ trang cũ hả trời?
 
Trên server thì nếu chạy bằng apache thì coi cách config redirect bằng apache từ khoá "apache redirect url".

Tương tự cho Nginx thì tìm từ khoá "nginx redirect url".

Nếu xài WordPress thì coi xem có cái plugin redirect gì đó thì cài vào.

Còn react thì nó nằm ở trang mới thì dùng nó kiểu gì để redirect từ trang cũ hả trời?
Web hiện tại mình bỏ nền tảng wp đi, chuyển sang static web dùng react.

Có dùng Google Cloud Storage - Build

Có package nào như này mà dùng cho google cloud không nhỉ, hic, mình mới học, hỏi nhiều cái hơi ngu ngơ.

https://www.npmjs.com/package/preact-cli-plugin-netlify
 
Có vẻ chủ thớt thì hơi yếu việc hình dung cái hệ thống mình có những gì và hoạt động thế nào và mọi người cũng chưa hiểu đúng vấn đề của ông chủ thớt thì phải.

Theo mình đoán mò nhé, trước kia là bạn có site WP, bài sẽ dạng: domain.com/ten-bai-viet
giờ bạn làm CRS với ReactJS, host static files trên Google Cloud Storage, bạn không còn có server PHP, nodejs, nginx, apache... gì nữa. Tức là về cơ bản app của bạn này chỉ là index.html, JS, CSS, việc phân biệt /category-1/category-1-1/ten-bai-viet là bài nào nội dung sao là thực hiện ở client side (trên browser của user)
Như vậy, đầu tiên là bạn phải xem khi vào /category-1/category-1-1/ten-bai-viet hoặc vào domain.com/ten-bai-viet trong cái setup mới này (trực tiếp từ url hoặc refresh cái trên browser), xem nó có ra gì không, response có nội dung thế nào? Theo mình là không, vì sao, vì request này vào Google Cloud Storage nó ko tìm thấy cái file mà phải vào / hoặc là trực tiếp index.html nó mới serve cái index.html file ấy.

Vậy phải làm thế nào? Vì dùng cloud (google) và client side rendering nên ko có cách nào cả, chỉ có một cách "hack" là set error page thành index.html, tức là vô /category-1/category-1-1/ten-bai-viet hay vô /ten-bai-viet thì nó đều chỉ trả về index.html thay vì not found và có cái index html thì nó sẽ load tiếp js, css và nó dựa vào cái url /category-1/category-1-1/ten-bai-viet để render ra page tương ứng. Với kiểu hack này thì bạn xử lý vấn đề khá đơn giản, ở React Route làm cái map từ "ten-bai-viet" -> cái URL mới của bạn.
Nhưng như vậy có mấy cái củ chuối:
  • Request thành công (render page bình thường) nhưng status code ra 404 hay 403....
  • Phải expose cái map danh sách bài viết này ra client và thực hiện ở đó

Với việc dùng CSR và chỉ host static files trên cloud thì nó như vậy. Rất củ chuối, không phù hợp kiểu blog bài viết, cần SEO, mình cũng ko biết cách xử lý khác, nên thay vì map domain.com -> google cloud storage như vậy bạn có thể làm domain.com -> vô một cái server (Server/Nginx/Google App Engine/App gì đó) -> tuỳ theo request mà serve cái file index.html của react hay xử lý tiếp (như của các bạn trên đây gợi ý)
 
Last edited:
vim /etc/nginx/conf.d/default.conf
map_hash_bucket_size 256; # see http://nginx.org/en/docs/hash.html

map $request_uri $new_uri {
include /etc/nginx/oldnew.map; #or any file readable by nginx
}
server {
listen 80;
listen [::]:80;
server_name localhost;

#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
if ($new_uri) {
return 301 $new_uri;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}

vim /etc/nginx/oldnew.map
/ten-bai-viet /category-1/category-1-1/ten-bai-viet;
/my-old-url /my-new-url;

Source: https://stackoverflow.com/questions/29354142/nginx-how-to-mass-permanent-redirect-from-a-given-list
 
Cảm ơn mọi người, đúng thật là mình mới lần đầu tự làm nên hơi rối thật, để mình ngâm cứu tiếp.
 
Có vẻ chủ thớt thì hơi yếu việc hình dung cái hệ thống mình có những gì và hoạt động thế nào và mọi người cũng chưa hiểu đúng vấn đề của ông chủ thớt thì phải.

Theo mình đoán mò nhé, trước kia là bạn có site WP, bài sẽ dạng: domain.com/ten-bai-viet
giờ bạn làm CRS với ReactJS, host static files trên Google Cloud Storage, bạn không còn có server PHP, nodejs, nginx, apache... gì nữa. Tức là về cơ bản app của bạn này chỉ là index.html, JS, CSS, việc phân biệt /category-1/category-1-1/ten-bai-viet là bài nào nội dung sao là thực hiện ở client side (trên browser của user)
Như vậy, đầu tiên là bạn phải xem khi vào /category-1/category-1-1/ten-bai-viet hoặc vào domain.com/ten-bai-viet trong cái setup mới này (trực tiếp từ url hoặc refresh cái trên browser), xem nó có ra gì không, response có nội dung thế nào? Theo mình là không, vì sao, vì request này vào Google Cloud Storage nó ko tìm thấy cái file mà phải vào / hoặc là trực tiếp index.html nó mới serve cái index.html file ấy.

Vậy phải làm thế nào? Vì dùng cloud (google) và client side rendering nên ko có cách nào cả, chỉ có một cách "hack" là set error page thành index.html, tức là vô /category-1/category-1-1/ten-bai-viet hay vô /ten-bai-viet thì nó đều chỉ trả về index.html thay vì not found và có cái index html thì nó sẽ load tiếp js, css và nó dựa vào cái url /category-1/category-1-1/ten-bai-viet để render ra page tương ứng. Với kiểu hack này thì bạn xử lý vấn đề khá đơn giản, ở React Route làm cái map từ "ten-bai-viet" -> cái URL mới của bạn.
Nhưng như vậy có mấy cái củ chuối:
  • Request thành công (render page bình thường) nhưng status code ra 404 hay 403....
  • Phải expose cái map danh sách bài viết này ra client và thực hiện ở đó

Với việc dùng CSR và chỉ host static files trên cloud thì nó như vậy. Rất củ chuối, không phù hợp kiểu blog bài viết, cần SEO, mình cũng ko biết cách xử lý khác, nên thay vì map domain.com -> google cloud storage như vậy bạn có thể làm domain.com -> vô một cái server (Server/Nginx/Google App Engine/App gì đó) -> tuỳ theo request mà serve cái file index.html của react hay xử lý tiếp (như của các bạn trên đây gợi ý)
Chuẩn pro
 
Back
Top