/ html / wiki / tutorials / nginx-tutorials / nginx-vhosts / nginx-vhosts.html
nginx-vhosts.html
  1  <!DOCTYPE html>
  2  <html lang="de">
  3     <head>
  4        <meta charset="UTF-8" />
  5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6        <meta http-equiv="onion-location" content="http://bopbopl6lohkl2rts3ltesjnag4hzs4jrx2h6k6etgq5xasbpqekzlqd.onion" />
  7        <title>BOP Wiki: Nginx Virtual Hosts</title>
  8        <link rel="stylesheet" href="/assets/stylesheet.css" />
  9        <link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
 10     </head>
 11     <body>
 12        <header>
 13           <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
 14           <script src="/assets/js/navbar-OpenClose.js"></script>
 15           <script src="/assets/js/lightbox.js"></script>
 16            <script src="/assets/js/copyCodeButton.js"></script>
 17           <link rel="stylesheet" href="/resources/js-libraries/highlightJS/atom-one-dark.min.css">
 18           <script src="/resources/js-libraries/highlightJS/highlight.min.js"></script>
 19           <script src="/resources/js-libraries/highlightJS/highlightjs-line-numbers.min.js"></script>
 20           <script>hljs.highlightAll();</script>
 21           <script>hljs.initLineNumbersOnLoad();</script>
 22           <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
 23           <div class="branding">
 24              <button class="toggle-btn-navbar" id="navbarOpenButton">☰</button>
 25              <a href="/">
 26              <img class="logo" src="/assets/img/logo.png">
 27              </a>
 28              <div class="typing-animation">BytesOfProgress</div>
 29           </div>
 30        </header>
 31        <div id="navbarContainer" class="navbar-container">
 32           <iframe class="navbar-iframe" src="/assets/navbar/navbar.html" frameBorder= "0"></iframe>
 33        </div>
 34        <main>
 35           <article class="blog-post">
 36              <header class="post-header">
 37                 <h1 class="post-title">Nginx Virtual Hosts</h1>
 38              </header>
 39           </article>
 40           <nav class="breadcrumb">
 41              <a href="/">Home</a>
 42              <span class="divider">›</span>
 43              <a href="/wiki/">Wiki</a>
 44              <span class="divider">›</span>
 45              <a href="/wiki/tutorials/tutorials.html">Tutorials</a>
 46              <span class="divider">›</span>
 47              <a href="/wiki/tutorials/nginx-tutorials/nginx-tutorials.html">Nginx Tutorials</a>
 48              <span class="divider">›</span>
 49              <span class="current">Nginx Virtual Hosts</span>
 50           </nav>
 51           <section class="post-content">
 52              <p>
 53                 Nginx virtual hosts, also known as server blocks, allow you to host multiple websites or applications on a single server by directing traffic based on the ports requested by clients.
 54              </p>
 55              <h2>Setting it up</h2>
 56              <p>
 57                 This method is tested in Debian 12.
 58              </p>
 59              <p>
 60                 The config file we need to edit is located at <code>/etc/nginx/sites-available/default</code>.
 61              </p>
 62              <p>
 63                 Alternatively, you can create a new config file to set up your virtual hosts, but make sure to tell Nginx the location and name of the new file by editing <code>/etc/nginx/nginx.conf</code>.
 64              </p>
 65              <p>
 66                 By default, Nginx has configured 1 virtual host, listening on port 80. Its index directory is <code>/var/www/html</code>.
 67                 There it will look for files called <code>index</code>, <code>index.html</code>, <code>index.htm</code>, or <code>index.nginx-debian.html</code>.
 68                 Of course, you can change the filenames it is looking for, or the whole path.
 69              </p>
 70              <p>
 71                 This is what the default file looks like:
 72              </p>
 73              <div class="code-box">
 74                 <pre><code>server {
 75      listen 80 default_server;
 76      listen [::]:80 default_server;
 77  
 78      root /var/www/html;
 79      index index.html index.htm index.nginx-debian.html;
 80  
 81      server_name _;
 82  
 83      location / {
 84          try_files $uri $uri/ =404;
 85      }
 86  }</code></pre>
 87              </div>
 88              <h2>Adding Another Virtual Host</h2>
 89              <p>
 90                 We can now add another virtual host to it. In this example, it will listen on port 8080 and have <code>/var/www/html2/vhost1index.html</code> as its index file.
 91              </p>
 92              <p>
 93                 This is what the file would look like with this example added:
 94              </p>
 95              <div class="code-box">
 96                 <pre><code>server {
 97      listen 80 default_server;
 98      listen [::]:80 default_server;
 99  
100      root /var/www/html;
101      index index.html;
102  
103      server_name _;
104  
105      location / {
106          try_files $uri $uri/ =404;
107      }
108  }
109  
110  server {
111      listen 8080;
112      listen [::]:8080;
113  
114      root /var/www/html2;
115      index vhost1index.html;
116  
117      server_name vhost1;
118  
119      location / {
120          try_files $uri $uri/ =404;
121      }
122  }</code></pre>
123              </div>
124              <h2>Testing and Restarting Nginx</h2>
125              <p>
126                 Now it's time to test our configuration by running the following command in our terminal:
127              </p>
128              <blockquote>
129                 # nginx -t
130              </blockquote>
131              <p>
132                 When no issues were found, restart Nginx by running:
133              </p>
134              <blockquote>
135                 # systemctl restart nginx
136              </blockquote>
137              <h2>Result</h2>
138              <p>
139                 Now our server hosts 2 different websites on different ports:
140              </p>
141              <table>
142                 <thead>
143                    <tr>
144                       <th>Port</th>
145                       <th>Server</th>
146                       <th>Directory</th>
147                    </tr>
148                 </thead>
149                 <tbody>
150                    <tr>
151                       <td>80</td>
152                       <td>default_server</td>
153                       <td>/var/www/html/index.html</td>
154                    </tr>
155                    <tr>
156                       <td>8080</td>
157                       <td>vhost1</td>
158                       <td>/var/www/html2/vhost1index.html</td>
159                    </tr>
160                 </tbody>
161              </table>
162           </section>
163           <footer class="post-footer">
164              <a href="/wiki/tutorials/nginx-tutorials/nginx-tutorials.html" class="cta-button">← Back</a>
165           </footer>
166        </main>
167     </body>
168  </html>