前言:最近公司为了我一个项目是先后端分离的项目,需要整个到一台服务器上,这里服务器是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也是有日志文件的
error是错误的,access是正确的
注意这里的正确错误是前端开始访问没有错误的时候来判断的,这就会发现,你前段可以访问,但你前端发的请求转发给后端时没有访问成功,会写到access文件中的原因,
一些报404的原因:后端项目没有启动
nginx配置文件后端转发的ip端口没有写对(可以用postman先测一下)
location 路径截取有问题(这个转发的路径是看不到的,需要认真检查拼接的规则)
7.查看日志信息(注意这里面的路径始请求转发的路径,并不是拼接转发后的路径,所以一定要认真看拼接的规则)
日志实例
这里是日志的参数解析