Nginx简单部署静态页面

环境：CentOS 7

Nginx根目录：/etc/nginx/

在Nginx根目录下创建一个目录（文件夹），命名为：html。用于放置页面文件。
编辑/etc/nginx/conf.d下的default.conf（因为主配置文件/etc/nginx/nginx.conf包含了/etc/nginx/conf.d/default.conf）

将/etc/nginx/nginx.conf内容修改如下（删除掉了默认的注释内容，先从基础搞起，一点点深入了解配置）：

server {
    listen       80;
    server_name  localhost;
    location / {
        root   html; # 指定根目录下的静态文件目录（相对）
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
   # 设置反向代理
    location /v/ {
            proxy_pass  http://xxx.com/api/;
    }
}

以上修改了默认端口的访问内容。然后局域网访问（内容包含了一些ajax反向代理请求的内容）：

index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My nginx server</title>
</head>
<body>
<h3 style="text-align: center">^(*￣(oo)￣)^</h3>
<div id="json"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript">
    function textAjax() {
        axios.post('/v/test/get', {mode:'test'})
            .then(function (response) {
                console.log(response);
                $('#json').html(JSON.stringify(response))
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    $(function () {
        textAjax();
    });
</script>
</body>
</html>

(*^__^*) ，粗略记录，后期慢慢记录补充~

Nginx简单部署静态页面

猜你喜欢