NGINX dynamic location to create dynamic og:image - html

Question

I developed a site that shows some products from a store. The site URL looks like that:
http://testsite.com
The site has the functionality of sharing the product (it's already working) generating a link that can be shared at facebook or WhatsApp or anywhere. The link of the shared product is:
http://testsite.com/product/1234
Where 1234 is the product ID. All the products have images with the ID name. Ex: 1234.jpg. The link for the image of the product ID 1234 is:
http://testsite.com/static/imgs/1234.jpg
This site is hosted using a simple NGINX server, that just provides the files.
At the head of my index.html file I have a default og:image for sharing:
<meta property="og:image" content="http://testsite.com/static/imgs/main.jpg">
I wanna the NGINX server to replace this default og:image by the shared ID image. I already know how to do that at NGINX. At the NGINX configuration file (/etc/nginx/conf.d/default.conf) I used the sub_filter option. My NGINX configuration file is:
server {
listen 80;
server_name *.testsite.com;
root /var/www/testsite.com/dist;
location / {
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location ~ /product/(.*) {
index index.html index.htm;
try_files $uri $uri/ /index.html;
sub_filter 'http://testsite.com/static/imgs/main.jpg'
'http://testsite.com/static/imgs/$1.jpg';
sub_filter_once on;
}
}
This configuration is working for the location /, but for the location ~ /product/(.*) it is not working.
When I test the sub_fiter option at the location / using any other image it replaces correctly.
QUESTIONS:
1) How can I get the product ID (1234) from the URL (http://testsite.com/product/1234)? $1 is not working.
2) I think that when entering at the location ~ /product/(.*), it also redirects for the location /. How can I fix this configuration file to works as expected?

Answer 1

I think your alias statement is the problem.
Reading in nginx docs:
location /i/ {
alias /data/w3/images/;
}
on request of “/i/top.gif”, the file /data/w3/images/top.gif will be sent.
It means that in your case on each ~/product/(.*) request /var/www/testsite.com/dist/index.html will be sent without taking product ID into account. You might want to configure alias on / to avoid that. This is also likely to be the reason you get "redirected" to /.
As for $1, it should work as you have it now. When you fix the alias, I think it will work then. If not, you can try the named match: (?<product>[0-9]+) instead of (.*), then you can use the $product variable to reference the id.
There's another small glitch in your code — you're adding extra quote marks on replace. The second argument to sub_filter is in quotes twice.
Working Example
UPDATE: Ok, I got it working on localhost with the following nginx config (testing on "Hello World"):
location ~ /product/(\d+)$ {
set $product $1;
try_files $uri $uri/ /index.html;
}
location / {
if ( $product = '' ) {
set $search 'Non-Existent-String';
}
if ( $product != '' ) {
set $search 'World'; # the string you want to replace
}
index index.html index.htm;
sub_filter '$search' 'Product #$product';
}
The key here is that when you use try_files, it does get to location /. So we need to sub_filter in /. We also don't want to sub_filter regular /index.html requests. Something like if ($product) sub_filter would be nice, but is impossible with nginx. So I just leave sub_filter but only set real search string for product requests.