nginxconfig.io/public/index.html

1175 lines
68 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="assets/css/app.min.css?v=COMMIT_HASH">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<title>nginxconfig.io</title>
<meta name="description" content="NGiИX configuration generator">
<meta name="keywords" content="nginx, config, configurator, /etc/nginx/nginx.conf, nginx performance, nginx tuning, nginx php, nginx, php fpm, wordpress, drupal, magento, python, django, Let's Encrypt, custom certificate, cdn, access_log, error_log, Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim, Angular, React, Vue.js, Ember.js, reverse proxy, Node.js">
<meta property="og:title" content="nginxconfig.io">
<meta property="og:description" content="NGiИX configuration generator: HTTPS, HTTP2, CDN, PHP, HHVM, Frontend, Reverse proxy, Node.js, WordPress, Drupal, Magento, Python, Django, 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://nginxconfig.io/assets/img/share.png">
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/quicksand/v9/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/quicksand/v9/6xKodSZaM9iE8KbpRA_pkHEYT8L_FYzokA.woff2" type="font/woff2" crossorigin="anonymous">
</head>
<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController" ng-csp>
<header>
<div class="container">
<div class="loader" ng-if="!masonryInit">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
<div class="sites">
<div class="title">Sites:</div>
<div class="group">
<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">&times;</span>
</button>
<button class="btn btn-sm btn-outline-light" ng-click="addSite()"> Add site</button>
</div>
</div>
<div class="presets">
<div class="title">Presets:</div>
<div class="group">
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('frontend')"
ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
tooltips
tooltip-template="• disabled PHP<br>• index.html fallback routing"
tooltip-side="bottom"
>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('backend')"
ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing"
tooltip-side="bottom"
>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('django')"
ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
tooltips
tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
tooltip-side="bottom"
>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isProxy() && !isRoot() }"
ng-click="setPreset('nodejs')"
tooltips
tooltip-template="• enabled reverse proxy"
tooltip-side="bottom"
>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
ng-click="setPreset('spa')"
tooltips
tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
tooltip-side="bottom"
>Single-page application</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('wordpress')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('drupal')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
<button
type="button"
class="btn btn-sm btn-outline-light"
ng-click="setPreset('magento')"
ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
tooltips
tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
tooltip-side="bottom"
><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
</div>
</div>
</div>
</header>
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="sites">
<ul class="nav nav-tabs nav-site-tab" role="tablist">
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('server')" ng-class="{ 'active': tab_site === 'server', 'changed': getSiteTabChanges('server') }">Server<small ng-cloak>({{ getSiteTabChanges('server') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('https')" ng-class="{ 'active': tab_site === 'https', 'changed': getSiteTabChanges('https') }">HTTPS<small ng-cloak>({{ getSiteTabChanges('https') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('php')" ng-class="{ 'active': tab_site === 'php', 'changed': getSiteTabChanges('php') }">PHP<small ng-cloak>({{ getSiteTabChanges('php') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('python')" ng-class="{ 'active': tab_site === 'python', 'changed': getSiteTabChanges('python') }">Python<small ng-cloak>({{ getSiteTabChanges('python') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('proxy')" ng-class="{ 'active': tab_site === 'proxy', 'changed': getSiteTabChanges('proxy') }">Reverse proxy<small ng-cloak>({{ getSiteTabChanges('proxy') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('routing')" ng-class="{ 'active': tab_site === 'routing', 'changed': getSiteTabChanges('routing') }">Routing<small ng-cloak>({{ getSiteTabChanges('routing') }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabSite('logging')" ng-class="{ 'active': tab_site === 'logging', 'changed': getSiteTabChanges('logging') }">Logging<small ng-cloak>({{ getSiteTabChanges('logging') }})</small></a>
</li>
</ul>
<div class="tab-content site-content">
<div class="tab-pane tab-server" ng-class="{ 'active': tab_site === 'server' }">
<div class="row mb-2">
<div class="col-sm-4">
<div class="form-group">
<label class="col-form-label-sm"><strong>Domain</strong></label>
<input type="text"
class="form-control form-control-sm domain"
ng-model="data.sites[site].domain"
ng-class="{ 'input-changed': data.sites[site].domain !== defaultData.sites[0].domain }"
ng-cloak
placeholder="{{ getDomain() }}"
autofocus>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-form-label-sm">
<span tooltips tooltip-template="Define path to project.">Path</span>
</label>
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].path"
ng-class="{ 'input-changed': data.sites[site].path !== defaultData.sites[0].path }"
ng-cloak
placeholder="{{ '/var/www/' + getDomain() }}">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="col-form-label-sm">
<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.sites[site].document_root"
ng-class="{ 'input-changed': data.sites[site].document_root !== defaultData.sites[0].document_root }">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Serve requests without www subdomain.">www subdomain</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].non_www !== defaultData.sites[0].non_www }">
<input class="form-check-input" type="checkbox" id="non_www" ng-model="data.sites[site].non_www" ng-true-value="false" ng-false-value="true">
<label class="form-check-label col-form-label-sm" for="non_www">
enabled <small>({{ isWWW() ? 'www.' : '' }}{{ getDomain() }})</small>
</label>
</div>
</div>
</div>
<div class="form-group row" ng-if="isWWW()">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Cookie-free CDN subdomain.">CDN subdomain</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].cdn !== defaultData.sites[0].cdn }">
<input class="form-check-input" type="checkbox" id="cdn" ng-model="data.sites[site].cdn">
<label class="form-check-label col-form-label-sm" for="cdn">
enabled <small>(cdn.{{ getDomain() }})</small>
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Redirect {{ isWWW() ? 'non-www version and ' : '' }}all subdomains to domain.">Redirect {{ isNonWWW() ? 'subdomains' : 'domain, subdomains' }}</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].redirect !== defaultData.sites[0].redirect }">
<input class="form-check-input" type="checkbox" id="redirect" ng-model="data.sites[site].redirect">
<label class="form-check-label col-form-label-sm" for="redirect">
enabled <small>(<code>{{ isNonWWW() ? ('*.' + getDomain() + ' → ' + getDomain()) : (getDomain() + ', *.' + getDomain() + ' → www.' + getDomain()) }}</code>)</small>
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code>listen</code>
</label>
<div class="col-sm-4">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">IPv4</div>
</div>
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].ipv4"
ng-class="{ 'input-changed': data.sites[site].ipv4 !== defaultData.sites[0].ipv4 }">
</div>
</div>
<div class="col-sm-5">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">IPv6</div>
</div>
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].ipv6"
ng-class="{ 'input-changed': data.sites[site].ipv6 !== defaultData.sites[0].ipv6 }">
</div>
</div>
</div>
</div>
<div class="tab-pane tab-https" ng-class="{ 'active': tab_site === 'https' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Provides support for HTTPS.<br><br><i>using Mozilla SSL config</i>">HTTPS</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].https !== defaultData.sites[0].https }">
<input class="form-check-input" type="checkbox" id="https" ng-model="data.sites[site].https">
<label class="form-check-label col-form-label-sm" for="https">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isHTTPS() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Provides support for HTTP/2.">HTTP/2</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].http2 !== defaultData.sites[0].http2 }">
<input class="form-check-input" type="checkbox" id="http2" ng-model="data.sites[site].http2">
<label class="form-check-label col-form-label-sm" for="http2">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isHTTPS() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Force redirection from HTTP to HTTPS.">Force HTTPS</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].force_https !== defaultData.sites[0].force_https }">
<input class="form-check-input" type="checkbox" id="force_https" ng-model="data.sites[site].force_https">
<label class="form-check-label col-form-label-sm" for="force_https">
enabled <small ng-cloak>(<code >{{ isNonWWW() ? ('http://' + getDomain() + ' → https://' + getDomain()) : ('http://www.' + getDomain() + ' → https://www.' + getDomain()) }}</code>)</small>
</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isHTTPS() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="HTTP Strict Transport Security is a web security policy mechanism which helps to protect websites against protocol downgrade attacks and cookie hijacking.">HSTS</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].hsts !== defaultData.sites[0].hsts }">
<input class="form-check-input" type="checkbox" id="hsts" ng-model="data.sites[site].hsts">
<label class="form-check-label col-form-label-sm" for="hsts">enabled</label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].hsts_subdomains !== defaultData.sites[0].hsts_subdomains, disabled: !isHSTS() }">
<input class="form-check-input" type="checkbox" id="hsts_subdomains" ng-model="data.sites[site].hsts_subdomains">
<label class="form-check-label col-form-label-sm" for="hsts_subdomains"><code class="small">includeSubDomains</code></label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].hsts_preload !== defaultData.sites[0].hsts_preload, disabled: !isHSTSSubdomains() }">
<input class="form-check-input" type="checkbox" id="hsts_preload" ng-model="data.sites[site].hsts_preload">
<label class="form-check-label col-form-label-sm" for="hsts_preload"><code class="small">preload</code></label>
</div>
</div>
</div>
<fieldset class="form-group" ng-class="{ disabled: !isHTTPS() }">
<div class="row">
<legend class="col-sm-3 col-form-label col-form-label-sm">Certification type</legend>
<div class="col-sm-9">
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].cert_type !== defaultData.sites[0].cert_type && data.sites[site].cert_type === 'letsencrypt' }">
<input class="form-check-input" type="radio" id="letsencrypt" ng-model="data.sites[site].cert_type" value="letsencrypt">
<label class="form-check-label col-form-label-sm" for="letsencrypt">
<span tooltips tooltip-template="Let's Encrypt based SSl.<br><br><i>free, automated, and open Certificate Authority</i>" tooltip-side="top">Let's Encrypt</span>
</label>
</div>
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].cert_type !== defaultData.sites[0].cert_type && data.sites[site].cert_type === 'custom' }">
<input class="form-check-input" type="radio" id="custom_cert" ng-model="data.sites[site].cert_type" value="custom">
<label class="form-check-label col-form-label-sm" for="custom_cert">custom certificate</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row" ng-if="isHTTPS() && isCertLetsEncrypt()">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Let's Encrypt expiration notify e-mail.">Let's Encrypt e-mail</span>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].email"
ng-class="{ 'input-changed': data.sites[site].email !== defaultData.sites[0].email }"
ng-cloak
placeholder="{{ 'info@' + getDomain() }}">
</div>
</div>
<div class="form-group row" ng-if="isHTTPS() && isCertCustom()" ng-cloak>
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Path to crt file">ssl_certificate</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].ssl_certificate"
ng-class="{ 'input-changed': data.sites[site].ssl_certificate !== defaultData.sites[0].ssl_certificate }"
placeholder="{{ data.directory_nginx + 'ssl/' + getDomain() + '.crt' }}">
</div>
</div>
<div class="form-group row" ng-if="isHTTPS() && isCertCustom()" ng-cloak>
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Path to key file">ssl_certificate_key</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].ssl_certificate_key"
ng-class="{ 'input-changed': data.sites[site].ssl_certificate_key !== defaultData.sites[0].ssl_certificate_key }"
placeholder="{{ data.directory_nginx + 'ssl/' + getDomain() + '.key' }}">
</div>
</div>
</div>
<div class="tab-pane tab-php" ng-class="{ 'active': tab_site === 'php' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
PHP
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].php !== defaultData.sites[0].php }">
<input class="form-check-input" type="checkbox" id="php" ng-model="data.sites[site].php">
<label class="form-check-label col-form-label-sm" for="php">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="WordPress security rules and login limiting <i>(if enabled)</i>.">WordPress rules</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].wordpress !== defaultData.sites[0].wordpress }">
<input class="form-check-input" type="checkbox" id="wordpress" ng-model="data.sites[site].wordpress">
<label class="form-check-label col-form-label-sm" for="wordpress">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Drupal security rules and login limiting <i>(if enabled)</i>.">Drupal rules</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].drupal !== defaultData.sites[0].drupal }">
<input class="form-check-input" type="checkbox" id="drupal" ng-model="data.sites[site].drupal">
<label class="form-check-label col-form-label-sm" for="drupal">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Magento security rules.">Magento rules</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].magento !== defaultData.sites[0].magento }">
<input class="form-check-input" type="checkbox" id="magento" ng-model="data.sites[site].magento">
<label class="form-check-label col-form-label-sm" for="magento">enabled</label>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-python" ng-class="{ 'active': tab_site === 'python' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
Python
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].python !== defaultData.sites[0].python }">
<input class="form-check-input" type="checkbox" id="python" ng-model="data.sites[site].python">
<label class="form-check-label col-form-label-sm" for="python">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isPython() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
Django rules
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].django !== defaultData.sites[0].django }">
<input class="form-check-input" type="checkbox" id="django" ng-model="data.sites[site].django">
<label class="form-check-label col-form-label-sm" for="django">enabled</label>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-proxy" ng-class="{ 'active': tab_site === 'proxy' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
Reverse proxy
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].proxy !== defaultData.sites[0].proxy }">
<input class="form-check-input" type="checkbox" id="proxy" ng-model="data.sites[site].proxy">
<label class="form-check-label col-form-label-sm" for="proxy">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isProxy() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
Path
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].proxy_path"
ng-class="{ 'input-changed': data.sites[site].proxy_path !== defaultData.sites[0].proxy_path }">
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isProxy() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code>proxy_pass</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].proxy_pass"
ng-class="{ 'input-changed': data.sites[site].proxy_pass !== defaultData.sites[0].proxy_pass }">
</div>
</div>
</div>
<div class="tab-pane tab-routing" ng-class="{ 'active': tab_site === 'routing' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Enable root directive."><code>root</code></span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].root !== defaultData.sites[0].root }">
<input class="form-check-input" type="checkbox" id="root" ng-model="data.sites[site].root">
<label class="form-check-label col-form-label-sm" for="root">enabled</label>
</div>
</div>
</div>
<fieldset class="form-group" ng-class="{ disabled: !isRoot() || !isPHP() }">
<div class="row">
<legend class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Defines the file that will be used as an index.">index</code>
</legend>
<div class="col-sm-9">
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].index !== defaultData.sites[0].index && data.sites[site].index === 'index.html' }">
<input class="form-check-input" type="radio" id="index.html" ng-model="data.sites[site].index" value="index.html">
<label class="form-check-label col-form-label-sm" for="index.html">index.html</label>
</div>
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].index !== defaultData.sites[0].index && data.sites[site].index === 'index.php' }">
<input class="form-check-input" type="radio" id="index.php" ng-model="data.sites[site].index" value="index.php">
<label class="form-check-label col-form-label-sm" for="index.php">index.php</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group" ng-class="{ disabled: !isRoot() }">
<div class="row">
<legend class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Configures fallback routing of unhandled requests.">Fallback routing</span>
</legend>
<div class="col-sm-9">
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].fallback_html !== defaultData.sites[0].fallback_html }">
<input class="form-check-input" type="checkbox" id="fallback_html" ng-model="data.sites[site].fallback_html">
<label class="form-check-label col-form-label-sm" for="fallback_html">index.html</label>
</div>
<div class="form-check" ng-class="{ 'input-changed': data.sites[site].fallback_php !== defaultData.sites[0].fallback_php, disabled: !isPHP() }" ng-cloak>
<input class="form-check-input" type="checkbox" id="fallback_php" ng-model="data.sites[site].fallback_php">
<label class="form-check-label col-form-label-sm" for="fallback_php">index.php</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row" ng-if="isFallbackHTML() && isFallbackPHP()">
<label class="col-sm-3 col-form-label col-form-label-sm">Fallback routing - PHP</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.sites[site].fallback_php_path"
ng-class="{ 'input-changed': data.sites[site].fallback_php_path !== defaultData.sites[0].fallback_php_path }">
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Handle legacy (non-pretty) (<code>foo.php/bar/baz</code>) routes.">Legacy PHP routing</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].php_legacy_routing !== defaultData.sites[0].php_legacy_routing }">
<input class="form-check-input" type="checkbox" id="php_legacy_routing" ng-model="data.sites[site].php_legacy_routing">
<label class="form-check-label col-form-label-sm" for="php_legacy_routing">enabled</label>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-logging" ng-class="{ 'active': tab_site === 'logging' }">
<div class="form-group row" ng-class="{ disabled: !isAccessLog() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Domain specific access_log."><code>access_log</code> by domain</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].access_log_domain !== defaultData.sites[0].access_log_domain }">
<input class="form-check-input" type="checkbox" id="access_log_domain" ng-model="data.sites[site].access_log_domain">
<label class="form-check-label col-form-label-sm" for="access_log_domain">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !isErrorLog() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Domain specific error_log."><code>error_log</code> by domain</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.sites[site].error_log_domain !== defaultData.sites[0].error_log_domain }">
<input class="form-check-input" type="checkbox" id="error_log_domain" ng-model="data.sites[site].error_log_domain">
<label class="form-check-label col-form-label-sm" for="error_log_domain">enabled</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="common">
<ul class="nav nav-tabs nav-common" role="tablist">
<li class="nav-item disabled">
<a class="nav-link">Global:</a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('https')" ng-class="{ 'active': tab_common === 'https', 'changed': commonChanges['https'] }">HTTPS<small ng-cloak>({{ commonChanges['https'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('security')" ng-class="{ 'active': tab_common === 'security', 'changed': commonChanges['security'] }">Security<small ng-cloak>({{ commonChanges['security'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('php')" ng-class="{ 'active': tab_common === 'php', 'changed': commonChanges['php'] }">PHP<small ng-cloak>({{ commonChanges['php'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('python')" ng-class="{ 'active': tab_common === 'python', 'changed': commonChanges['python'] }">Python<small ng-cloak>({{ commonChanges['python'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('performance')" ng-class="{ 'active': tab_common === 'performance', 'changed': commonChanges['performance'] }">Performance<small ng-cloak>({{ commonChanges['performance'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('logging')" ng-class="{ 'active': tab_common === 'logging', 'changed': commonChanges['logging'] }">Logging<small ng-cloak>({{ commonChanges['logging'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="setTabCommon('nginx')" ng-class="{ 'active': tab_common === 'nginx', 'changed': commonChanges['nginx'] }">NGINX<small ng-cloak>({{ commonChanges['nginx'] }})</small></a>
</li>
<li class="nav-item">
<a class="nav-link text-muted" ng-click="setTabCommon('tools')" ng-class="{ 'active': tab_common === 'tools', 'changed': commonChanges['tools'] }">Tools<small ng-cloak>({{ commonChanges['tools'] }})</small></a>
</li>
</ul>
<div class="tab-content common-content">
<div class="tab-pane tab-https" ng-class="{ 'active': tab_common === 'https' }">
<fieldset class="form-group" ng-class="{ disabled: !hasHTTPS() }">
<div class="row">
<legend class="col-sm-3 col-form-label col-form-label-sm">SSL profile</legend>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.ssl_profile !== defaultData.ssl_profile && data.ssl_profile === 'modern' }">
<input class="form-check-input" type="radio" id="ssl-modern" ng-model="data.ssl_profile" value="modern">
<label class="form-check-label col-form-label-sm" for="ssl-modern">
<span tooltips tooltip-template="Services with clients that support TLS 1.3 and don't need backward compatibility<br><br>Oldest compatible clients:<ul><li>{{ sslProfiles.modern.oldest_clients.join('</li><li>') }}</li></ul>" tooltip-side="top" tooltip-class="ssl">Mozilla Modern</span>
</label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.ssl_profile !== defaultData.ssl_profile && data.ssl_profile === 'intermediate' }">
<input class="form-check-input" type="radio" id="ssl-intermediate" ng-model="data.ssl_profile" value="intermediate">
<label class="form-check-label col-form-label-sm" for="ssl-intermediate">
<span tooltips tooltip-template="General-purpose servers with a variety of clients, recommended for almost all systems<br><br>Oldest compatible clients: <ul><li>{{ sslProfiles.intermediate.oldest_clients.join('</li><li>') }}</li></ul>" tooltip-side="top" tooltip-class="ssl">Mozilla Intermediate</span>
</label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.ssl_profile !== defaultData.ssl_profile && data.ssl_profile === 'old' }">
<input class="form-check-input" type="radio" id="ssl-old" ng-model="data.ssl_profile" value="old">
<label class="form-check-label col-form-label-sm" for="ssl-old">
<span tooltips tooltip-template="Compatible with a number of very old clients, and should be used only as a last resort<br><br>Oldest compatible clients: <ul><li>{{ sslProfiles.old.oldest_clients.join('</li><li>') }}</li></ul>" tooltip-side="top" tooltip-class="ssl">Mozilla Old</span>
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row" ng-class="{ disabled: !hasHTTPS() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="DNS resolver for stapling">OCSP DNS resolvers</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.resolver_cloudflare !== defaultData.resolver_cloudflare }">
<input class="form-check-input" type="checkbox" id="resolver_cloudflare" ng-model="data.resolver_cloudflare">
<label class="form-check-label col-form-label-sm" for="resolver_cloudflare" tooltips tooltip-template="<code>1.1.1.1, 1.0.0.1</code>" tooltip-side="top">Cloudflare Resolver</label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.resolver_google !== defaultData.resolver_google }">
<input class="form-check-input" type="checkbox" id="resolver_google" ng-model="data.resolver_google">
<label class="form-check-label col-form-label-sm" for="resolver_google" tooltips tooltip-template="<code>8.8.8.8, 8.8.4.4</code>" tooltip-side="top">Google Public DNS</label>
</div>
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.resolver_opendns !== defaultData.resolver_opendns }">
<input class="form-check-input" type="checkbox" id="resolver_opendns" ng-model="data.resolver_opendns">
<label class="form-check-label col-form-label-sm" for="resolver_opendns" tooltips tooltip-template="<code>208.67.222.222, 208.67.220.220</code>" tooltip-side="top">OpenDNS</label>
</div>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !hasCertLetsEncrypt() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
Let's Encrypt webroot
</label>
<div class="col-sm-9 col-xl-7">
<input type="text"
class="form-control form-control-sm"
ng-model="data.directory_letsencrypt"
ng-class="{ 'input-changed': data.directory_letsencrypt !== defaultData.directory_letsencrypt }">
</div>
</div>
</div>
<div class="tab-pane tab-security" ng-class="{ 'active': tab_common === 'security' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Referrer Policy is a new header that allows a site to control how much information the browser includes with navigations away from a document and should be set by all sites.">Referrer-Policy</code>
</label>
<div class="col-sm-9">
<select class="custom-select form-control-sm" ng-model="data.referrer_policy" ng-class="{ 'input-changed': data.referrer_policy !== defaultData.referrer_policy }">
<option value="no-referrer">no-referrer</option>
<option value="no-referrer-when-downgrade">no-referrer-when-downgrade</option>
<option value="origin">origin</option>
<option value="origin-when-cross-origin">origin-when-cross-origin</option>
<option value="same-origin">same-origin</option>
<option value="strict-origin">strict-origin</option>
<option value="strict-origin-when-cross-origin">strict-origin-when-cross-origin</option>
<option value="unsafe-url">unsafe-url</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Content Security Policy is an effective measure to protect your site from XSS attacks. By whitelisting sources of approved content, you can prevent the browser from loading malicious assets.">Content-Security-Policy</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.content_security_policy"
ng-class="{ 'input-changed': data.content_security_policy !== defaultData.content_security_policy }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Emitting nginx version on error pages and in the “Server” response header field.">server_tokens</code>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.server_tokens !== defaultData.server_tokens }">
<input class="form-check-input" type="checkbox" id="server_tokens" ng-model="data.server_tokens">
<label class="form-check-label col-form-label-sm" for="server_tokens">enabled</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code 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.">limit_req</code>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.limit_req !== defaultData.limit_req }">
<input class="form-check-input" type="checkbox" id="limit_req" ng-model="data.limit_req">
<label class="form-check-label col-form-label-sm" for="limit_req">enabled</label>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-php" ng-class="{ 'active': tab_common === 'php' }">
<div class="form-group row" ng-class="{ disabled: !hasPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
PHP server
</label>
<div class="col-sm-9">
<select class="custom-select form-control-sm" ng-model="data.php_server" ng-class="{ 'input-changed': data.php_server !== defaultData.php_server }">
<option value="127.0.0.1:9000">TCP: 127.0.0.1:9000</option>
<option value="/var/run/hhvm/sock">HHVM socket: /var/run/hhvm/sock</option>
<option value="/var/run/hhvm/hhvm.sock">HHVM socket: /var/run/hhvm/hhvm.sock</option>
<option value="/var/run/php5-fpm.sock">5.x socket: /var/run/php5-fpm.sock</option>
<option value="/var/run/php/php7.0-fpm.sock">7.0 socket: /var/run/php/php7.0-fpm.sock</option>
<option value="/var/run/php/php7.1-fpm.sock">7.1 socket: /var/run/php/php7.1-fpm.sock</option>
<option value="/var/run/php/php7.2-fpm.sock">7.2 socket: /var/run/php/php7.2-fpm.sock</option>
<option value="/var/run/php/php7.3-fpm.sock">7.3 socket: /var/run/php/php7.3-fpm.sock</option>
</select>
</div>
</div>
<div class="form-group row" ng-class="{ disabled: !hasPHP() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
PHP backup server
</label>
<div class="col-sm-9">
<select class="custom-select form-control-sm" ng-model="data.php_server_backup" ng-class="{ 'input-changed': data.php_server_backup !== defaultData.php_server_backup }">
<option value="">disabled</option>
<option value="127.0.0.1:9000">TCP: 127.0.0.1:9000</option>
<option value="/var/run/hhvm/sock">HHVM socket: /var/run/hhvm/sock</option>
<option value="/var/run/hhvm/hhvm.sock">HHVM socket: /var/run/hhvm/hhvm.sock</option>
<option value="/var/run/php5-fpm.sock">5.x socket: /var/run/php5-fpm.sock</option>
<option value="/var/run/php/php7.0-fpm.sock">7.0 socket: /var/run/php/php7.0-fpm.sock</option>
<option value="/var/run/php/php7.1-fpm.sock">7.1 socket: /var/run/php/php7.1-fpm.sock</option>
<option value="/var/run/php/php7.2-fpm.sock">7.2 socket: /var/run/php/php7.2-fpm.sock</option>
<option value="/var/run/php/php7.3-fpm.sock">7.3 socket: /var/run/php/php7.3-fpm.sock</option>
</select>
</div>
</div>
</div>
<div class="tab-pane tab-python" ng-class="{ 'active': tab_common === 'python' }">
<div class="form-group row" ng-class="{ disabled: !hasPython() }">
<label class="col-sm-3 col-form-label col-form-label-sm">
Python server
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.python_server"
ng-class="{ 'input-changed': data.python_server !== defaultData.python_server }">
</div>
</div>
</div>
<div class="tab-pane tab-performance" ng-class="{ 'active': tab_common === 'performance' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
gzip compression
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.gzip !== defaultData.gzip }">
<input class="form-check-input" type="checkbox" id="gzip" ng-model="data.gzip">
<label class="form-check-label col-form-label-sm" for="gzip">enabled</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<a href="https://github.com/google/ngx_brotli" target="_blank">brotli</a> compression
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.brotli !== defaultData.brotli }">
<input class="form-check-input" type="checkbox" id="brotli" ng-model="data.brotli">
<label class="form-check-label col-form-label-sm" for="brotli">enabled</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="{{ extensions.assets }}">Expiration - assets</span>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.expires_assets"
ng-class="{ 'input-changed': data.expires_assets !== defaultData.expires_assets }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="{{ extensions.images }}|{{ extensions.audio }}|{{ extensions.video }}">Expiration - media</span>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.expires_media"
ng-class="{ 'input-changed': data.expires_media !== defaultData.expires_media }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="{{ extensions.svg }}">Expiration - svg</span>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.expires_svg"
ng-class="{ 'input-changed': data.expires_svg !== defaultData.expires_svg }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="{{ extensions.fonts }}">Expiration - fonts</span>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.expires_fonts"
ng-class="{ 'input-changed': data.expires_fonts !== defaultData.expires_fonts }">
</div>
</div>
</div>
<div class="tab-pane tab-logging" ng-class="{ 'active': tab_common === 'logging' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Sets the path, format, and configuration for a buffered log write.">access_log</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.access_log"
ng-class="{ 'input-changed': data.access_log !== defaultData.access_log }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Configures logging path (with warn level).">error_log</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.error_log"
ng-class="{ 'input-changed': data.error_log !== defaultData.error_log }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Logging of errors about not found files into error_log.">log_not_found</code>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.log_not_found !== defaultData.log_not_found }">
<input class="form-check-input" type="checkbox" id="log_not_found" ng-model="data.log_not_found">
<label class="form-check-label col-form-label-sm" for="log_not_found">enabled</label>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-nginx" ng-class="{ 'active': tab_common === 'nginx' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
NGINX config directory
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.directory_nginx"
ng-class="{ 'input-changed': data.directory_nginx !== defaultData.directory_nginx }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Defines the number of worker processes. ">worker_processes</code>
</label>
<div class="col-sm-9">
<select class="custom-select form-control-sm" ng-model="data.worker_processes" ng-class="{ 'input-changed': data.worker_processes !== defaultData.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>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<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>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.user"
ng-class="{ 'input-changed': data.user !== defaultData.user }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Defines a file that will store the process ID of the main process.">pid</code>
</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
ng-model="data.pid"
ng-class="{ 'input-changed': data.pid !== defaultData.pid }">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<code tooltips tooltip-template="Sets the maximum allowed size of the client request body.">client_max_body_size</code>
</label>
<div class="col-sm-9">
<div class="input-group input-group-sm">
<input type="number"
min="0"
step="1"
class="form-control form-control-sm"
ng-model="data.client_max_body_size"
ng-class="{ 'input-changed': data.client_max_body_size !== defaultData.client_max_body_size }">
<div class="input-group-append">
<div class="input-group-text">MB</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane tab-tools" ng-class="{ 'active': tab_common === 'tools' }">
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Multiple configuration files<br><br><i>(ideal for multi-domain environment)</i>">Modularized structure</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.file_structure !== defaultData.file_structure }">
<input class="form-check-input" type="checkbox" id="file_structure" ng-model="data.file_structure" ng-true-value="'modularized'" ng-false-value="'unified'">
<label class="form-check-label col-form-label-sm" for="file_structure">enabled</label>
</div>
</div>
</div>
<div class="form-group row" ng-if="isModularized()">
<label class="col-sm-3 col-form-label col-form-label-sm">
<span tooltips tooltip-template="Symbolic link from sites-available/{{ getDomain() }}.conf to sites-enabled/{{ getDomain() }}.conf">Symlink vhost</span>
</label>
<div class="col-sm-9">
<div class="form-check form-check-inline" ng-class="{ 'input-changed': data.symlink !== defaultData.symlink }">
<input class="form-check-input" type="checkbox" id="symlink" ng-model="data.symlink">
<label class="form-check-label col-form-label-sm" for="symlink">enabled</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label col-form-label-sm">Share settings</label>
<div class="col-sm-9">
<input type="text"
class="form-control form-control-sm"
readonly
ng-value="getUrl()">
</div>
</div>
<div class="form-group row mt-4">
<label class="col-sm-3 col-form-label col-form-label-sm">Reset settings</label>
<div class="col-sm-9">
<button class="btn btn-danger btn-sm btn-reset" ng-click="reset()">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<aside class="sidebar">
<div class="github">
<div class="github-cover">
<div class="github-link">
<a href="https://github.com/digitalocean/nginxconfig.io" target="_blank" class="github-logo-link">
<ng-include src="'/assets/img/brands/github.svg'"></ng-include>
</a>
<br>
<a href="https://github.com/digitalocean/nginxconfig.io" target="_blank"><small>digitalocean /</small> <strong>nginxconfig.io</strong></a>
</div>
</div>
<div class="github-buttons">
<a class="github-button" href="https://github.com/digitalocean/nginxconfig.io" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star digitalocean/nginxconfig.io on GitHub">Star</a>
<a class="github-button" href="https://github.com/digitalocean/nginxconfig.io/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue digitalocean/nginxconfig.io on GitHub">Issue</a>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
<section class="steps">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1">
<ol ng-attr-data-active-step="{{ activeStep }}">
<li
class="download"
ng-mouseenter="setActiveStep('download')">
<div class="circle" ng-include="'/assets/img/download-cloud.svg'"></div>
<span class="counter"></span>Download
</li>
<li
class="ssl"
ng-if="isHTTPS() && (isSSLDHRequired() || isCertLetsEncrypt())"
ng-mouseenter="setActiveStep('ssl')">
<div class="circle" ng-include="'/assets/img/lock.svg'"></div>
<span class="counter"></span>SSL init
</li>
<li
class="certbot"
ng-if="isHTTPS() && isCertLetsEncrypt()"
ng-mouseenter="setActiveStep('certbot')">
<div class="circle" ng-include="'/assets/img/terminal.svg'"></div>
<span class="counter"></span>Certbot
</li>
<li
class="live"
ng-mouseenter="setActiveStep('live')">
<div class="circle" ng-include="'/assets/img/check-circle.svg'"></div>
<span class="counter"></span>Go Live!
</li>
</ol>
</div>
</div>
</div>
</section>
<main ng-class="{ 'active': masonryInit }">
<div class="container">
<div class="col-xl-10 offset-xl-1">
<div class="commands" ng-cloak>
<pre><code class="hljs bash" ng-include="'templates/commands.html?v=COMMIT_HASH'"></code></pre>
</div>
</div>
<div class="row grid">
<div class="grid-sizer col-xl-6"></div>
<div class="grid-item col-xl-12 mb-3 text-center" ng-cloak>
<button class="btn btn-primary btn-sm btn-download" ng-click="downloadZip()"><img src="assets/img/download.svg" alt="Download"> Generated config <small>(.zip)</small></button>
<button class="btn btn-success btn-sm btn-download btn-base64" ng-mouseenter="prepareBase64()" ng-click="copyAsBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')"><img src="assets/img/download.svg" alt="Download"> Copy Base64 <small>(inline)</small></button>
</div>
<div class="base64-zip-line-container">
<div id="base64-zip-line">{{ base64 }}</div>
</div>
<section class="file grid-item" ng-class="isModularized() || isWordPress() ? 'col-xl-6' : 'col-xl-12'" ng-cloak>
<strong>{{ data.directory_nginx }}nginx.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-nginx" ngclipboard-success="clipboardSuccess('nginx.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginx.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginx.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-nginx" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized()" ng-repeat="(_site, _domain) in getDomains() track by $index" ng-cloak>
<strong>{{ data.directory_nginx }}sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-domain-{{ $index }}" ngclipboard-success="clipboardSuccess('example.com')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf">
<pre><code class="nginx" ng-include="'templates/conf/sites-available/example.com.conf.html?v=COMMIT_HASH?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-domain-{{ $index }}" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized() && hasCertLetsEncrypt()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/letsencrypt.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-letsencrypt" ngclipboard-success="clipboardSuccess('letsencrypt.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/letsencrypt.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/letsencrypt.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-letsencrypt" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/security.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-security" ngclipboard-success="clipboardSuccess('security.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/security.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/security.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-security" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/general.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-general" ngclipboard-success="clipboardSuccess('general.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/general.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/general.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-general" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasPHP() && (isModularized() || hasWordPress())" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/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="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/php_fastcgi.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/php_fastcgi.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-php_fastcgi" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasPython() && isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/python_uwsgi.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-python_uwsgi" ngclipboard-success="clipboardSuccess('python_uwsgi.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/python_uwsgi.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/python_uwsgi.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-python_uwsgi" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasProxy() && isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/proxy.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-proxy" ngclipboard-success="clipboardSuccess('proxy.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/proxy.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/proxy.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-proxy" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasWordPress() && isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/wordpress.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-wordpress" ngclipboard-success="clipboardSuccess('wordpress.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/wordpress.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/wordpress.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-wordpress" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasDrupal() && isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/drupal.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-drupal" ngclipboard-success="clipboardSuccess('drupal.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/drupal.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/drupal.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-drupal" class="code highlighted"></div>
</section>
<section class="col-xl-6 grid-item file" ng-if="hasMagento() && isModularized()" ng-cloak>
<strong>{{ data.directory_nginx }}nginxconfig.io/magento.conf</strong>
<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-magento" ngclipboard-success="clipboardSuccess('magento.conf')">
<img src="assets/img/clipboard-dark.svg" alt="Copy to clipboard">
</button>
<div class="code source" data-filename="nginxconfig.io/magento.conf">
<pre><code class="nginx" ng-include="'templates/conf/nginxconfig.io/magento.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></code></pre>
</div><div id="file-magento" class="code highlighted"></div>
</section>
</div>
</div>
</main>
<footer>
<div class="container-fluid">
Lovingly made by <a href="https://balint.szekeres.me" target="_blank">Bálint Szekeres</a>
</div>
</footer>
<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="assets/js/vendor.min.js?v=COMMIT_HASH"></script>
<script src="assets/js/app.min.js?v=COMMIT_HASH"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>