Question

我需要基本的html模板webapp，例如：

http://localhost:3000/myapp?param1=hello&param2=John被称为应该返回text/html响应，如下所示：

<html>
<body>
    <p>Nice to see you John. Platform greets you "hello".</p>
</body>
</html>

名称和问候语是从参数模板化的。所以模板是这样的：

 <html>
 <body>
     <p>Nice to see you {{param1}}. Platform greets you "{{param2}}".</p>
 </body>
 </html>

我目前在使用express.js的节点服务器中完成此操作，然后通过nginx.conf公开公开服务器：

server {
    listen 80;
    # server_name example.com;

    location / {
        proxy_pass http://private_ip_address:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

我想知道是否可以使用裸机nginx进行某些插件或其他配置，而无需在3000端口上托管节点服务器。

Answer 1

您无法使用nginx呈现文件。

只需使用nginx发送文件，然后在文件内部重写指令只包含一些javascript，用查询参数替换文本内容

Nginx conf：

    location / {
        rewrite ^ /static/index.html break;
    }

的index.html：

<div>My content <span id="name"></span></div>
<script>



function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

document.getElementById("name").textContent = getParameterByName("foo"):

</script>

Answer 2

我只使用Nginx就可以使用OpenResty的lua模块对其进行编程。

https://github.com/openresty/lua-nginx-module提供了在nginx.conf中编程的能力，可以使用现有的lua库（如https://github.com/bungle/lua-resty-template进行模板化！）

myapp.lua：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<style>

*{
    box-sizing:border-box;
    font-size: calc(12px + 2vmin);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: black;
}

section>div{
    height: 85%;
}

.smooth{
    height: 15%;
}

body{margin:0;}

section{
    text-align: center;
    height: 100vh;
    width: 100%;
    padding: 13vmin;
}

section.even{
    transition: 0.50s;
    background-color: rgb(41, 197, 119);
}

section.odd{
    transition: 0.50s;
    background-color: rgb(37, 192, 212);
}

.fa-chevron-circle-up,.fa-chevron-circle-down{ 
    font-size: 9vmin;
    color:white;
    opacity: 0.5;
    transition: 0.35s;
}

.fa-chevron-circle-up:hover,.fa-chevron-circle-down:hover{ 
    font-size: 10vmin;
    color:white;
    opacity: 0.8;
}

.fa-chevron-up{
    color:white;
    font-size: 5vmin;
}

</style>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
</head>
<body >
    <section id="sec1" class="even">
        <div>
            <h1>Section 1</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, dignissimos impedit est earum odit eligendi inventore tenetur blanditiis? Adipisci laboriosam.</p>
        </div>
        <p class="smooth">
			<a href="#sec2">
				<i class="fa fa-chevron-circle-down"></i>
			</a>
        </p>
    </section>
    <section id="sec2" class="odd">
        <div>
            <h1>Section 2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio cumque nobis explicabo maiores, veniam libero temporibus necessitatibus repellendus aperiam unde.</p>
        </div>
        <p class="smooth" >
            <a href="#sec3">
				<i class="fa fa-chevron-circle-down"></i>
			</a>
        </p>
    </section>
    <section id="sec3" class="even">
        <div>
            <h1>Section 3</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, aliquam ut. Harum necessitatibus ipsam sequi unde dicta et ad id excepturi vero?</p>
        </div>
        <p class="smooth" >
            <a href="#sec4">
				<i class="fa fa-chevron-circle-down"></i>
			</a>
        </p>
    </section>
    <section id="sec4" class="odd">
        <div>
            <h1>Section 4</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore quidem fuga aliquid accusamus ipsa natus tenetur rerum ab incidunt minima atque!</p>
        </div>
        <p class="smooth" >
            <a href="#sec1">
				<i class="fa fa-chevron-circle-up"></i>
			</a>
        </p>
    </section>
</body>


</html>

greet.html：

local template = require("resty.template")
local template_string = ngx.location.capture("/templates/greet.html")
template.render(template_string.body, {
    param1 = ngx.req.get_uri_args()["param1"],
    param2 = ngx.req.get_uri_args()["param2"]
})

nginx.conf：

<html>
<body>
     <p>Nice to see you {{param1}}. Platform greets you "{{param2}}".</p>
</body>
</html>

worker_processes 1; error_log logs/error.log; events { worker_connections 1024; } http { root ./; server { listen 8090; location /myapp { default_type text/html; content_by_lua_file ./lua/myapp.lua; } }是openresty的力量所在。

我在这里描述了完整的流程：https://yogin16.github.io/2018/03/04/nginx-template-engine/

希望有人会觉得这很有帮助。

我们可以将NGINX用作模板引擎的webapp

2 个答案: