In this post, we will show how to redirect to different web pages based on the clients' language settings.

Embeded image

Let’s say we have an origin site which supports different languages at different locations. For example, this is the /en/ location.

$ curl 'http://test-edge.com/en/'
Hello, world!

Note the English text, “Hello World”.

And we also have a French version under the /fr/ location.

$ curl 'http://test-edge.com/fr/'
Bonjour, le monde!

This is French text.

The goal here is when the client accesses the root location, /, we can automatically redirect to a language-specific location. We’ll use the Accept-Language request header sent by the clients.

Embeded image

As always, let’s go to the OpenResty Edge’s Admin web console. This is our sample deployment of the console. Every user has her own local deployment.

This time we use our on-going sample application for the test-edge.com domain.

Let’s enter this application.

Screenshot

We already have an upstream defined.

Screenshot

This my_backend upstream has only 1 backend server. It is also the origin site we just tested at the beginning.

Screenshot

And we also have a page rule already defined.

Screenshot

This page rule sets up a reverse proxy to the my_backend upstream which we just saw earlier.

Screenshot

Create a new page rule.

Screenshot

We enable a rule condition to check for the URI /.

Screenshot

Let’s see all the variables we can choose from.

Screenshot

Select URI.

Screenshot

We choose the string equality operator.

Screenshot

Screenshot

Enter the value / to match the root location only.

Screenshot

And a second condition to check the language.

Screenshot

Screenshot

We choose “Request header” for the variable.

Screenshot

Enter the request header name, “Accept-Language”.

Screenshot

For the match operator,

Screenshot

We choose “prefix”.

Screenshot

This is because when multiple languages are specified at the same time, we only care about the first one.

For the matched value, we select the regular expression type, “Regex”.

Screenshot

Screenshot

Enter the regex value, “fr\b”.

Screenshot

The “\b” sequence means matching a word boundary. Then both “fr” and “fr-CA” will get matched, for example.

Here we check the “Caseless” box to do case insensitive matching.

Screenshot

Note that we now have two conditions and they are AND’d together. That is, both of them must be matched for the actions below to be executed. The conditions are now complete.

Now we add a new action.

Screenshot

Search for the action “redirect”.

Choose the action type, “redirect”.

Screenshot

Then we configure the target URI to jump to.

Screenshot

Choose “custom”. We want to enter the URI ourselves.

Screenshot

Enter “/fr/”.

Screenshot

Keep the remaining fields intact.

Screenshot

We skip any subsequent rules if this rule is matched.

Screenshot

We need to make sure that this rule always runs before other rules. Let’s mark it as an Always-Top rule. An Always-Top rule is not a “normal rule”.

Screenshot

Save this rule.

Screenshot

We can see the newly added page rule is indeed on the top of the rule list.

Screenshot

It is indeed before our previous proxy rule.

We need to make a new release to push out our new page rule, as always.

Screenshot

Screenshot

Ship it!

Screenshot

It is fully synchronized.

Screenshot

Now the new page rule has been pushed to all the gateway clusters and servers.

Our configuration changes do NOT require server reload, restart, or binary upgrade. So it’s very efficient and scalable.

Embeded image

On the terminal, we can send HTTP requests with curl.

curl -I -H 'Accept-Language: fr-CA, fr, en' http://test-edge.com/

Note that we specify 3 languages: fr-CA, fr, and en. So French takes precedence over English for this request.

Screenshot

Run this command.

Note that it is indeed a redirect to /fr/.

Screenshot

We can make curl follow redirects automatically.

curl -L -H 'Accept-Language: fr, en' http://test-edge.com/

Note the -L option.

Screenshot

Run this command.

We can see the French text returned.

Screenshot

Next we’d add a generic page rule to redirect to the English page for other languages.

Screenshot

Create a new page rule.

Screenshot

We still enable a rule condition to check for the URI /.

Screenshot

Screenshot

Still select URI.

Screenshot

Still string equality.

Screenshot

Screenshot

Enter value / as before.

Screenshot

The condition is now complete. This time we don’t bother checking the request header.

Add a new redirect action as before.

Screenshot

Screenshot

Screenshot

Screenshot

This time, we enter “/en/” for the target URI.

Screenshot

We skip any subsequent rules if this rule is matched.

Screenshot

We still make sure that this rule runs before any other “normal rules”.

Screenshot

Save this rule.

Screenshot

We can see the newly added page rule is before the proxy rule but after the French language rule.

Screenshot

Make a new configuration release again.

Screenshot

Screenshot

Ship it again!

Screenshot

It is synchronized again.

We can test the / location with the web browser. This web browser uses the English language setting.

http://test-edge.com/

We can see the English text “Hello, world” is displayed in the web browser.

Screenshot

And we can also see from the address bar, the URI becomes /en/. This is what I’d like to cover today.

If you like this tutorial, please subscribe to this blog site and/or our Vimeo account and/or our YouTube channel. Thank you!

About This Article and Associated Video

This article and its associated video are both generated automatically by our OpenResty Showman product from a simple screenplay file.

About The Author

Yichun Zhang is the creator of the OpenResty® open source project. He is also the founder and CEO of the OpenResty Inc. company. He contributed a dozen open source Nginx 3rd-party modules, quite some Nginx and LuaJIT core patches, and designed products like OpenResty Edge, OpenResty XRay, and OpenResty Showman.

Translations

We provide the Chinese translation for this article on blog.openresty.com.cn. We welcome interested readers to contribute translations in other natural languages as long as the full article is translated without any omissions. We thank them in advance.

We are hiring

We always welcome talented and enthusiastic engineers to join our team at OpenResty Inc. to explore various open source software’s internals and build powerful analyzers and visualizers for real world applications built atop the open source software. If you are interested, please send your resume to talents@openresty.com . Thank you!