Nginx：静态HTML+反向代理详细配置指南

创作时间:

作者:

@小白创作中心

Nginx：静态HTML+反向代理详细配置指南

引用

CSDN

https://blog.csdn.net/Creepin_/article/details/103828247

本文将详细介绍如何使用Nginx进行静态HTML页面的反向代理配置。从基础配置到高级技巧，再到常见问题的解决方案，本文将为你提供全面的指导。

基本配置步骤

安装Nginx后启动

在命令行输入以下指令（在Nginx安装目录下执行）：
```
start nginx
```
将前端项目复制到HTML文件夹下

修改Nginx配置文件（/conf/nginx.conf）中的server节点

将配置修改为要配置的域名：

server {
    # 监听的端口，80端口是默认端口，在访问时，就无需输入端口号，其他的都需要输入端口号，比如这里访问地址就是127.0.0.1，而若是8080端口，则是127.0.0.1：8080
    listen       80;
    # 此处localhost可改为要访问的域名或者ip地址，若有多个用空格隔开。例如 server_name www.baidu.com baidu.com test.baidu.com
    server_name  localhost;
    # 编码
    charset utf-8;
    # access_log  logs/host.access.log  main;
    location / {
        # Nginx下HTML文件夹，访问上述域名时会检索此文件夹下的文件进行访问
        root   html/image;
        # 输入网址（server_name：port）后，默认的访问页面
        index  index.html index.htm;
    }
}

重新载入配置

配置信息修改后，需要重新载入这些配置：
```
nginx -s reload
```
域名解析

若访问的是域名，还需进行域名解析，网站配置域名指向IP。
测试访问

完成上述配置后，测试访问是否成功。

高级配置技巧

将server配置部分单独配置

在nginx.conf配置文件中添加：
```
include vhost/*.conf;
```
在vhost文件夹中创建*.conf文件（*是通配符，可以任意命名）
在*.conf文件中只需要配置server相关信息

本地域名解析

本地配置域名解析：将www.leyou.com指向本机IP 127.0.0.1

即修改C:\Windows\System32\drivers\etc\hosts文件，添加域名与IP的映射。
root配置为绝对路径

nginx.conf配置中server里面的root可以是绝对路径，静态页面可以放置到其他位置。
配置反向代理

访问manage.leyou.com的代理到http://leyou-manage
配置http://leyou-manage指向的IP地址及端口号

其他补充

Nginx处理静态页面

静态HTML指的是使用单纯的HTML或者结合CSS制作的包括图片、文字等的只供用户浏览但不包含任何脚本、不含有任何交互功能的网页！
动态的HTML指的是网页不仅提供给用户浏览，网页本身还有交互功能，存在着在脚本如JAVASCRIPT，并利用某种服务器端语言如PHP等实现如用户注册，用户登录，上传文件，下载文件等功能。

案例剖析：
home.html页面中含有动态href链接，此时Nginx使用域名处理静态页面会导致页面显示不完全
报错位置的js/home.js
真正存在D://i-spabank-network-website//views/homePages/home/js/home.js目录下，
而http://www.pahtgg.com/js/home.js解析后的目录为：D://i-spabank-network-website/js/home.js，二者不同，所以访问不到。

解决方案：

可直接通过URL后拼接目录形式访问