nginx-proxy-manager.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 Proxy Manager</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 Proxy Manager</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 Proxy Manager</span> 50 </nav> 51 <section class="post-content"> 52 <p>Nginx Proxy Manager is a web-based tool designed to simplify the setup and management of reverse proxies. It provides an easy interface to configure SSL certificates, manage multiple domains, and route traffic to local services. I will be referring to it as "NPM".</p> 53 <p>But why use something like this? It has many advantages like needing only one public IP address for multiple services on multiple domains, and only requiring one open port on the network instead of multiple ports for all your services.</p> 54 <h2>Installing & Running NPM</h2> 55 <p>This method is tested on Debian 12.</p> 56 <ol> 57 <li> 58 <h2>Install Docker and Docker-Compose</h2> 59 <p>The easiest way to host an instance of NPM is using docker-compose. You need Docker and Docker-Compose installed on your server.</p> 60 <blockquote> 61 $ sudo apt install docker.io docker-compose -y 62 </blockquote> 63 </li> 64 <li> 65 <h2>Create the docker-compose.yml file</h2> 66 <p>Once that is done, create a file called <code>docker-compose.yml</code> and put the following content in it:</p> 67 <div class="code-box"> 68 <pre><code>nginx-proxy-manager: 69 image: jc21/nginx-proxy-manager:latest 70 container_name: nginx-proxy-manager 71 environment: 72 DB_SQLITE_FILE: "/data/database.sqlite" 73 volumes: 74 - ./nginx-proxy-manager/config:/config 75 - ./nginx-proxy-manager/data:/data 76 - ./nginx-proxy-manager/letsencrypt:/etc/letsencrypt 77 ports: 78 - "81:81" # NPM webUI 79 - "443:443" # HTTPS for NPM 80 - "80:80" # HTTP for NPM 81 restart: unless-stopped 82 </code></pre> 83 </div> 84 </li> 85 <li> 86 <h2>Start NPM</h2> 87 <p>Now you can start NPM with one of these two commands:</p> 88 <div class="code-box"> 89 <pre><code># To run in current shell: 90 $ sudo docker-compose up 91 92 # To run it in the background: 93 $ sudo docker-compose up -d 94 </code></pre> 95 </div> 96 </li> 97 <li> 98 <h2>First Login</h2> 99 <p>Access the webUI of NPM in your browser using <code>http://IP_ADDRESS:81</code>.</p> 100 <p>These are the default login credentials:</p> 101 <div class="code-box"> 102 <pre><code>Email: admin@example.com 103 Password: changeme 104 </code></pre> 105 </div> 106 </li> 107 </ol> 108 <h2>Basic Usage of NPM</h2> 109 <p>In this example we will use one root domain and one subdomain.</p> 110 <ul> 111 <li><strong>Root domain:</strong> bytesofprogress.net</li> 112 <li><strong>Subdomain:</strong> subdomain.bytesofprogress.net</li> 113 </ul> 114 <ol> 115 <li> 116 <h3>Set Up DNS Records</h3> 117 <p>The first step is to point your DNS A-Record or AAAA-Record to the public IP address of your NPM instance. In this example, Cloudflare DNS is being used.</p> 118 </li> 119 <li> 120 <h3>Issue an SSL Certificate</h3> 121 <p>Then, we want to issue an SSL certificate:</p> 122 <img src="issue-cert-1.png" style="height: 225px; max-height: 90%; max-width: 95%; width: 800px"> 123 <p>For a wildcard certificate (which includes subdomains), type <code>*.example.com</code>. Then enable "Use DNS challenge" and choose Cloudflare as the DNS provider. Paste your Cloudflare API Token.</p> 124 <p>You can obtain your API-Token by logging into the 125 <a class="text-link" href="https://dash.cloudflare.com/" target="_blank">Cloudflare Dashboard</a>. 126 From there, navigate to your Profile → API Tokens. Then click on "Create Token" and choose the 127 template "Edit Zone DNS". Select the zone of your domain. 128 </p> 129 <img src="issue-cert-2.png" style="height: 600px; max-height: 90%; max-width: 95%; width: 350px"> 130 <p>Now, click on "Save". The process can take up to a few minutes.</p> 131 </li> 132 <li> 133 <h3>Create a Proxy Host</h3> 134 <p>You can now create your first proxy host:</p> 135 <img src="proxy-host-1.png" style="height: 200px; max-height: 90%; max-width: 95%; width: 800px"> 136 <img src="proxy-host-2.png" style="height: 550px; max-height: 90%; max-width: 95%; width: 350px"> 137 </li> 138 </ol> 139 </section> 140 <footer class="post-footer"> 141 <a href="/wiki/tutorials/nginx-tutorials/nginx-tutorials.html" class="cta-button">← Back</a> 142 </footer> 143 </main> 144 </body> 145 </html>