From bec7ce02598705edb3b2beb64d312c1f210ac2e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szekeres=20Ba=CC=81lint?= <szekeres.balint@hps.hu>
Date: Mon, 20 Aug 2018 16:04:34 +0200
Subject: [PATCH] Reverse proxy support fixes #4, #16

---
 README.md                                     |  1 +
 public/assets/img/brands/nodejs.svg           |  1 +
 public/assets/js/app.js                       | 13 +++++
 public/index.html                             | 53 ++++++++++++++++++-
 .../conf/nginxconfig.io/proxy.conf.html       | 10 ++++
 .../sites-available/example.com.conf.html     | 15 +++++-
 resources/scss/_main.scss                     | 16 ++++++
 resources/scss/_sidebar.scss                  |  4 ++
 8 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 public/assets/img/brands/nodejs.svg
 create mode 100644 public/templates/conf/nginxconfig.io/proxy.conf.html

diff --git a/README.md b/README.md
index 805e999..5b958d5 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ Online nginx configuration generator.
 * redirect subdomains
 * IPv4, IPv6
 * PHP (TCP, 5.x FPM, 7.0 FPM, 7.1 FPM, 7.2 FPM, 7.3 FPM)
+* Reverse proxy (e.g. Node.js)
 * WordPress security essentials
 * Drupal security essentials
 * pass requests to index.php
diff --git a/public/assets/img/brands/nodejs.svg b/public/assets/img/brands/nodejs.svg
new file mode 100644
index 0000000..efa57c8
--- /dev/null
+++ b/public/assets/img/brands/nodejs.svg
@@ -0,0 +1 @@
+<svg aria-labelledby="simpleicons-nodejs-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-nodejs-icon">Node.JS icon</title><path d="M11.435.153l-9.37 5.43c-.35.203-.564.578-.563.983V17.43c0 .404.215.78.564.982l9.37 5.435c.35.203.78.203 1.13 0l9.366-5.433c.35-.205.564-.578.565-.982V6.566c0-.404-.216-.78-.566-.984L12.567.152c-.35-.203-.782-.203-1.13 0"/></svg>
\ No newline at end of file
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index b4459f0..d2f7ce1 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -84,6 +84,10 @@
 			expires_media:		'7d',
 			expires_svg:		'7d',
 			expires_fonts:		'7d',
+
+			proxy:				false,
+			proxy_path:			'/',
+			proxy_pass:			'http://127.0.0.1:3000',
 		};
 
 		$scope.location = $location;
@@ -287,6 +291,7 @@
 			$scope.data.php				= $scope.defaultData.php;
 			$scope.data.wordpress		= $scope.defaultData.wordpress;
 			$scope.data.drupal			= $scope.defaultData.drupal;
+			$scope.data.proxy			= $scope.defaultData.proxy;
 			$scope.data.index			= $scope.defaultData.index;
 			$scope.data.fallback_html	= $scope.defaultData.fallback_html;
 
@@ -306,6 +311,10 @@
 				case 'drupal':
 					$scope.data.drupal = true;
 					break;
+				case 'nodejs':
+					$scope.data.php = false;
+					$scope.data.proxy = true;
+					break;
 			}
 
 			gtag('event', preset, {
@@ -438,6 +447,10 @@
 			return $scope.data.limit_req;
 		};
 
+		$scope.isProxy = function() {
+			return $scope.data.proxy;
+		};
+
 
 
 
diff --git a/public/index.html b/public/index.html
index de2c422..8d25d01 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,9 +8,9 @@
 		<link rel="icon" type="image/png" href="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, drupal, Let's Encrypt, custom certificate, cdn, access_log, error_log, Laravel, Lumen, Symfony, Zend, CodeIgniter, Yii, CakePHP, Slim, Angular, React, Vue.js, Ember.js">
+		<meta name="keywords" content="nginx, config, configurator, /etc/nginx/nginx.conf, nginx performance, nginx tuning, nginx php, nginx, php fpm, wordpress, drupal, 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="Online nginx configuration generator: HTTPS, HTTP2, CDN, PHP (Laravel, Symfony, CodeIgniter…), Frontend (Angular, React, Vue.js…), WordPress, Drupal, security headers, rate limiting, expiration by file types…">
+		<meta property="og:description" content="Online nginx configuration generator: HTTPS, HTTP2, CDN, PHP (Laravel, Symfony, CodeIgniter…), Frontend (Angular, React, Vue.js…), Reverse proxy, Node.js, WordPress, Drupal, 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">
@@ -25,6 +25,7 @@
 			<div class="container">
 				<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('frontend')" tooltips tooltip-template="• disabled PHP<br>• index.html fallback routing" tooltip-side="bottom">Frontend <img src="assets/img/brands/angular.svg" alt="Angular"> <img src="assets/img/brands/react.svg" alt="React"> <img src="assets/img/brands/vuejs.svg" alt="Vue.js"></button>
 				<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('backend')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing" tooltip-side="bottom">Backend <img src="assets/img/brands/php.svg" alt="PHP"> <img src="assets/img/brands/laravel.svg" alt="Laravel"> <img src="assets/img/brands/symfony.svg" alt="Symfony"> <img src="assets/img/brands/codeigniter.svg" alt="CodeIgniter"></button>
+				<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('nodejs')" tooltips tooltip-template="• enabled reverse proxy<br>• disabled PHP" tooltip-side="bottom">Node.js <img src="assets/img/brands/nodejs.svg" alt="Node.js"></button>
 				<button type="button" class="btn btn-sm btn-outline-dark" 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-dark" ng-click="setPreset('wordpress')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules" tooltip-side="bottom"><img src="assets/img/brands/wordpress.svg" alt="WordPress"> WordPress</button>
 				<button type="button" class="btn btn-sm btn-outline-dark" ng-click="setPreset('drupal')" tooltips tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules" tooltip-side="bottom"><img src="assets/img/brands/drupal.svg" alt="Drupal"> Drupal</button>
@@ -53,6 +54,9 @@
 							<li class="nav-item">
 								<a class="nav-link" ng-click="setTab('cache')" ng-class="{ 'active': tab === 'cache', 'changed': getChangesForTab('cache') }">Cache<small ng-cloak>({{ getChangesForTab('cache') }})</small></a>
 							</li>
+							<li class="nav-item">
+								<a class="nav-link" ng-click="setTab('proxy')" ng-class="{ 'active': tab === 'proxy', 'changed': getChangesForTab('proxy') }">Reverse proxy<small ng-cloak>({{ getChangesForTab('proxy') }})</small></a>
+							</li>
 							<li class="nav-item">
 								<a class="nav-link" ng-click="setTab('nginx')" ng-class="{ 'active': tab === 'nginx', 'changed': getChangesForTab('nginx') }">nginx<small ng-cloak>({{ getChangesForTab('nginx') }})</small></a>
 							</li>
@@ -481,6 +485,41 @@
 									</div>
 								</div>
 							</div>
+							<div class="tab-pane tab-proxy" ng-class="{ 'active': tab === '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" ng-class="{ 'input-changed': data.proxy !== defaultData.proxy }">
+											<input class="form-check-input" type="checkbox" id="proxy" ng-model="data.proxy">
+											<label class="form-check-label" for="proxy">enabled</label>
+										</div>
+									</div>
+								</div>
+								<div class="form-group row" ng-if="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.proxy_path"
+											ng-class="{ 'input-changed': data.proxy_path !== defaultData.proxy_path }">
+									</div>
+								</div>
+								<div class="form-group row" ng-if="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.proxy_pass"
+											ng-class="{ 'input-changed': data.proxy_pass !== defaultData.proxy_pass }">
+									</div>
+								</div>
+							</div>
 							<div class="tab-pane tab-nginx" ng-class="{ 'active': tab === 'nginx' }">
 								<div class="form-group row">
 									<label class="col-sm-3 col-form-label col-form-label-sm">
@@ -700,6 +739,16 @@
 							<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="isProxy() && isModularized()" ng-cloak>
+						<strong>/etc/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>
+						<span class="clipboard-success" ng-if="clipboardCopy === 'proxy.conf'">Copied!</span>
+						<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="isWordPress() && isModularized()" ng-cloak>
 						<strong>/etc/nginx/nginxconfig.io/wordpress.conf</strong>
 						<button class="btn btn-light btn-clipboard" ngclipboard data-clipboard-target="#file-wordpress" ngclipboard-success="clipboardSuccess('wordpress.conf')">
diff --git a/public/templates/conf/nginxconfig.io/proxy.conf.html b/public/templates/conf/nginxconfig.io/proxy.conf.html
new file mode 100644
index 0000000..2657142
--- /dev/null
+++ b/public/templates/conf/nginxconfig.io/proxy.conf.html
@@ -0,0 +1,10 @@
+proxy_http_version 1.1;
+proxy_set_header Upgrade $http_upgrade;
+proxy_set_header Connection "upgrade";
+proxy_set_header Host $host;
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+proxy_set_header X-Forwarded-Host $host;
+proxy_set_header X-Forwarded-Port $server_port;
+proxy_cache_bypass $http_upgrade;
diff --git a/public/templates/conf/sites-available/example.com.conf.html b/public/templates/conf/sites-available/example.com.conf.html
index 2103ff4..21fc383 100644
--- a/public/templates/conf/sites-available/example.com.conf.html
+++ b/public/templates/conf/sites-available/example.com.conf.html
@@ -35,7 +35,7 @@ server {<!--
 	✔ Let's Encrypt --><span ng-if="isCertLetsEncrypt()">
 	ssl_trusted_certificate /etc/letsencrypt/live/{{ domain() }}/fullchain.pem;</span></span><!--
 
-	✔ Fallback HTML || ✔ Fallback PHP --><span ng-if="isFallbackHTML() || isFallbackPHP()">
+	✔ Fallback HTML || ✔ Fallback PHP --><span ng-if="(isFallbackHTML() || isFallbackPHP()) && (!isProxy() || data.proxy_path !== '/')">
 
 	# {{ isFallbackHTML() ? 'index.html' : ( isFallbackPHP() ? 'index.php' : '' ) }} fallback
 	location / {
@@ -49,6 +49,19 @@ server {<!--
 		try_files $uri $uri/ /index.php?$query_string;
 	}</span><!--
 
+	✔ Reverse proxy --><span ng-if="isProxy()">
+
+	# reverse proxy
+	location {{ data.proxy_path }} {
+		proxy_pass {{ data.proxy_pass }};<!--
+
+		✔ modularized --><span ng-if="isModularized()">
+		include nginxconfig.io/proxy.conf;</span><!--
+
+		✔ unified --><span ng-if="isUnified()">
+<!-- -->	<ng-include ng-include-tabs="3" src="'templates/conf/nginxconfig.io/proxy.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span>
+	}</span><!--
+
 	✔ PHP --><span ng-if="isPHP()">
 
 	# handle .php
diff --git a/resources/scss/_main.scss b/resources/scss/_main.scss
index 3335327..ae19f3f 100644
--- a/resources/scss/_main.scss
+++ b/resources/scss/_main.scss
@@ -30,9 +30,20 @@ section.tabs {
 				padding-left: 0.9rem;
 				padding-right: 0.9rem;
 
+				@include media-breakpoint-up(md) {
+					font-size: 0.8rem;
+				}
+
+				@include media-breakpoint-up(lg) {
+					padding-left: 0.5rem;
+					padding-right: 0.5rem;
+					font-size: 0.9rem;
+				}
+
 				@include media-breakpoint-up(xl) {
 					padding-left: 1rem;
 					padding-right: 1rem;
+					font-size: 1rem;
 				}
 
 				&.changed {
@@ -40,6 +51,11 @@ section.tabs {
 					padding-left: 0.5rem;
 					padding-right: 1.3rem;
 
+					@include media-breakpoint-up(lg) {
+						padding-left: 0.3rem;
+						padding-right: 1.1rem;
+					}
+
 					@include media-breakpoint-up(xl) {
 						padding-left: 0.6rem;
 						padding-right: 1.4rem;
diff --git a/resources/scss/_sidebar.scss b/resources/scss/_sidebar.scss
index c72ac2f..06649f7 100644
--- a/resources/scss/_sidebar.scss
+++ b/resources/scss/_sidebar.scss
@@ -2,6 +2,10 @@ aside.sidebar {
 	margin-top: 1rem;
 
 	@include media-breakpoint-up(lg) {
+		margin-top: -0.5rem;
+	}
+
+	@include media-breakpoint-up(xl) {
 		margin-top: -2.5rem;
 	}