nginx 实现前后端代码整合

最新推荐文章于 2024-04-29 10:13:57 发布

HiCheer-O

最新推荐文章于 2024-04-29 10:13:57 发布

阅读量3.1k

点赞数 1

文章标签： nginx 服务器运维

本文链接：https://blog.csdn.net/weixin_49457704/article/details/121727133

版权

前言：最近公司为了我一个项目是先后端分离的项目，需要整个到一台服务器上，这里服务器是windows系统。因为之前没有自己接触过nginx导致浪费了一下午的时间，去研究。

1.首先需要下载niginx安装到部署到需要部署项目的服务器

我这边是之前同时下载好的nginx，你们可以在官网下载 nginx: download

2.下载完安装成功，之后打开安装目录

这里有一些写文件夹是后来添加上去的，不用管他

3.将包好的项目复制到到服务器上，打开项目文件夹

将dist文件复制，这里的dist是我自己命名，判断是哪个文件夹，可以点开文件夹，看目录下是否含有index.html文件，就是那个文件夹

一般情况将文件夹是复制到nginx的html文件下，这里不知道之前下载的没有html文件，无作为只要在配置文件中指定目录即可。

4.然后就是修改配置文件


    server {
        listen       8809;
        server_name  localhost;
        root  intranet;
        index  index.html index.htm; 

        location /dotnet/ { 
          proxy_pass http://127.0.0.1:9999;
        }

        location /default/rest/ { 
          rewrite  ^.+api/?(.*)$ /$1 break;
          include  uwsgi_params;
          proxy_pass http://120.76.209.228:8080;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }

这些是你打开配置文件要写的配置文件模板

listen 监听的端口，这个是配置的前端项目的端口号，因为部署到服务器本机 server_name 就写了 localhost, 参数root 就是你刚才前端项目中复制到nginx的目录下的相对路径，如果你这边复制到了htnl文件下，就可能要多加一层路径 : html/你的复制的文件名称，具体你要根据自己的实际情况

到这里，你就可以尝试启动你部署的前端项目了，

a.首先启动nginx

我启动的命令是

下面的命令是查看启动的nginx的端口状态，windows下是启动两个端口

注意千万不要使用nginx启动，因为启动时你会发现，每次启动后nginx会重新启动一个新的端口，而旧的端口一样在运行，这样的话就会导致，你再次修改配置文件的端口是在启动nginx发现，旧的端口可以访问前端项目，新的端口也可以访问你可以根据截图的下面的命令查看nginx启动的端口，将他们全部关闭，在启动就可以了

// 启动命令
start nginx.exe

// 查看命令
tasklist /fi "IMAGENAME eq nginx.exe"

// 杀死进程
taskkill /f /pid 端口号

然后再浏览器中访问http://localhost:端口号，就可以了

5.接下来就是接后端的项目

前端的页面可以访问后你打开f12就可以看到一些接口是爆红404，就是因为还没有接后端项目


    server {
        listen       8809;
        server_name  localhost;
        root  intranet;
        index  index.html index.htm; 

        location /dotnet/ { 
          proxy_pass http://127.0.0.1:9999;
        }

        location /default/rest/ { 
          rewrite  ^.+api/?(.*)$ /$1 break;
          include  uwsgi_params;
          proxy_pass http://120.76.209.228:8080;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }

首先，看参数location 这个参数是截取你前端项目的请求连接，通过截取拼接到参数proxy_pass 的请求地址，我们以截图为例 /dotnet/ 与/donet 的截取方式是不同的，这里附加个连接就不重复造轮子 nginx location / 区别 - she11s - 博客园

你们可以看到我这边是写了两个 location 的说明我这边写了两个不同的转发请求，所以你们可能会写更多的配置，如果说有些截取差不多的请求需要你这边考虑优先级，可以通过你的写的位置，调整位置

6.还有就是nginx也是有日志文件的