nginxconfig.io/public/index.html

391 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:400,700">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/bootstrap.min.css?v=4.0.0">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/highlight-github.min.css?v=9.12.0">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/angular-tooltips.min.css?v=1.2.2">
<link rel="stylesheet" href="https://cdn.nginxconfig.io/assets/css/app.css">
<link rel="icon" type="image/png" href="https://cdn.nginxconfig.io/assets/img/favicon.png">
<title>nginxconfig.io</title>
<meta name="description" content="Online nginx configuration generator">
<meta name="keywords" content="nginx, config, configurator, /etc/nginx/nginx.conf, nginx performance, nginx tuning, nginx php, nginx, php fpm, wordpress, cdn, access_log, error_log, Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim, Angular, React, Vue.js, Ember.js">
<meta property="og:title" content="nginxconfig.io">
<meta property="og:description" content="Online nginx configuration generator: HTTPS, HTTP2, CDN, PHP (Laravel, Symfony, CodeIgniter…), Frontend (Angular, React, Vue.js…), WordPress, security headers, rate limiting, expiration by file types…">
<meta property="og:type" content="website">
<meta property="og:url" content="https://nginxconfig.io">
<meta property="og:image" content="https://cdn.nginxconfig.io/assets/img/share.png">
</head>
<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController">
<header>
<div class="container">
<div class="logo">nginxconfig.io</div>
<div class="row">
<div class="col-sm-10 col-lg-8 col-xl-6 offset-sm-1 offset-lg-2 offset-xl-3">
<div class="input-group url" ng-class="{active: isDirty}">
<div class="input-group-prepend">
<div class="input-group-text" ngclipboard data-clipboard-target="#url" ngclipboard-success="clipboardSuccess('url')"><img src="https://cdn.nginxconfig.io/assets/img/clipboard.svg" alt="Copy to clipboard"></div>
</div>
<input type="text" id="url" class="form-control form-control-sm" ng-value="location.absUrl()" readonly>
<div class="input-group-append">
<div class="input-group-text" ng-click="reset()"><img src="https://cdn.nginxconfig.io/assets/img/refresh.svg" alt="Reset"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-lg-2 options">
<div class="adsbygoogle-container d-block d-md-none">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6543577519725877"
data-ad-slot="4527334349"></ins>
<script>
(window.adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="note">⌃ advertisement ⌃</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label">Domain</label>
<input type="text" class="form-control form-control-sm" ng-model="data.domain">
</div>
<div class="form-group">
<label class="form-label">
<span tooltips tooltip-template="Define path to project.">Path</span>
</label>
<input type="text" class="form-control form-control-sm" ng-model="data.path">
</div>
<div class="form-group">
<label class="form-label">
<span tooltips tooltip-template="Define public path in project path.">Document root</span>
</label>
<input type="text" class="form-control form-control-sm" ng-model="data.document_root">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="https" ng-model="data.https">
<label class="form-check-label" for="https">
<span tooltips tooltip-template="Provides support for HTTPS.<br><br><i>using Let's Encrypt and Mozilla SSL config</i>">HTTPS</span>
</label>
</div>
<div class="form-check" ng-if="data.https">
<input class="form-check-input" type="checkbox" id="http2" ng-model="data.http2">
<label class="form-check-label" for="http2">
<span tooltips tooltip-template="Provides support for HTTP/2.">HTTP/2</span>
</label>
</div>
<div class="form-group" ng-if="data.https">
<label class="form-label">
<span tooltips tooltip-template="Let's Encrypt expiration notify e-mail.">E-mail</span>
</label>
<input type="text" class="form-control form-control-sm" ng-model="data.email">
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cdn" ng-model="data.cdn">
<label class="form-check-label" for="cdn">
<span tooltips tooltip-template="Cookie-free CDN subdomain.">CDN</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="non_www" ng-model="data.non_www">
<label class="form-check-label" for="non_www">
<span tooltips tooltip-template="Serve requests without www subdomain.">non-www</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="index_html" ng-model="data.index_html">
<label class="form-check-label" for="index_html">
<span tooltips tooltip-template="Pass unhandled requests to index.html.<br><br><i>Angular, React, Vue.js, Ember.js</i>...">index.html</span>
</label>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label">
<span tooltips tooltip-template="PHP-FPM via TCP or unix socket.">PHP</span>
</label>
<select class="form-control" ng-model="data.php">
<option value="off">disabled</option>
<option value="tcp">TCP</option>
<option value="5.x">5.x socket</option>
<option value="7.0">7.0 socket</option>
<option value="7.1">7.1 socket</option>
<option value="7.2">7.2 socket</option>
</select>
</div>
<div class="form-check" ng-if="data.php !== 'off'">
<input class="form-check-input" type="checkbox" id="index_php" ng-model="data.index_php">
<label class="form-check-label" for="index_php">
<span tooltips tooltip-template="Pass unhandled requests to index.php.<br><br><i>Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim...</i>">index.php</span>
</label>
</div>
<div class="form-check" ng-if="data.php !== 'off'">
<input class="form-check-input" type="checkbox" id="wordpress" ng-model="data.wordpress">
<label class="form-check-label" for="wordpress">
<span tooltips tooltip-template="WordPress security rules and login limiting <i>(if enabled)</i>.">WordPress</span>
</label>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<label class="form-label">File structure</label>
<div class="form-check">
<input class="form-check-input" type="radio" id="unified" ng-model="data.file_structure" value="unified">
<label class="form-check-label" for="unified">
<span tooltips tooltip-template="Combine configuration to a single file.<br><br><i>(if possible)</i>">unified</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="separated" ng-model="data.file_structure" value="separated">
<label class="form-check-label" for="separated">
<span tooltips tooltip-template="Multiple configuration files<br><br><i>(ideal for multi-domain environment)</i>">separated</span>
</label>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Sets the maximum number of simultaneous connections that can be opened by a worker process.">worker_processes</code></label>
<select class="form-control" ng-model="data.worker_processes">
<option value="auto">auto</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</div>
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Defines user and group credentials used by worker processes.<br>If group is omitted, a group whose name equals that of user is used.">user</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.user">
</div>
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Defines a file that will store the process ID of the main process.">pid</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.pid">
</div>
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Sets the path, format, and configuration for a buffered log write.">access_log</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.access_log">
</div>
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Configures logging path (with warn level).">error_log</code></label>
<input type="text" class="form-control form-control-sm" ng-model="data.error_log">
</div>
<div class="form-group">
<label class="form-label"><code tooltips tooltip-template="Sets the maximum allowed size of the client request body.">client_max_body_size</code></label>
<div class="input-group">
<input type="number" min="0" step="1" class="form-control form-control-sm" ng-model="data.client_max_body_size">
<div class="input-group-append">
<div class="input-group-text">MB</div>
</div>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gzip" ng-model="data.gzip">
<label class="form-check-label" for="gzip">
<code tooltips tooltip-template="Gzipping of responses.">gzip</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="server_tokens" ng-model="data.server_tokens">
<label class="form-check-label" for="server_tokens">
<code tooltips tooltip-template="Emitting nginx version on error pages and in the “Server” response header field.">server_tokens</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="log_not_found" ng-model="data.log_not_found">
<label class="form-check-label" for="log_not_found">
<code tooltips tooltip-template="Logging of errors about not found files into error_log.">log_not_found</code>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="limit_req" ng-model="data.limit_req">
<label class="form-check-label" for="limit_req">
<span tooltips tooltip-template="Used to limit the request processing rate per a defined key, in particular, the processing rate of requests coming from a single IP address."><code>limit_req</code></span>
</label>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="form-group">
<label class="form-label"><span tooltips tooltip-template="Adding or modifying the “Expires” and “Cache-Control” response header fields provided that the response code equals 200, 201, 204, 206, 301, 302, 303, 304, 307, or 308.<br><br>{{ extensions.assets }}">assets <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_assets">
</div>
<div class="form-group">
<label class="form-label"><span tooltips tooltip-template="Adding or modifying the “Expires” and “Cache-Control” response header fields provided that the response code equals 200, 201, 204, 206, 301, 302, 303, 304, 307, or 308.<br><br>{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}">media <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_media">
</div>
<div class="form-group">
<label class="form-label"><span tooltips tooltip-template="Adding or modifying the “Expires” and “Cache-Control” response header fields provided that the response code equals 200, 201, 204, 206, 301, 302, 303, 304, 307, or 308.<br><br>{{ extensions.svg }}">svg <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_svg">
</div>
<div class="form-group">
<label class="form-label"><span tooltips tooltip-template="Adding or modifying the “Expires” and “Cache-Control” response header fields provided that the response code equals 200, 201, 204, 206, 301, 302, 303, 304, 307, or 308.<br><br>{{ extensions.fonts }}">fonts <code>expires</code></span></label>
<input type="text" class="form-control form-control-sm" ng-model="data.expires_fonts">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-7 files">
<div class="row" ng-cloak>
<div ng-if="data.https" class="col-xl-12">
<div class="commands">
<pre><code class="hljs bash"><span class="hljs-comment"># HTTPS: create Diffie-Hellman keys</span>
<span class="hljs-section">openssl dhparam</span> <span class="hljs-attribute">-dsaparam</span> <span class="hljs-attribute">-out</span> /etc/nginx/dhparam.pem <span class="hljs-number">2048</span>
<span class="hljs-comment"># HTTPS: create ACME-challenge common directory</span>
<span class="hljs-section">sudo</span> <span class="hljs-attribute">-u</span> {{ data.user }} <span class="hljs-section">sh</span> <span class="hljs-attribute">-c</span> "<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> /var/www/_letsencrypt"
<span class="hljs-comment"># HTTPS: certbot (obtain certificates)</span>
<span class="hljs-section">certbot certonly</span> <span class="hljs-attribute">--webroot</span> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> {{ data.domain }} <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> www.{{ data.domain }}<span ng-if="data.cdn"> <span class="hljs-attribute" tooltips tooltip-template="--domain">-d</span> cdn.{{ data.domain }}</span> <span class="hljs-attribute">--email</span> {{ data.email }} <span class="hljs-attribute" tooltips tooltip-template="--webroot-path">-w</span> /var/www/_letsencrypt <span class="hljs-attribute" tooltips tooltip-template="--non-interactive">-n</span> <span class="hljs-attribute">--agree-tos</span> <span class="hljs-attribute">--force-renewal</span></code></pre>
</div>
</div>
<div class="file" ng-class="data.file_structure === 'separated' || data.https || (data.php !== 'off' && data.wordpress) ? 'col-xl-6' : 'col-xl-12'">
<strong>/etc/nginx/nginx.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-nginx" ngclipboard-success="clipboardSuccess('nginx.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === 'nginx.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/nginx.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-nginx" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.file_structure === 'separated'">
<strong>/etc/nginx/sites-enabled/{{ data.domain }}.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-domain" ngclipboard-success="clipboardSuccess('example.com')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === 'example.com'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/example.com.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-domain" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.https">
<strong>/etc/nginx/_ssl.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-ssl" ngclipboard-success="clipboardSuccess('_ssl.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_ssl.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_ssl.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-ssl" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.file_structure === 'separated' && data.https">
<strong>/etc/nginx/_letsencrypt.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-letsencrypt" ngclipboard-success="clipboardSuccess('_letsencrypt.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_letsencrypt.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_letsencrypt.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-letsencrypt" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.file_structure === 'separated'">
<strong>/etc/nginx/_general.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-general" ngclipboard-success="clipboardSuccess('_general.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_general.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_general.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-general" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.php !== 'off' && data.file_structure === 'separated'">
<strong>/etc/nginx/_php.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-php" ngclipboard-success="clipboardSuccess('_php.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_php.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_php.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-php" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.php !== 'off' && (data.file_structure === 'separated' || (data.php !== 'off' && data.wordpress))">
<strong>/etc/nginx/_php_fastcgi.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-php_fastcgi" ngclipboard-success="clipboardSuccess('_php_fastcgi.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_php_fastcgi.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_php_fastcgi.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-php_fastcgi" class="code highlighted"></div>
</div>
<div class="col-xl-6 file" ng-if="data.php !== 'off' && data.wordpress && data.file_structure === 'separated'">
<strong>/etc/nginx/_wordpress.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-wordpress" ngclipboard-success="clipboardSuccess('_wordpress.conf')">
<img src="https://cdn.nginxconfig.io/assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<span class="clipboard-success" ng-if="clipboardCopy === '_wordpress.conf'">Copied!</span>
<div class="code source">
<pre><code class="nginx" ng-include="'templates/_wordpress.conf.html'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-wordpress" class="code highlighted"></div>
</div>
</div>
</div>
<div class="col-md-3 sidebar">
<iframe class="github-star" src="https://ghbtns.com/github-btn.html?user=valentinxxx&repo=nginxconfig.io&type=star&count=true&size=large"></iframe>
<div class="adsbygoogle-container">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6543577519725877"
data-ad-slot="3412896941"></ins>
<script>
(window.adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="note">⌃ advertisement ⌃</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container-fluid">
Lovingly made at <img src="https://cdn.nginxconfig.io/assets/img/balaton.svg" alt="Lake Balaton" class="balaton"><span class="text-muted">(<a href="https://en.wikipedia.org/wiki/Lake_Balaton" target="_blank">Lake Balaton, Hungary</a>)</span>
<div class="crypto">
BTC: <strong>1CeKtgNStn5BGk46gt14kNMhsnJoFGUfkN</strong><br>
ETH: <strong>0xe84Bc747dc81329894e610747B99C6bd51437269</strong><br>
LTC: <strong>LRiwXxE8dPPwNn6kvApEvwrNEX5kbisr2U</strong>
</div>
</div>
</footer>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3084378-31"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-3084378-31');
</script>
<script src="https://cdn.nginxconfig.io/assets/js/highlight.min.js?v=9.12.0"></script>
<script src="https://cdn.nginxconfig.io/assets/js/clipboard.min.js?v=1.7.1"></script>
<script src="https://cdn.nginxconfig.io/assets/js/angular.min.js?v=1.6.8"></script>
<script src="https://cdn.nginxconfig.io/assets/js/ngclipboard.min.js?v=1.1.3"></script>
<script src="https://cdn.nginxconfig.io/assets/js/angular-tooltips.min.js?v=1.2.2"></script>
<script src="https://cdn.nginxconfig.io/assets/js/app.js"></script>
</body>
</html>