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配置的监听端口