淘先锋技术网

首页 1 2 3 4 5 6 7

nginx部署前后端分离项目

本人皮毛,简述前后端项目通过nginx进行部署
前后端分离项目
前端:web项目,vue开发,调用后端接口
后端:java项目,共计6个后台系统,通过nginx进行转发

前端部分

使用vscode进行前端项目开发,主要说明打包部分
输入指令:npm run dev (运行本地项目)
输入指令:npm run build:prod (将项目以正式环境配置进行打包)
在这里插入图片描述
打包成功后的项目:在你的项目文件位置会有dist的文件夹,这个就是打包成功后生成的文件夹,后续介绍,需重命名此文件夹,使用nginx启动部署。
在这里插入图片描述

后端部分

后端就是将项目打包成war,打包自行处理,不做介绍
分别将多个不同后台项目多个tomcat分开运行,前端项目需要的api分别从不同的后台系统获取,多个tomcat运行端口访问不一致 ,使用nginx进行转发在这里插入图片描述

Nginx部分

去nginx官网进行下载,不做介绍,windows环境下nginx,直接点击运行nginx.exe运行即可。
linux环境启动:./usr/local/nginx/sbin/nginx
重启:./usr/local/nginx/sbin/nginx -s reload
停止:./usr/local/nginx/sbin/nginx -s stop
ps -ef | grep nginx 找到进程
kill掉进程ID也可以:kill -9 IP
更多关于nginx的安装部署等基本信息,自行搜索

重点:配置 nginx.conf 部分,在nginx\nginx-1.20.1\conf的文件夹下
更详细可查询nginx的各参数介绍在这里插入图片描述

主要部分:

server {
    listen       9000;
	server_name  localhost;
	access_log  logs/access.log  main;
	error_log  logs/error.log;

	absolute_redirect off;
	
	location  /gzdc-web{
		root D:/bak;
		index index.html;
		try_files       $uri $uri/ /gzdc-web/index.html;
    }
	
	location /gzydzf2-center{
        proxy_pass   http://127.0.0.1:8020/gzydzf2-center;
	}
	
	location /gzdc-portal{
        proxy_pass   http://127.0.0.1:8031/gzdc-portal;
	}
	
	location /gzxzcf{
        proxy_pass   http://127.0.0.1:8022/gzxzcf;
	}
	
	location /gzdc{
        proxy_pass   http://127.0.0.1:8023/gzdc;
	}
	
}

布置完成,进入nginx的sbin文件夹,双击运行nginx.exe即可
访问项目入口即可:http://ip:9000/项目名称/
9000为nginx配置的监听端口