{"id":249,"date":"2018-02-09T18:49:08","date_gmt":"2018-02-09T10:49:08","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=249"},"modified":"2021-01-04T11:03:11","modified_gmt":"2021-01-04T03:03:11","slug":"understanding-the-difference-between-the-root-and-alias-directives-in-nginx","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/understanding-the-difference-between-the-root-and-alias-directives-in-nginx\/","title":{"rendered":"Understanding the difference between the root and alias directives in Nginx"},"content":{"rendered":"<p><a href=\"https:\/\/www.nginx.com\/\" rel=\"noopener\" target=\"_blank\">Nginx<\/a> is a web server that is good for serving as a <a href=\"https:\/\/www.techcoil.com\/blog\/the-reverse-proxy-server\/\" rel=\"noopener\" target=\"_blank\">reverse proxy server<\/a>, load balancer or HTTP cache. <\/p>\n<p>One of the most important task in configuring Nginx to proxy <a href=\"https:\/\/www.techcoil.com\/glossary\/http\/\" rel=\"noopener\" target=\"_blank\">HTTP<\/a> \/ HTTPS traffic is telling Nginx where to look for files that it needs for serving HTTP \/ HTTPS requests. <\/p>\n<p>This posts discusses the <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#root\" rel=\"noopener\" target=\"_blank\"><code>root<\/code><\/a> and <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#alias\" rel=\"noopener\" target=\"_blank\"><code>alias<\/code><\/a> directives that we can use in Nginx configuration files for mapping a url from a HTTP request to a file on the server file system.<\/p>\n<h2>Where can we use the root directive?<\/h2>\n<p>The <code>root<\/code> directive is typically placed in <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#server\" rel=\"noopener\" target=\"_blank\"><code>server<\/code><\/a> and <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#location\" rel=\"noopener\" target=\"_blank\"><code>location<\/code><\/a> blocks. Placing a <code>root<\/code> directive in the server block makes the <code>root<\/code> directive available to all <code>location<\/code> blocks within the same server block.<\/p>\n<h3>A Nginx configuration example to illustrate how root directive will be applied<\/h3>\n<p>The following is a set of configurations for illustrating how the <code>root<\/code> directive is applied: <\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name example.com;\r\n    listen 80;\r\n\r\n    index index.html;\r\n    root \/var\/www\/example.com;\r\n\r\n    location \/ {\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n\r\n    location ^~ \/images {\r\n        root \/var\/www\/static;\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n}\r\n<\/pre>\n<p>From the configuration above, Nginx will look inside the <strong><code>\/var\/www\/static<\/code><\/strong> directory on the server to look for files to serve HTTP requests made to <strong><code>http:\/\/example.com\/images\/logo.png<\/code><\/strong> or <strong><code>http:\/\/example.com\/images\/funny-monkey.jpg<\/code><\/strong>. <\/p>\n<p>Nginx will look inside the <strong><code>\/var\/www\/example.com<\/code><\/strong> directory for files to serve HTTP requests made to <strong><code>http:\/\/example.com\/contact.html<\/code><\/strong> or <strong><code>http:\/\/example.com\/about\/us.html<\/code><\/strong>.<\/p>\n<h2>What does the root directive tells Nginx?<\/h2>\n<p>The <code>root<\/code> directive tells Nginx to take the request url and append it behind the specified directory.<\/p>\n<p>For example, with the following configuration block:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name example.com;\r\n    listen 80;\r\n\r\n    index index.html;\r\n    root \/var\/www\/example.com;\r\n\r\n    location \/ {\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n\r\n    location ^~ \/images {\r\n        root \/var\/www\/static;\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n}\r\n\r\n<\/pre>\n<p>Nginx will map the request made to:<\/p>\n<ul>\n<li>\n<strong><code>http:\/\/example.com\/images\/logo.png<\/code><\/strong> into the file path <strong><code>\/var\/www\/static\/images\/logo.png<\/code><\/strong>.<\/li>\n<li><strong><code>http:\/\/example.com\/contact.html<\/code><\/strong><\/strong> into the file path <strong><code>\/var\/www\/example.com\/contact.html<\/code><\/strong><\/li>\n<li><strong><code>http:\/\/example.com\/about\/us.html<\/code><\/strong><\/strong> into the file path <strong><code>\/var\/www\/example.com\/about\/us.html<\/code><\/strong><\/li>\n<\/ul>\n<h2>Where can we use the alias directive?<\/h2>\n<p>The <code>alias<\/code> directive can only be placed in a <code>location<\/code> block.<\/p>\n<p>Placing a <code>alias<\/code> directive in a <code>location<\/code> block overrides the <code>root<\/code> or <code>alias<\/code> directive that was applied at a higher scope.<\/p>\n<p>The following is a set of configurations for illustrating how the <code>alias<\/code> directive is applied:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name example.com;\r\n    listen 80;\r\n \r\n    index index.html;\r\n    root \/var\/www\/example.com;\r\n \r\n    location \/ {\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n \r\n    location ^~ \/images {\r\n        alias \/var\/www\/static;\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n}\r\n<\/pre>\n<p>From the configuration above, Nginx will look inside the <strong><code>\/var\/www\/static<\/code><\/strong> directory on the server to look for files to serve HTTP requests made to <strong><code>http:\/\/example.com\/images\/logo.png<\/code><\/strong> or <strong><code>http:\/\/example.com\/images\/funny-monkey.jpg<\/code><\/strong>. <\/p>\n<p>Nginx will look inside the <strong><code>\/var\/www\/example.com<\/code><\/strong> directory for files to serve HTTP requests made to <strong><code>http:\/\/example.com\/contact.html<\/code><\/strong> or <strong><code>http:\/\/example.com\/about\/us.html<\/code><\/strong>. <\/p>\n<p>Note that the \"<strong>location \/<\/strong>\" block take the root directive as there is no <code>root<\/code> or <code>alias<\/code> directive contained within the block.<\/p>\n<p>The \"<strong>location ^~ \/images<\/strong>\" takes the <code>alias<\/code> directive and overrides the <code>root<\/code> directive.<\/p>\n<h2>What does the alias directive tells Nginx?<\/h2>\n<p>The <code>alias<\/code> directive tells Nginx to replace what is defined in the location block with the path specified by the <code>alias<\/code> directive. <\/p>\n<p>For example, with the following configuration block:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nserver {\r\n    server_name example.com;\r\n    listen 80;\r\n\r\n    index index.html;\r\n    root \/var\/www\/example.com;\r\n\r\n    location \/ {\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n\r\n    location ^~ \/images {\r\n        alias \/var\/www\/static;\r\n        try_files $uri $uri\/ =404;\r\n    }\r\n}\r\n<\/pre>\n<p>Nginx will map the request made to:<\/p>\n<ul>\n<li>\n<strong><code>http:\/\/example.com\/images\/logo.png<\/code><\/strong> into the file path <strong><code>\/var\/www\/static\/logo.png<\/code><\/strong>.<\/li>\n<li>\n<strong><code>http:\/\/example.com\/images\/third-party\/facebook-logo.png<\/code><\/strong> into the file path <strong><code>\/var\/www\/static\/third-party\/facebook-logo.png<\/code><\/strong>.<\/li>\n<li><strong><code>http:\/\/example.com\/contact.html<\/code><\/strong><\/strong> into the file path <strong><code>\/var\/www\/example.com\/contact.html<\/code><\/strong><\/li>\n<li><strong><code>http:\/\/example.com\/about\/us.html<\/code><\/strong><\/strong> into the file path <strong><code>\/var\/www\/example.com\/about\/us.html<\/code><\/strong><\/li>\n<\/ul>\n<h2>Using root directive over alias directive<\/h2>\n<p><a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#alias\" rel=\"noopener\" target=\"_blank\">Nginx documentation on the alias directive<\/a> suggests that it is better to use <code>root<\/code> over <code>alias<\/code> when the location matches the last part of the directive\u2019s value.<\/p>\n<p>For example, if you want to define an <code>alias<\/code> directive for a location block like the following:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nlocation \/images\/ {\r\n    alias \/data\/w3\/images\/;\r\n}\r\n<\/pre>\n<p>You should consider defining a <code>root<\/code> directive for that location block:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nlocation \/images\/ {\r\n    root \/data\/w3;\r\n}\r\n<\/pre>\n<h2>Using alias directive over root directive<\/h2>\n<p>We use the <code>alias<\/code> directive when we want requests made to multiple urls to be served by files contained within the same directory on the server file system.<\/p>\n<p>For instance, if we want requests made for <code>\/images\/*<\/code> and <code>\/css\/*<\/code> to be served from files located in the <code>\/var\/www\/static<\/code> directory, we can use the following configuration set:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nlocation ^~ \/images {\r\n    alias \/var\/www\/static;\r\n    try_files $uri $uri\/ =404;\r\n}\r\n\r\nlocation ^~ \/css {\r\n    alias \/var\/www\/static;\r\n    try_files $uri $uri\/ =404;\r\n}\r\n<\/pre>\n\n      <ul id=\"social-sharing-buttons-list\">\n        <li class=\"facebook\">\n          <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwp.me%2Fp245TQ-41\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n            <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\" alt=\"Facebook icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"twitter\">\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?text=&url=https%3A%2F%2Fwp.me%2Fp245TQ-41&via=Techcoil_com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\" alt=\"Twitter icon\"> Tweet\n          <\/a>\n        <\/li>\n        <li class=\"linkedin\">\n          <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=1&title=&url=https%3A%2F%2Fwp.me%2Fp245TQ-41&source=https:\/\/www.techcoil.com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\" alt=\"Linkedin icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"pinterest\">\n          <a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fwww.techcoil.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F249&description=\" class=\"pin-it-button\" target=\"_blank\" role=\"button\" rel=\"nofollow\" count-layout=\"horizontal\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\" alt=\"Pinterest icon\"> Save\n          <\/a>\n        <\/li>\n      <\/ul>\n    ","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/www.nginx.com\/\" rel=\"noopener\" target=\"_blank\">Nginx<\/a> is a web server that is good for serving as a <a href=\"https:\/\/www.techcoil.com\/blog\/the-reverse-proxy-server\/\" rel=\"noopener\" target=\"_blank\">reverse proxy server<\/a>, load balancer or HTTP cache. <\/p>\n<p>One of the most important task in configuring Nginx to proxy <a href=\"https:\/\/www.techcoil.com\/glossary\/http\/\" rel=\"noopener\" target=\"_blank\">HTTP<\/a> \/ HTTPS traffic is telling Nginx where to look for files that it needs for serving HTTP \/ HTTPS requests. <\/p>\n<p>This posts discusses the <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#root\" rel=\"noopener\" target=\"_blank\"><code>root<\/code><\/a> and <a href=\"http:\/\/nginx.org\/en\/docs\/http\/ngx_http_core_module.html#alias\" rel=\"noopener\" target=\"_blank\"><code>alias<\/code><\/a> directives that we can use in Nginx configuration files for mapping a url from a HTTP request to a file on the server file system.<\/p>\n","protected":false},"author":1,"featured_media":1240,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[4],"tags":[501,23,497,225,425,502,195,438],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/Nginx-Logo.jpg","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-41","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/249"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1240"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}