一、前端项目发布
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 前后端测试
通过前端域名访问.检查前后端是否正常.