1. 前言

1.1 服务器与操作系统

  • 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。
  • 服务器从硬件上等同于电脑PC。而服务器跟PC都是由CPU、内存、主板、硬盘、电源等组成；但服务器的性能要远远超过PC，因为它要保证全年无休。

  • 操作系统: 操作系统是作为应用程序与计算机硬件之间的一个接口
    • 没有安装操作系统的计算机，被称为裸机, 如果想在裸机上运行自己的程序，就需要使用机器语言
    • 安装操作系统之后，就可以配置一些高级语言的环境，进行高级语言的开发
  • Linux操作系统
    • Linux系统是最具稳定性的系统
    • Linux是天生就比Windows更具安全性
    • 免费, Linux服务器在应用开发上更能节约成本

1.2 项目的发布部署

  • 项目的开发流程大致要经过一下几个步骤:
    • 项目立项\
    • 需求分析阶段
    • 原型图设计阶段
    • 开发阶段
    • 测试阶段
    • 系统上线

2. 后台项目部署

2.1 安装软件环境

以下软件,在Linux都已安装完成.具体操作可点击下面按钮参考

点我试试
软件 版本
JDK 11
Tomcat 9
Mysql 8

2.2 项目打包发布

  • 修改项目的数据库配置文件, 数据库的IP ,用户名 密码
  • 修改 Constants常量类中的项目URL
java
1
2
//生产环境地址 
public static final String LOCAL_URL = "http://192.168.52.100:8080";
  • 修改后启动项目,测试一下 保证数据库连接没有问题

  • 检查POM文件,打包方式必须是war,编译版本为JDK11（与服务器保持一致）
xml
1
2
3
4
5
6
7
<packaging>war</packaging> 

<properties> 
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 
    <maven.compiler.source>11</maven.compiler.source> 
    <maven.compiler.target>11</maven.compiler.target> 
</properties>
  • 执行打包命令
powershell
1
2
mvn clean
mvn package
  • 复制出target目录下的 war包

  • 修改下项目名称

  • 上传到Tomcat进行测试

3. 前端项目部署

3.1 修改配置文件

  • 前端项目的配置文件有两个,一个是开发环境的配置文件,一个是生产环境的配置文件

  • 先修改一下开发环境文件的 后端服务器访问地址,然后进行一下测试
js
1
2
// .env.development 文件 
VUE_APP_API_BASE = http://192.168.52.100:8080/lagou_edu_home
  • 修改生产环境的配置文件
js
1
2
//.env.production 
VUE_APP_API_BASE = http://192.168.52.100:8080/lagou_edu_home

3.2 前端项目打包

  • 修改 vue.config.js 配置文件

复制下面内容即可

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = { 
    // relative path for dev 
    publicPath: process.env.NODE_ENV === "production" ? "/edu-boss/" : "./", 
    // for gh-pages 
    indexPath: "index.html", 
    assetsDir: "static", 
    lintOnSave: process.env.NODE_ENV !== "production", 
    productionSourceMap: false, 
    css: { 
        // sourceMap: process.env.NODE_ENV !== 'production' 
    },
    devServer: { 
        open: true, port: 8081 
    } 
};
  • 执行下面的打包命令
powershell
1
npm run build
  • 在项目下会生成一个 dist 目录

  • 在本地tomcat的webapps目录下,创建一个edu-boss文件夹,将dist目录中的文件拷贝到里面
  • 启动本地tomcat ,访问前端项目 路径为:
awk
1
http://localhost:8081/edu-boss/

3.3 前端项目发布

  • 验证没有问题后,将edu-boos项目压缩,上传到tomcat服务器
shell
1
2
3
4
5
6
7
8
//复制一份tomcat 
cp -r /usr/tomcat/ /usr/tomcat2 

//上传 edu-boss.zip ,并解压 
unzip edu-boss.zip 

//删除edu-boss.zip 
rm -rf edu-boss.zip
  • 修改tomcat2的server.xml 配置文件,修改3个端口,避免与tomcat1冲突

  • 运行前端项目
shell
1
2
3
4
5
//进入tomcat2,启动项目 
./bin/startup.sh 

//动态查看日志 
tail -f logs/catalina.out
  • 运行后端项目
shell
1
2
3
4
5
//进入tomcat1,启动项目 
./bin/startup.sh 

//动态查看日志 
tail -f logs/catalina.out