【前端开发】Windows本地Nginx部署WEB项目

一、部署说明

通常情况下，web项目开发后需要在本地部署进行试运行，确保在服务器能正常上线，部署的方式一般有以下几种：
1、静态H5页面直接在浏览器打开；
2、项目迁移到Tomcat下，运行tomcat访问；
3、项目迁移到nginx，修改nginx配置文件进行部署；
4、项目本身自带端口监听，运行服务即可访问；

二、nginx说明

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。

三、nginx部署

1、nginx下载

下载地址：http://nginx.org/en/download.html
根据需求下载对应的nginx版本和文件，此处下载最新的nginx/Windows-1.19.2。

2、本地部署项目

1）下载的文件在本地解压缩，目录结构如下：

2）将要部署的web项目放置到html目录下。

3）修改conf目录下的nginx.conf文件，针对访问内容进行路径指向配置

四、配置说明

1、原始配置文件说明

原始文件配置如下，根目录为D:/workspace/nginx-1.19.2。
用户访问域名为localhost，即将http://localhost/指向nginx 的html目录下的index.html文档

server {
        listen       80;
        server_name  localhost;
        location / {
            root  html;
            index index.html index.htm
       }
}

2、配置文件修改说明

实际项目配置中，可以根据需要采用root或者是alias，主要的区别是：
1）root

location /h5/ {
            root   html/chatbot-directory-h5/html/;
}

用户访问http://localhost/h5/index.html，本地将地址映射为html/chatbot-directory-h5/html/h5/index.html，即会保留localhost的字符串与root地址进行拼接，作为本地文件路径访问文件。
2）alias

location /h5/ {
            alias   html/chatbot-directory-h5/html/;
}

用户访问http://localhost/h5/index.html，本地将地址映射为html/chatbot-directory-h5/html/index.html，即会保留最后的HTML的字符串与alias地址进行拼接，作为本地文件路径访问文件。

3、静态资源文件（css/js/png）等配置说明

web项目开发过程中，为了提高项目易用性，通常将html/css/js等文件分割，html页面通过相对地址加载本地静态资源(css/js）等文件，将项目部署到服务器上面，通常需要捕获资源文件后缀名进行地址重定向，不然会出现HTML文件中的资源文件无法加载404的问题。

location ~.*(js|css|png)$ {
             root  html/chatbot-directory-h5/;
        }

4、特殊字体加载配置

如果项目中有使用到特殊字体，除了针对字体的位置进行定向以外，还需要针对特殊字体进行配置 add_header Access-Control-Allow-Origin *;，否则同样会出现404。

 location ~* \.(eot|ttf|woff|woff2)$ {
             root  html/chatbot-directory-h5/;
             add_header Access-Control-Allow-Origin *;
        }

五、运行说明

1、nginx运行

配置文件修改后需要启动nginx.exe，命令语句为：

nginx -s reload //优雅的重新加载配置文件

2、相关运行要点

1）确保本地运行的nginx只有一个，部分开发环境可能自带nginx，比如mysql，如果后台同时运行多个nginx的话，可能造成配置文件修改失效。
2）修改完配置文件运行的语句千万不要双击nginx.exe或者start nginx，这样每次都会重新启动一个nginx进程，非常不友好。

六、Nodejs项目Nginx反向代理部署

如果web项目中使用到node的http监听和定向功能，在nginx部署时需要设置反向代理指向http监听的域名和端口，同时需要保证node.js处于后台运行的状态。

1、node.js监听域名端口

var http = require("http")
var fs = require("fs")

var server = http.createServer(function(req,res){
     
    var path = req.url;
    if(path === "/h5/index.html"){
     
        path = "/html/search.html";
    }
})

server.listen(8081, '127.0.0.1', () => {
     
    const addr = `http://127.0.0.1:8081`;
    console.info(`Server started`);
})

2、node.js后台运行

1）安装 ：pm2 （pm2是Nodejs后台管理工具）

npm i -g pm2

2 ) 使用pm2 开启项目

pm2 start node.js(项目入口)

3、nginx反向代理部署

proxy_pass指向的域名和端口与http监听的域名和端口需要保持一致。

  location /h5/ {
     
            proxy_pass  http://127.0.0.1:8081/h5/;
       }