'reverse proxy to redirect url to subdomain
I am trying to rewrite help URL from example.com/help to help.example.come.
I tried many ways for configuring nginx but When I'm requesting example.com/help, for a moment content appears and then it redirect to home page with help.example.come url.
I used nuxtjs v2.13.3 and nginx in my work. Here is my nginx conf:
- nuxtjs server block
server {
listen 80;
index index.html;
root /var/www/site/dist/;
server_name example.come;
location / {
proxy_pass http://127.0.0.1:3000;
}
# help redirecting...
location ~ ^/help/(.*)$ {
return 301 $scheme://help.example.come/$1;
}
}
- subdomain server block
server {
listen 80;
server_name help.example.come;
location / {
proxy_pass http://127.0.0.1:3000/help/;
}
location /_nuxt/ {
rewrite /help/(.*) /$1;
proxy_pass http://127.0.0.1:3000/_nuxt/;
}
location ~* \.(jpg|jpeg|gif|png|ico)$ {
rewrite ^/_nuxt(/.*) $1;
root /var/www/site/dist/;
expires 30d;
}
}
Solution 1:[1]
Not sure if this is doing exactly what you need but:
An incomming request on example.com/help/uri1/uri2 will be redirected to help.example.com/help/uri1/uri2
Before we are proxying the request to our backend we are rewriting the request_uri
rewrite ^/help(.*)$ /_nuxt$1 break;
Here we are replacing the /help/ with /_nuxt/.
Here is my test configuration:
server {
listen 80;
server_name example.com;
location /help {
#return 301 http://help.example.com$request_uri;
rewrite ^/help(.*)$ /_nuxt$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}
server {
listen 80;
server_name help.example.com
location / {
rewrite ^/help(.*)$ /_nuxt$1 break;
proxy_pass http://127.0.0.1:3000/;
}
}
server {
#Fake Backend
listen 3000;
location /_nuxt {
add_header "Content-Type" "text/html";
return 200 "$request_uri \n";
}
}
My lab request
8080 = example.com
8081 = help.example.com
8082 = fake bakend (:*3000)
root@deploy-VirtualBox:/etc/nginx/conf.d#curl -vL http://192.168.137.129:8080/help/uri1/uri2;
* Trying 192.168.137.129...
* TCP_NODELAY set
* Connected to 192.168.137.129 (192.168.137.129) port 8080 (#0)
> GET /help/uri1/uri2 HTTP/1.1
> Host: 192.168.137.129:8080
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 301 Moved Permanently
< Server: nginx/1.19.3
< Date: Wed, 30 Sep 2020 17:12:59 GMT
< Content-Type: text/html
< Content-Length: 169
< Connection: keep-alive
< Location: http://192.168.137.129:8081/help/uri1/uri2
<
* Ignoring the response-body
* Connection #0 to host 192.168.137.129 left intact
* Issue another request to this URL: 'http://192.168.137.129:8081/help/uri1/uri2'
* Found bundle for host 192.168.137.129: 0x55623c402020 [can pipeline]
* Trying 192.168.137.129...
* TCP_NODELAY set
* Connected to 192.168.137.129 (192.168.137.129) port 8081 (#1)
> GET /help/uri1/uri2 HTTP/1.1
> Host: 192.168.137.129:8081
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: nginx/1.19.3
< Date: Wed, 30 Sep 2020 17:12:59 GMT
< Content-Type: text/html
< Content-Length: 18
< Connection: keep-alive
<
/_nuxt/uri1/uri2
* Connection #1 to host 192.168.137.129 left intact
Solution 2:[2]
It's NOT gonna work, at least in Nuxt 2 (vue-router 3)
In Vue Router, every path has a component, for example:
| Path | Component |
|---|---|
| / | pages/index.vue |
| /help | pages/help/index.vue |
When you change the URL from example.com/help to help.example.com/, the path will change from /help to / right?
So, the vue-router will render the component of the / path and, it's pages/index.vue (not pages/help/index.vue any more).
But why you see the content appears at the first moment, because of the SSR. The server renders the content, then code from client side works, vue-router on client side works, it will re-render the router-view component.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 |