Added http/3 and port reuse support (#238)

* Added http/3 and port reuse support

* eslint fixes

* updated locale translations

* euhm no one saw this

* Did requested changes

* fixed eslint

* note to self tab is 4 spaces not 2

* Did requested changes

* added coma

* i forgot to ctrl + s

* did requested changes

* removed trailing comma

* it should be reverted now

* :PanSpoonSad: intensifies

* Im bad at this

src/nginxconfig/generators/conf/website.conf.js

@@ -62,11 +62,23 @@ const httpsListen = domain => {
     // HTTPS
     config.push(['listen', `${domain.server.listenIpv4.computed === '*' ? '' : `${domain.server.listenIpv4.computed}:`}443 ssl${domain.https.http2.computed ? ' http2' : ''}`]);
 
+    // HTTP/3
+    if (domain.https.http3.computed)
+        config.push(['listen',
+            `${domain.server.listenIpv4.computed === '*' ? '' : `${domain.server.listenIpv4.computed}:`}443 http3` 
+            + `${domain.https.portReuse.computed ? ' reuseport' : ''}`,
+        ]);
+
     // v6
     if (domain.server.listenIpv6.computed)
         config.push(['listen',
             `[${domain.server.listenIpv6.computed}]:443 ssl${domain.https.http2.computed ? ' http2' : ''}`]);
 
+    // v6 HTTP/3
+    if (domain.server.listenIpv6.computed && domain.https.http3.computed)
+        config.push(['listen',
+            `[${domain.server.listenIpv6.computed}]:443 http3${domain.https.portReuse.computed ? ' reuseport' : ''}`,
+        ]);
     return config;
 };
 

src/nginxconfig/i18n/en/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable} encrypted ${common.ssl} connections`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} ${common.http}/2 connections`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} ${common.http}/3 connections`,
+    portReuse: 'Reuseport',
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`,
     forceHttps: `Force ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable} Strict Transport Security, requiring HTTPS connections`,

src/nginxconfig/i18n/en/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `${ipv4} only`,
     ipv6Only: `${ipv6} only`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ',
+    http3Warning2: 'NGINX QUIC readme ',
+    http3Warning3: ' or the ',
+    http3Warning4: 'Cloudflare quiche project ',
+    http3Warning5: ' for how to build NGINX with HTTP/3!',
 };

src/nginxconfig/i18n/fr/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable} les connexions ${common.ssl}`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} les connexions ${common.http}/2`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} les connexions ${common.http}/3`,
+    portReuse: 'Reuseport', // TODO: translate
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`, // TODO: translate
     forceHttps: `Forcer ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable} Strict Transport Security, exigeant HTTPS`,

src/nginxconfig/i18n/fr/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `${ipv4} seulement`,
     ipv6Only: `${ipv6} seulement`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ', // TODO: translate 
+    http3Warning2: 'NGINX QUIC readme ', // TODO: translate 
+    http3Warning3: ' or the ', // TODO: translate 
+    http3Warning4: 'Cloudflare quiche project ', // TODO: translate 
+    http3Warning5: ' for how to build NGINX with HTTP/3!', // TODO: translate 
 };

src/nginxconfig/i18n/pt-br/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable} conexões ${common.ssl} criptografadas`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} conexões ${common.http}/2`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} conexões ${common.http}/3`,
+    portReuse: 'Reuseport', // TODO: translate
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`, // TODO: translate
     forceHttps: `Forçar ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable} Strict Transport Security, requerendo conexões HTTPS`,

src/nginxconfig/i18n/pt-br/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `${ipv4} apenas`,
     ipv6Only: `${ipv6} apenas`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ', // TODO: translate 
+    http3Warning2: 'NGINX QUIC readme ', // TODO: translate 
+    http3Warning3: ' or the ', // TODO: translate 
+    http3Warning4: 'Cloudflare quiche project ', // TODO: translate 
+    http3Warning5: ' for how to build NGINX with HTTP/3!', // TODO: translate 
 };

src/nginxconfig/i18n/ru/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable} зашифрованные ${common.ssl} соединения`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} ${common.http}/2 соединения`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} ${common.http}/3 соединения`,
+    portReuse: 'Reuseport', // TODO: translate
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`, // TODO: translate
     forceHttps: `Использовать только ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable} Strict Transport Security, требующая HTTPS соединения`,

src/nginxconfig/i18n/ru/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `только ${ipv4}`,
     ipv6Only: `только ${ipv6}`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ', // TODO: translate 
+    http3Warning2: 'NGINX QUIC readme ', // TODO: translate 
+    http3Warning3: ' or the ', // TODO: translate 
+    http3Warning4: 'Cloudflare quiche project ', // TODO: translate 
+    http3Warning5: ' for how to build NGINX with HTTP/3!', // TODO: translate 
 };

src/nginxconfig/i18n/zh-cn/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable}加密的${common.ssl}连接`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} ${common.http}/2 连接`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} ${common.http}/3 连接`,
+    portReuse: 'Reuseport', // TODO: translate
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`, // TODO: translate
     forceHttps: `强制 ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable}HSTS（强制客户端、浏览器等使用 HTTPS 与服务器创建链接），需要HTTPS连接`,

src/nginxconfig/i18n/zh-cn/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `${ipv4}`,
     ipv6Only: `${ipv6}`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ', // TODO: translate 
+    http3Warning2: 'NGINX QUIC readme ', // TODO: translate 
+    http3Warning3: ' or the ', // TODO: translate 
+    http3Warning4: 'Cloudflare quiche project ', // TODO: translate 
+    http3Warning5: ' for how to build NGINX with HTTP/3!', // TODO: translate 
 };

src/nginxconfig/i18n/zh-tw/templates/domain_sections/https.js

@@ -30,6 +30,10 @@ export default {
     enableEncryptedSslConnection: `${common.enable}加密的${common.ssl}連接`,
     http2: `${common.http}/2`,
     enableHttp2Connections: `${common.enable} ${common.http}/2 連接`,
+    http3: `${common.http}/3`,
+    enableHttp3Connections: `${common.enable} ${common.http}/3 連接`,
+    portReuse: 'Reuseport', // TODO: translate
+    enableReuseOfPort: `${common.enable} reuseport to generate a listening socket per worker`, // TODO: translate
     forceHttps: `強制 ${common.https}`,
     hsts: 'HSTS',
     enableStrictTransportSecurity: `${common.enable}HSTS（強制用戶端、瀏覽器等使用HTTPS與服務器創建連結），需要HTTPS連接`,

src/nginxconfig/i18n/zh-tw/templates/global_sections/https.js

@@ -47,4 +47,9 @@ export default {
     ipv4Only: `${ipv4}`,
     ipv6Only: `${ipv6}`,
     ipv4AndIpv6: `${ipv4} & ${ipv6}`,
+    http3Warning1: 'HTTP/3 isn\'t a standard NGINX module, check the ', // TODO: translate 
+    http3Warning2: 'NGINX QUIC readme ', // TODO: translate 
+    http3Warning3: ' or the ', // TODO: translate 
+    http3Warning4: 'Cloudflare quiche project ', // TODO: translate 
+    http3Warning5: ' for how to build NGINX with HTTP/3!', // TODO: translate 
 };

src/nginxconfig/templates/domain_sections/https.vue

@@ -62,6 +62,42 @@ THE SOFTWARE.
             </div>
         </div>
 
+        <div v-if="http3Enabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">{{ $t('templates.domainSections.https.http3') }}</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${http3Changed ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="http3" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                {{ $t('templates.domainSections.https.enableHttp3Connections') }}
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="portReuseEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">{{ $t('templates.domainSections.https.portReuse') }}</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div :class="`control${portReuseChanged ? ' is-changed' : ''}`">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="portReuse" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                {{ $t('templates.domainSections.https.enableReuseOfPort') }}
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div v-if="forceHttpsEnabled" class="field is-horizontal">
             <div class="field-label">
                 <label class="label">{{ $t('templates.domainSections.https.forceHttps') }}</label>
@@ -188,12 +224,30 @@ THE SOFTWARE.
                 </div>
             </div>
         </div>
+
+        <template v-if="$props.data.http3.value">
+            <br />
+            <div class="message is-warning">
+                <div class="message-body">
+                    {{ $t('templates.globalSections.https.http3Warning1') }}
+                    <ExternalLink :text="$t('templates.globalSections.https.http3Warning2')"
+                                  link="https://quic.nginx.org/README"
+                    ></ExternalLink>
+                    {{ $t('templates.globalSections.https.http3Warning3') }}
+                    <ExternalLink :text="$t('templates.globalSections.https.http3Warning4')"
+                                  link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
+                    ></ExternalLink>
+                    {{ $t('templates.globalSections.https.http3Warning5') }}
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script>
     import PrettyCheck from 'pretty-checkbox-vue/check';
     import PrettyRadio from 'pretty-checkbox-vue/radio';
+    import ExternalLink from 'do-vue/src/templates/external_link';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
 
@@ -206,6 +260,14 @@ THE SOFTWARE.
             default: true,
             enabled: true,
         },
+        http3: {
+            default: false,
+            enabled: true,
+        },
+        portReuse: {
+            default: true,
+            enabled: false,
+        },
         forceHttps: {
             default: true,
             enabled: true,
@@ -253,6 +315,7 @@ THE SOFTWARE.
         components: {
             PrettyCheck,
             PrettyRadio,
+            ExternalLink,
         },
         props: {
             data: Object,                                   // Data delegated back to us from parent
@@ -266,6 +329,8 @@ THE SOFTWARE.
                     if (state) {
                         this.$props.data.http2.enabled = true;
                         this.$props.data.http2.computed = this.$props.data.http2.value;
+                        this.$props.data.http3.enabled = true;
+                        this.$props.data.http3.computed = this.$props.data.http3.value;
                         this.$props.data.forceHttps.enabled = true;
                         this.$props.data.forceHttps.computed = this.$props.data.forceHttps.value;
                         this.$props.data.hsts.enabled = true;
@@ -275,6 +340,8 @@ THE SOFTWARE.
                     } else {
                         this.$props.data.http2.enabled = false;
                         this.$props.data.http2.computed = false;
+                        this.$props.data.http3.enabled = false;
+                        this.$props.data.http3.computed = false;
                         this.$props.data.forceHttps.enabled = false;
                         this.$props.data.forceHttps.computed = false;
                         this.$props.data.hsts.enabled = false;
@@ -285,6 +352,19 @@ THE SOFTWARE.
                 },
                 deep: true,
             },
+            // Only allow port reuse when HTTP/3 is enabled first
+            '$props.data.http3': {
+                handler(data) {
+                    if (data.computed) {
+                        this.$props.data.portReuse.enabled = true;
+                        this.$props.data.portReuse.computed = this.$props.data.portReuse.value;
+                    } else {
+                        this.$props.data.portReuse.enabled = false;
+                        this.$props.data.portReuse.computed = false;
+                    }
+                },
+                deep: true,
+            },
             // Disable hsts options if hsts is disabled
             '$props.data': {
                 handler() {