This commit is contained in:
Bálint Szekeres
2019-11-11 00:20:17 +01:00
parent 0f8d62a9ab
commit 4b60c9e481
17 changed files with 332 additions and 162 deletions

View File

@@ -0,0 +1,98 @@
<span class="step" ng-if="steps[step].slug === 'download'"><!--
step: download
--><ol>
<li>
<strong>Download</strong> generated config: <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
</li>
<li>
<strong>Upload</strong> to server's <code>{{ data.directory_nginx.replace(endingSlashRegex, '') }}</code> directory<br>
or <strong>Copy</strong> as Base64 string: <strong><a href="#" ng-mouseenter="prepareBase64()" ng-click="copyAsBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">Copy to clipboard</a></strong> and <strong>Paste</strong> from clipboard and run the command<br>
(<code>echo 'BASE64' | base64 --decode > {{ data.directory_nginx }}nginxconfig.io-{{ getDomains().join(',') }}.zip</code>)
</li>
<li>
Go to NGINX directory (over SSH):<br>
<code><span class="hljs-section">cd</span> {{ data.directory_nginx.replace(endingSlashRegex, '') }}</code>
</li>
<li>
<strong>Backup</strong> current configuration:<br>
<code><span class="hljs-section">tar</span> <span class="hljs-attribute">-czvf</span> nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/</code>
</li>
<li>
<strong>Unzip</strong> the uploaded archive:<br>
<code><span class="hljs-section">unzip</span> <span class="hljs-attribute">-o</span> nginxconfig.io-{{ getDomains().join(',') }}.zip</code><br>
(you probably need to install <strong>unzip</strong>: <code><span class="hljs-section"></span><strong>sudo</strong> <span class="hljs-section">apt-get</span> <span class="hljs-attribute">install</span> unzip</code>)
</li>
</ol></span><!--
--><span class="step" ng-if="steps[step].slug === 'ssl'"><ol><!--
step: ssl
--><!--
✔ SSL DH required --><li ng-if="isSSLDHRequired()">Generate <strong>Diffie-Hellman keys</strong>:<br>
<code><span class="hljs-section">openssl</span> <span class="hljs-attribute">dhparam</span> <span class="hljs-attribute">-out</span> {{ data.directory_nginx }}dhparam.pem <span class="hljs-number">{{ sslProfiles[ data.ssl_profile ].dh_param_size }}</span></code>
</li><!--
✔ Let's Encrypt
--><li ng-if="hasCertLetsEncrypt()">Create a common <strong>ACME-challenge</strong> directory (for <strong>Let's Encrypt</strong>):<br>
<code><span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }}</code><br>
<code><span class="hljs-section">chown</span> <span class="hljs-attribute">{{ data.user }}</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }}</code></li></ol></span><!--
--><span class="step" ng-if="steps[step].slug === 'certbot'"><!--
step: certbot
--><ol>
<li>
Comment out SSL related directives in configuration:<br>
<code><span class="hljs-section">sed</span> <span class="hljs-attribute">-i -r</span> 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g'<span ng-if="isUnified()"><!--
--> {{ data.directory_nginx }}nginx.conf</span><span ng-if="isModularized()"><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><!--
--> {{ data.directory_nginx }}sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span></code>
</li>
<li>
Reload NGINX:<br>
<code><strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx</code>
</li>
<li>
Obtain certificate{{ getDomains().length > 1 ? 's' : '' }}:<br>
<div ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><code>
<span class="hljs-section">certbot</span> <!--
--><span class="hljs-attribute">certonly</span> <!--
--><span class="hljs-attribute">--webroot</span> <!--
--><span ng-if="isNonWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' + _domain + '"' : _domain }} </span><!--
--><span ng-if="isWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' : '' }}www.{{ _domain }}{{ _domain.indexOf('-') !== -1 ? '"' : '' }} </span><!--
--><span ng-if="isCDN(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' : '' }}cdn.{{ _domain }}{{ _domain.indexOf('-') !== -1 ? '"' : '' }} </span><!--
--><span class="hljs-attribute">--email</span> {{ data.sites[_site].email ? data.sites[_site].email : 'info@' + _domain }} <!--
--><span class="hljs-attribute" tooltips tooltip-template="--webroot-path" tooltip-side="top">-w</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }} <!--
--><span class="hljs-attribute" tooltips tooltip-template="--non-interactive" tooltip-side="top">-n</span> <!--
--><span class="hljs-attribute">--agree-tos</span> <!--
--><span class="hljs-attribute">--force-renewal</span></code></div>
</li>
<li>
Reload NGINX:<br>
<code><strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx</code>
</li>
<li>
Configure Certbot to reload NGINX after success renew:<br>
<code><span class="hljs-section">echo</span> <span class="hljs-attribute">-e</span> '#!/bin/bash\nnginx -t && systemctl reload nginx' | <strong>sudo</strong> <span class="hljs-section">tee</span> /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code><br>
<code><strong>sudo</strong> <span class="hljs-section">chmod</span> <span class="hljs-attribute">a+x</span> /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code>
</li>
</ol></span><!--
--><span class="step" ng-if="steps[step].slug === 'live'"><ol><!--
step: live
--><li>
Reload NGINX:<br>
<code><strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx</code>
</li></ol></span>

View File

@@ -0,0 +1,77 @@
<span class="step" ng-if="steps[step].slug === 'download'"><!--
step: download
--><span class="hljs-comment"><span class="counter">.</span> <strong>Download</strong> generated config:</span> <strong><a href="#" ng-click="downloadZip()">nginxconfig.io-{{ getDomains().join(',') }}.zip</a></strong>
<span class="hljs-comment"><strong>Upload</strong> to server's</span> <strong>{{ data.directory_nginx.replace(endingSlashRegex, '') }}</strong> <span class="hljs-comment">directory</span>
<span class="hljs-comment">- OR -</span>
<span class="hljs-comment"><strong>Copy</strong> as Base64 string:</span> <strong><a href="#" ng-mouseenter="prepareBase64()" ng-click="copyAsBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">Copy to clipboard</a></strong> <span class="hljs-comment small">(echo 'BASE64' | base64 --decode > {{ data.directory_nginx }}nginxconfig.io-{{ getDomains().join(',') }}.zip)</span>
<span class="hljs-comment"><strong>Paste</strong> from clipboard and run the command</span>
<span class="hljs-comment"><span class="counter">.</span> Go to NGINX directory (over SSH):</span>
<span class="hljs-section">cd</span> {{ data.directory_nginx.replace(endingSlashRegex, '') }}
<span class="hljs-comment"><span class="counter">.</span> Backup current configuration:</span>
<span class="hljs-section">tar</span> <span class="hljs-attribute">-czvf</span> nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/
<span class="hljs-comment"><span class="counter">.</span> Unzip the uploaded archive:</span>
<span class="hljs-section">unzip</span> <span class="hljs-attribute">-o</span> nginxconfig.io-{{ getDomains().join(',') }}.zip <span class="hljs-comment">(you probably need to install <strong>unzip</strong>:</span> <span class="hljs-section"></span><strong>sudo</strong> <span class="hljs-section">apt-get</span> <span class="hljs-attribute">install</span> unzip<span class="hljs-comment">)</span></span><!--
--><span class="step" ng-if="steps[step].slug === 'ssl'"><!--
step: ssl
--><!--
✔ SSL DH required --><span ng-if="isSSLDHRequired()"><span class="hljs-comment"><span class="counter">.</span> Generate Diffie-Hellman keys:</span>
<span class="hljs-section">openssl</span> <span class="hljs-attribute">dhparam</span> <span class="hljs-attribute">-out</span> {{ data.directory_nginx }}dhparam.pem <span class="hljs-number">{{ sslProfiles[ data.ssl_profile ].dh_param_size }}</span>
</span><!--
✔ Let's Encrypt
--><span ng-if="hasCertLetsEncrypt()"><span class="hljs-comment"><span class="counter">.</span> Create a common ACME-challenge directory (for Let's Encrypt):</span>
<span class="hljs-section">mkdir</span> <span class="hljs-attribute">-p</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }}
<span class="hljs-section">chown</span> <span class="hljs-attribute">{{ data.user }}</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }}</span></span><!--
--><span class="step" ng-if="steps[step].slug === 'certbot'"><!--
step: certbot
--><span class="hljs-comment"><span class="counter">.</span> Comment out SSL related directives in configuration:</span>
<span class="hljs-section">sed</span> <span class="hljs-attribute">-i -r</span> 's/(listen .*443)/\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g'<span ng-if="isUnified()"><!--
--> {{ data.directory_nginx }}nginx.conf</span><span ng-if="isModularized()"><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><!--
--> {{ data.directory_nginx }}sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span>
<span class="hljs-comment"><span class="counter">.</span> Reload <strong>NGINX</strong>:</span>
<strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx
<span class="hljs-comment"><span class="counter">.</span> Obtain certificate{{ getDomains().length > 1 ? 's' : '' }}:</span><!--
--><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)">
<span class="hljs-section">certbot</span> <!--
--><span class="hljs-attribute">certonly</span> <!--
--><span class="hljs-attribute">--webroot</span> <!--
--><span ng-if="isNonWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' + _domain + '"' : _domain }} </span><!--
--><span ng-if="isWWW(_site) || isRedirect(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' : '' }}www.{{ _domain }}{{ _domain.indexOf('-') !== -1 ? '"' : '' }} </span><!--
--><span ng-if="isCDN(_site)"><span class="hljs-attribute" tooltips tooltip-template="--domain" tooltip-side="top">-d</span> {{ _domain.indexOf('-') !== -1 ? '"' : '' }}cdn.{{ _domain }}{{ _domain.indexOf('-') !== -1 ? '"' : '' }} </span><!--
--><span class="hljs-attribute">--email</span> {{ data.sites[_site].email ? data.sites[_site].email : 'info@' + _domain }} <!--
--><span class="hljs-attribute" tooltips tooltip-template="--webroot-path" tooltip-side="top">-w</span> {{ data.directory_letsencrypt.replace(endingSlashRegex, '') }} <!--
--><span class="hljs-attribute" tooltips tooltip-template="--non-interactive" tooltip-side="top">-n</span> <!--
--><span class="hljs-attribute">--agree-tos</span> <!--
--><span class="hljs-attribute">--force-renewal</span></span>
<span class="hljs-comment"><span class="counter">.</span> Uncomment SSL related directives in configuration:</span>
<span class="hljs-section">sed</span> <span class="hljs-attribute">-i -r</span> 's/#?;#//g'<span ng-if="isUnified()"><!--
--> {{ data.directory_nginx }}nginx.conf</span><span ng-if="isModularized()"><span ng-repeat="(_site, _domain) in getDomains() track by $index" ng-if="isCertLetsEncrypt(_site)"><!--
--> {{ data.directory_nginx }}sites-{{ isSymlink() ? 'available' : 'enabled' }}/{{ _domain }}.conf</span></span>
<span class="hljs-comment"><span class="counter">.</span> Reload <strong>NGINX</strong>:</span>
<strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx
<span class="hljs-comment"><span class="counter">.</span> Configure <strong>Certbot</strong> to reload <strong>NGINX</strong> after success renew:</span>
<span class="hljs-section">echo</span> <span class="hljs-attribute">-e</span> '#!/bin/bash\nnginx -t && systemctl reload nginx' | <strong>sudo</strong> <span class="hljs-section">tee</span> /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh
<strong>sudo</strong> <span class="hljs-section">chmod</span> <span class="hljs-attribute">a+x</span> /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh
<span class="hljs-comment"><span class="counter">.</span> Schedule renewing: <strong>Certbot</strong> will automatically renew any certificates that expire in less than 30 days</span></span><!--
--><span class="step" ng-if="steps[step].slug === 'live'"><!--
step: live
--><span class="hljs-comment"><span class="counter">.</span> Reload <strong>NGINX</strong>:</span>
<strong>sudo</strong> <span class="hljs-section">nginx</span> <span class="hljs-attribute">-t</span> && <strong>sudo</strong> <span class="hljs-section">systemctl</span> <span class="hljs-attribute">reload</span> nginx</span>

View File

@@ -9,7 +9,7 @@
<div class="tab-content common-content">
<ul ng-if="layout === 'do'" class="nav nav-pills nav-fill" role="tablist">
<li ng-repeat="(key, tab) in tabs_common" class="nav-item">
<a class="nav-link" ng-mouseenter="setTabCommon(key)" ng-class="{ 'active': tab_common === key, 'changed': commonChanges[tab.slug], 'visited': key < tab_common }">{{ tab.name }}<small ng-cloak>({{ commonChanges[tab.slug] }})</small></a>
<a class="nav-link" ng-click="setTabCommon(key)" ng-class="{ 'active': tab_common === key, 'changed': commonChanges[tab.slug], 'visited': key < tab_common }">{{ tab.name }}<small ng-cloak>({{ commonChanges[tab.slug] }})</small></a>
</li>
</ul>
<div class="tab-pane tab-https" ng-class="{ 'active': tabs_common[tab_common].slug === 'https' }">
@@ -399,7 +399,7 @@
</div>
</div>
<div class="tab-navigation-buttons" ng-if="layout === 'do'">
<button class="btn btn-outline-secondary" ng-click="setTabCommonBack()">Back</button>
<button class="btn btn-primary" ng-click="setTabCommonNext()">Next</button>
<button class="btn btn-outline-secondary" ng-click="setTabCommonBack()" ng-class="{ disabled: tab_common === 0 }">Back</button>
<button class="btn btn-primary" ng-click="setTabCommonNext()" ng-class="{ disabled: tab_common === tabs_common.length - 1 }">Next</button>
</div>
</div>

View File

@@ -7,7 +7,7 @@
<div class="tab-content site-content">
<ul ng-if="layout === 'do'" class="nav nav-pills nav-fill" role="tablist">
<li ng-repeat="(key, tab) in tabs_site" class="nav-item">
<a class="nav-link" ng-mouseenter="setTabSite(key)" ng-class="{ 'active': tab_site === key, 'changed': getSiteTabChanges(tab.slug), 'visited': key < tab_site }">{{ tab.name }}<small ng-cloak>({{ getSiteTabChanges('php') }})</small></a>
<a class="nav-link" ng-click="setTabSite(key)" ng-class="{ 'active': tab_site === key, 'changed': getSiteTabChanges(tab.slug), 'visited': key < tab_site }">{{ tab.name }}<small ng-cloak>({{ getSiteTabChanges('php') }})</small></a>
</li>
</ul>
<div class="tab-pane tab-presets" ng-class="{ 'active': tabs_site[tab_site].slug === 'presets' }">
@@ -426,7 +426,7 @@
</div>
</div>
<div class="tab-navigation-buttons" ng-if="layout === 'do'">
<button class="btn btn-outline-secondary" ng-click="setTabSiteBack()">Back</button>
<button class="btn btn-primary" ng-click="setTabSiteNext()">Next</button>
<button class="btn btn-outline-secondary" ng-click="setTabSiteBack()" ng-class="{ disabled: tab_site === 0 }">Back</button>
<button class="btn btn-primary" ng-click="setTabSiteNext()" ng-class="{ disabled: tab_site === tabs_site.length - 1 }">Next</button>
</div>
</div>

View File

@@ -66,7 +66,11 @@
</section>
<section class="steps">
<div class="container">
<div class="row">
<div ng-if="layout === 'do'">
<h5>Setup and Files</h5>
<div class="card" ng-include="'partials/steps-do.html'"></div>
</div>
<div ng-if="layout === 'default'" class="row">
<div class="col-xl-10 offset-xl-1">
<div ng-include="'partials/steps.html'"></div>
</div>
@@ -75,16 +79,17 @@
</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 class="grid-item col-xl-12 mb-3" ng-cloak>
<div ng-if="layout === 'default'" class="text-center">
<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 ng-if="layout === 'do'" class="text-center buttons">
<button class="btn btn-success btn-download" ng-click="downloadZip()">Download Config</button>
<button class="btn btn-primary btn-download btn-base64" ng-mouseenter="prepareBase64()" ng-click="copyAsBase64()" ngclipboard data-clipboard-target="#base64-zip-line" ngclipboard-success="clipboardSuccess('base64-zip-line')">Copy Base64</button>
</div>
</div>
<div class="base64-zip-line-container">
<div id="base64-zip-line">{{ base64 }}</div>

View File

@@ -0,0 +1,12 @@
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item" ng-repeat="(key, _step) in steps" ng-class="[_step.slug, !_step.active() ? 'disabled' : '']">
<a class="nav-link" ng-class="{ active: key === step, visited: key < step }" ng-click="setActiveStep(key)">{{ _step.name }}</a>
</li>
</ul>
<div class="commands-do" ng-include="'partials/commands-do.html?v=COMMIT_HASH'" ng-cloak></div>
<div class="tab-navigation-buttons" ng-if="layout === 'do'">
<button class="btn btn-outline-secondary" ng-click="setStepBack()" ng-class="{ disabled: step === 0 }">Back</button>
<button class="btn btn-primary" ng-click="setStepNext()" ng-class="{ disabled: step === steps.length - 1 }">Next</button>
</div>

View File

@@ -1,30 +1,14 @@
<ol ng-attr-data-active-step="{{ activeStep }}">
<ol class="step-icons" ng-attr-data-active-step="{{ steps[step].slug }}">
<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!
ng-repeat="(key, step) in steps"
ng-if="step.active()"
ng-class="[step.slug]"
ng-mouseenter="setActiveStep(key)">
<div class="circle" ng-include="'/assets/img/steps/' + step.slug + '.svg'"></div>
<span class="counter"></span>{{ step.name }}
</li>
</ol>
<div class="commands" ng-cloak>
<pre><code class="hljs bash" ng-include="'partials/commands.html?v=COMMIT_HASH'"></code></pre>
</div>