cloudflare-tunnel.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: Websites with Cloudflare Tunnel</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">Websites with Cloudflare Tunnel</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 <span class="current">Websites with Cloudflare Tunnel</span> 48 </nav> 49 <section class="post-content"> 50 <p> 51 Cloudflare Tunnels are really useful if you want 52 to publish your website or webservice on the internet 53 without opening ports, paying for a static IPv4 or setting 54 up dynamic DNS and worrying about SSL certificates. 55 </p> 56 57 <p> 58 It even lets you publish multiple services or websites without 59 you needing a public IPv4 at all! 60 </p> 61 62 <p> 63 In this guide we will take a look on how to set up Cloudflare 64 tunnels easily. This will work for every webapp, although 65 hosting video streaming and large files is restricted by 66 <a href="https://www.cloudflare.com/service-specific-terms-application-services/#content-delivery-network-terms"> 67 Cloudflare's Service-Specific Terms for the CDN 68 </a>. 69 </p> 70 71 <p> 72 For this you will need a domain name managed by Cloudflare by either using 73 Cloudflare as your domain registrar or pointing your domain to 74 Cloudflare's nameservers. 75 </p> 76 77 <h2>Setting it up</h2> 78 79 <p> 80 You have the option of creating a tunnel via the dashboard or via the 81 command line. I recommend getting started with the dashboard option, since 82 it allows you to manage the tunnel from any machine, and anywhere. 83 </p> 84 85 <h2>Steps:</h2> 86 87 <ol> 88 <li>Sign up for a free Cloudflare account.</li> 89 <li> 90 Navigate and login to your 91 <a href="https://one.dash.cloudflare.com/">Cloudflare Zero Trust dashboard</a>. 92 </li> 93 <li>Navigate to Networks → Tunnels and select "create a tunnel".</li> 94 <li>Choose Cloudflared for the connector type.</li> 95 <li>Enter a name for your tunnel and click "save".</li> 96 <li> 97 Check that the environment under "Choose an environment" reflects the 98 operating system on your machine, then copy the command in the box below 99 and paste it into the terminal of your server. 100 </li> 101 <li> 102 Once the command has finished running, your connector will appear in the 103 tunnel options. Click "Next". 104 </li> 105 <li> 106 In the Public Hostnames tab, choose a domain and specify any subdomain 107 or path information and specify a service, for example "https://localhost:8000". 108 Make sure to select the protocol the website is serving right now. 109 </li> 110 <li> 111 Under Additional application settings, you can specify any parameters 112 you would like to add to your tunnel configuration. Then save your settings. 113 </li> 114 <li> 115 After saving the tunnel, you will be redirected to the Tunnels page. 116 Look for your new tunnel being listed with its active connector. 117 </li> 118 </ol> 119 <p> 120 <img src="tunnel.png" alt="Cloudflare Tunnel Setup" width="768" height="256"> 121 </p> 122 <h2>Forcing SSL</h2> 123 <h2>Steps:</h2> 124 <ol> 125 <li> 126 Navigate to your 127 <a href="https://dash.cloudflare.com/">Cloudflare Dashboard</a>. 128 </li> 129 <li>Choose your domain, and then navigate to "Rules → Page Rules".</li> 130 <li>Click on "Create page rule".</li> 131 <li> 132 Enter the URL you want to enforce HTTPS for, and select "Always Use HTTPS" 133 in the dropdown menu. 134 </li> 135 <li>Click on "Save and deploy page rule".</li> 136 </ol> 137 <p> 138 <img src="force-SSL.png" alt="Force SSL Page Rule" width="768" height="300"> 139 </p> 140 </section> 141 <footer class="post-footer"> 142 <a href="/wiki/tutorials/tutorials.html" class="cta-button">← Back</a> 143 </footer> 144 </main> 145 </body> 146 </html>