141 lines
18 KiB
HTML
141 lines
18 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Zk | ctm-407</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Lato&family=Ubuntu+Monodisplay=swap" />
|
|
<link rel="stylesheet" type="text/css" href="/style.css" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Zk | ctm-407</h1>
|
|
</header>
|
|
<article class="content">
|
|
<h3 id="introduction">Introduction</h3>
|
|
<p><em>HTTP redirection</em> is way to point one domain or address to another. There are a few different kinds of redirects, each of which mean something different to the client browser. The two most common types are temporary redirects and permanent redirects.</p>
|
|
<p><em>Temporary redirects</em> (response status code <strong>302 Found</strong>) are useful if a URL temporarily needs to be served from a different location. For example, if you are performing site maintenance, you may wish to use a temporary redirect from your domain to an explanation page to inform your visitors that you will be back shortly.</p>
|
|
<p><em>Permanent redirects</em> (response status code <strong>301 Moved Permanently</strong>), on the other hand, inform the browser that it should forget the old address completely and not attempt to access it anymore. These are useful when your content has been permanently moved to a new location, such as when you change domain names.</p>
|
|
<p>This guide will cover a more in depth explanation of how to implement each kind of redirect in Nginx, and go through some examples for specific use cases.</p>
|
|
<h2 id="prerequisites">Prerequisites</h2>
|
|
<p>To follow this tutorial, you will need:</p>
|
|
<ul>
|
|
<li>A server with Nginx installed and set up to serve your website(s). You can find some examples and instructions on the tutorials for <a href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04">Ubuntu 22.04</a>, <a href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-debian-10">Debian</a>, or <a href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-centos-8">CentOS</a>.</li>
|
|
</ul>
|
|
<h2 id="solution-at-a-glance">Solution at a Glance</h2>
|
|
<p>In Nginx, you can accomplish most redirects with the built-in <code>rewrite</code> directive. This directive is available by default on a fresh Nginx installation and can be used to create both temporary and permanent redirects. In its simplest form, it takes at least two arguments: the old URL and the new URL.</p>
|
|
<p>You can implement a temporary redirect with the following lines in your server configuration:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">Temporary</span><span class="w"> </span><span class="s">redirect</span><span class="w"> </span><span class="s">with</span><span class="w"> </span><span class="s">rewrite]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">www.domain1.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">rewrite</span><span class="w"> </span><span class="s">^/</span>$<span class="w"> </span><span class="s">http://www.domain2.com</span><span class="w"> </span><span class="s">redirect</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>This redirect instructs the browser to direct all requests for <code>www.domain1.com</code> to <code>www.domain2.com</code>. This solution, however, works only for a single page, not for the entire site. To redirect more than a single page, you can use the <code>rewrite</code> directive with <a href="https://www.digitalocean.com/community/tutorials/an-introduction-to-regular-expressions">regular expressions</a> to specify entire directories instead of just single files.</p>
|
|
<p><code>redirect</code> matches regular expression patterns in parenthesis. It then references the matched text in the redirect destination using <code>$1</code> expression, where <code>1</code> is the first group of matched text. In more complex examples, subsequent matched groups are given numbers sequentially.</p>
|
|
<p>For example, if you wanted to temporarily redirect every page within <code>www.domain1.com</code> to <code>www.domain2.com</code>, you could use the following:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">Temporary</span><span class="w"> </span><span class="s">redirect</span><span class="w"> </span><span class="s">with</span><span class="w"> </span><span class="s">rewrite]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">www.domain1.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">rewrite</span><span class="w"> </span><span class="s">^/(.*)</span>$<span class="w"> </span><span class="s">http://www.domain2.com/</span><span class="nv">$1</span><span class="w"> </span><span class="s">redirect</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">www.domain2.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>By default, the <code>rewrite</code> directive establishes a temporary redirect. If you would like to create a permanent redirect, you can do so by replacing <code>redirect</code> with <code>permanent</code> at the end of the directive, like this:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">Permanent</span><span class="w"> </span><span class="s">redirects]</span><span class="w"></span>
|
|
<span class="s">rewrite</span><span class="w"> </span><span class="s">^/</span>$<span class="w"> </span><span class="s">http://www.domain2.com</span><span class="w"> </span><span class="s"><^>permanent<^></span><span class="p">;</span><span class="w"></span>
|
|
<span class="k">rewrite</span><span class="w"> </span><span class="s">^/(.*)</span>$<span class="w"> </span><span class="s">http://www.domain2.com/</span><span class="nv">$1</span><span class="w"> </span><span class="s"><^>permanent<^></span><span class="p">;</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>Let’s move on to some specific examples.</p>
|
|
<h2 id="example-1-moving-to-a-different-domain">Example 1 — Moving to a Different Domain</h2>
|
|
<p>If you have established a web presence and would like to change your domain to a new address, it is best not to just abandon your old domain. Bookmarks to your site and links to your site located on other pages throughout the internet will break if your content disappears without any instructions to the browser about how to find its new location. Changing domains without redirecting will cause your site to lose traffic from previous visitors and older links.</p>
|
|
<p>In this example, we will configure a redirect from the old domain called <code>domain1.com</code> to the new one called <code>domain2.com</code>. We’ll use permanent redirects here because the old domain will be deprecated, and all traffic should go to the new domain from now on.</p>
|
|
<p>Let’s assume you have your website configured to be served from a single domain called <code>domain1.com</code> already configured in Nginx as follows:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">/etc/nginx/sites-available/domain1.com]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">domain1.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>We’ll also assume you are already serving your future version of website at <code>domain2.com</code>:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">/etc/nginx/sites-available/domain2.com]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">domain2.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>Let’s change the <code>domain1.com</code> server block configuration file to add a permanent redirect to <code>domain2.com</code>:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">/etc/nginx/sites-available/domain1.com]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">domain1.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">rewrite</span><span class="w"> </span><span class="s">^/(.*)</span>$<span class="w"> </span><span class="s">http://domain2.com/</span><span class="nv">$1</span><span class="w"> </span><span class="s">permanent</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>We’ve added the aforementioned redirect using a <code>rewrite</code> directive. The <code>^/(.*)$</code> regular expression matches everything after the <code>/</code> in the URL. For example, <code>http://domain1.com/<^>index.html<^></code> will get redirected to <code>http://domain2.com/<^>index.html<^></code>. To achieve the permanent redirect we simply add <code>permanent</code> after the <code>rewrite</code> directive.</p>
|
|
<p><$>[note]
|
|
<strong>Note:</strong> Remember to test your configuration using <code>nginx -t</code> and then restart Nginx after you make your changes.
|
|
<$></p>
|
|
<h2 id="example-2-creating-a-persistent-experience-despite-single-page-name-changes">Example 2 — Creating a Persistent Experience Despite Single Page Name Changes</h2>
|
|
<p>Sometimes, it is necessary to change the names of individual pages that have already been published and received traffic on your site. Changing the name alone would cause a 404 Not Found error for visitors trying to access the original URL, but you can avoid this by using a redirect. This makes sure that people who have bookmarked your old pages or found them through outdated links on search engines will still reach the correct page.</p>
|
|
<p>Let’s assume your website had two separate pages for products and services called <code>products.html</code> and <code>services.html</code> respectively. Now, you’ve decided to replace those two pages with a single offer page called <code>offers.html</code> instead. We will configure a simple redirect for <code>products.html</code> and <code>services.html</code> to <code>offers.html</code>.</p>
|
|
<p>We assume you have your website configured as follows:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">Original</span><span class="w"> </span><span class="s">server</span><span class="w"> </span><span class="s">block</span><span class="w"> </span><span class="s">configuration]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">example.com</span><span class="w"> </span><span class="s">www.example.com</span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>Configuring the redirects is as simple as using two redirect directives.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[label</span><span class="w"> </span><span class="s">Redirects</span><span class="w"> </span><span class="s">added</span><span class="w"> </span><span class="s">to</span><span class="w"> </span><span class="s">the</span><span class="w"> </span><span class="s">original</span><span class="w"> </span><span class="s">configuration]</span><span class="w"></span>
|
|
<span class="s">server</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="w"> </span><span class="s">server_name</span><span class="w"> </span><span class="s">example.com</span><span class="w"> </span><span class="s">www.example.com</span><span class="p">;</span><span class="w"></span>
|
|
|
|
<span class="w"> </span><span class="kn">rewrite</span><span class="w"> </span><span class="s"><^>^/products.html</span><span class="nv">$<^></span><span class="w"> </span><span class="s"><^>/offer.html</span><span class="w"> </span><span class="s">permanent<^></span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">rewrite</span><span class="w"> </span><span class="s"><^>^/services.html</span><span class="nv">$<^></span><span class="w"> </span><span class="s"><^>/offer.html</span><span class="w"> </span><span class="s">permanent<^></span><span class="p">;</span><span class="w"></span>
|
|
<span class="w"> </span><span class="kn">.</span><span class="w"> </span><span class="s">.</span><span class="w"> </span><span class="s">.</span><span class="w"></span>
|
|
<span class="err">}</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>The <code>rewrite</code> directive accepts the original address that has to be redirected as well as the destination address of a new page. Since the change here is not a temporary one, we used <code>permanent</code> in the directive as well. You can use as many redirects like this as you wish to make sure your visitors won’t see unnecessary 404 Not Found errors when moving site contents.</p>
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
<p>You now have the knowledge to redirect requests to new locations. Be sure to use the correct redirection type, as an improper use of temporary redirects can hurt your search ranking.</p>
|
|
<p>There are multiple other uses of HTTP redirects, including forcing secure SSL connections (i.e. using <code>https</code> instead of <code>http</code>) and making sure all visitors will end up only on the <code>www.</code> prefixed address of the website.</p>
|
|
<p>Using redirects correctly will allow you to leverage your current web presence while giving you the ability to modify your site structure as necessary. If you would like to learn more about the ways that you can redirect your visitors, Nginx has great documentation on the subject in <a href="http://nginx.org/en/docs/http/ngx_http_rewrite_module.html">rewrite module</a> sections of the official documentation and <a href="https://www.nginx.com/blog/creating-nginx-rewrite-rules/">official blog post on creating redirects</a>.</p>
|
|
</article>
|
|
<footer>
|
|
<p>Page generated on 2023-05-10</p>
|
|
</footer>
|
|
</main>
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('.tag').forEach(tag => {
|
|
let text = tag.innerText;
|
|
tag.innerText = '';
|
|
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|