前后端项目发布(windows)

一、前端项目发布

1 需求分析

前端服务器：
1.现在访问前端http://localhost:8080 访问前端项目,借助于tomcat服务器.但是在生产环境中前端项目都是静态资源文件。
2. 如果项目需要发布.则需要编译项目
后端项目: http://localhost:8091 负责为前端项目提供数据支持. 需要通过域名的方式访问后端服务器.

2 项目编译

说明: 前端项目发布，实质就是将脚手架中多余的结构进行优化,将有价值的信息打包压缩生成静态资源文件,被用户访问。

脚手架客户端可视化界面编译

命令行方式编译
进入项目的根目录执行命令 npm run build

程序在编译之后生成dist文件目录

3 项目发布

需求: 用户要求通过 http://web.jt.com的域名访问dist目录中的index.html文件.

3.1 复制dist目录到nginx根目录中

3.2 编辑nginx.conf反向代理配置文件

	#配置前端
	server {
	   listen           80;
	   server_name      web.jt.com;
	   
	   location / {
	      root    dist;
		  index   index.html;
	   }
	}

3.3 修改hosts文件

127.0.0.1       localhost
::1             localhost
#图片服务器域名
127.0.0.1       image.jt.com
#前端域名地址
127.0.0.1       web.jt.com
#后端域名地址
127.0.0.1       manage.jt.com

3.4 前端效果展现

二、后端项目发布

1 用户需求

要求: 用户通过 http://manage.jt.com 访问http://localhost:8091服务器.

2 编辑nginx.conf配置

#配置后端服务器.
	server {
		listen 80;
		server_name manage.jt.com;
		location / {
			#代理的是一个请求网址
			proxy_pass  http://localhost:8091;
		}
	}

3 项目打包

执行maven install 目录 target 目录和本地仓库都会生成对应的jar包

4 启动项目

在jar包对应的目录执行命令 java -jar 8091.jar &

5 后端域名测试

6 前后端测试

通过前端域名访问.检查前后端是否正常.

三、项目部署流程图

想了解linux下前后端项目部署点这里