7x31/nginxconfig.io
1
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io.git synced 2025-08-09 11:07:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reverse proxy support

Browse Source 
fixes #4, #16
This commit is contained in:
Szekeres Bálint
2018-08-20 16:04:34 +02:00
parent ef1ea48555
commit bec7ce0259
8 changed files with 110 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/img/brands/nodejs.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 406 B

13
public/assets/js/app.js
View File

@@ -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;
};

53
public/index.html
View File

@@ -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')">

10
public/templates/conf/nginxconfig.io/proxy.conf.html Normal file
View File

@@ -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;

15
public/templates/conf/sites-available/example.com.conf.html
View File

@@ -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