前后端分离的web项目

Posted 2021-05-03 my future life

背景

最近接手了一个前后端分离的 web 项目，因为之前很少接触 web 项目，更别提前后端分离的了，感觉很是复杂。项目的 readme 很简约，起初没有重视，折腾了一两天之后重新看，悟了。虽然简单但直接给我指明了技术方向，又折腾了一天，终于在本地运行成功；但是独立启动了前端和后端程序，这两者如何通讯呢？即使实现了通讯，这个项目的端口又如何统一到 80 端口呢？这两个问题搞的我心烦意乱，不过经过他人指点，终于看到了一丝希望，用 nginx 进行端口转发。

踩完一个又一个坑，重新看这个项目，其实无非也就是10几步，但折腾了一周，记录之。

技术简介

使用的主要技术

1. 前端使用 Angular
2. 后端使用 Java (Spring MVC)
3. 数据库使用 MongoDB 3.6
4. IDE 使用 IntelliJ IDEA

Angular

1. Angular(ng) 是一个高级前端框架，致力于 MVC 代码解耦，采用 model, controller 以及 view 方式去组织代码。

2. 使用 TypeScript 来创建 Angular 应用，TypeScript 是由微软开发的编程语言，它是 javascript 的一个超集，扩展了 JavaScript 的语法。

3. Node.js 是 JavaScript 程序的运行环境，TypeScript 最终会转译成 JavaScript 在 Node.js 环境中运行。TypeScript 和 Node.js 的关系是编程语言和运行环境的关系。

4. npm 是随 Node.js 一起安装的包管理工具，Angular 的包也需要 npm 来管理。

Spring MVC

1. Spring MVC 是一种基于 Java 实现的 Web MVC 设计模式的请求驱动类型的轻量级 Web 框架。
2. Maven 是一个项目管理工具，可以对 Java 项目进行构建、依赖管理，是一个自动化构建工具。可用于 jar 包的依赖管理、项目一键构建（清理、编译、测试、打包等）。
3. Tomcat 是一个运行 Java 的 web 应用服务器，依赖 Java 环境。

配置详情

配置简介

前端环境配置

1. 安装 Nodejs, npm, ng(angluar), python2.7:
1. 安装 angular client:  npm install -g @angular/cli
2. 安装 typescript:   npm install -g typescript
3. 安装 python2.7
4. 执行 npm config set python python2.7

后端环境配置

1. 安装 JDK1.8, Tomcat8
2. 使用 maven 安装所需依赖库
3. 打包并将 war 包（lixxx.war）放到 tomcat\webapps\ 目录下
4. 启动 tomcat 服务器

nginx端口转发

1. 安装 nginx
2. 修改 nginx 配置文件 nginx.conf
3. 启动 nginx

访问

1. 假设 ip 地址为：210.71.22.210
2. 前端项目访问：http://210.71.22.210:3000
3. 后端项目访问 http://210.71.22.210:8080/lixxx
4. 配置 nginx 后访问 http://210.71.22.210:80

数据库--MongoDB

1. 目录结构

   mongodb
   --mongodb # MongoDB安装目录
   --data # 数据
   --logs # 日志
   --run_mongodb.bat # 启动脚本
   

2. 按上述文件级别创建 logs, data 文件夹

3. 连接 MongoDB，并设置用户名密码，暂时没有添加超级管理员

   use test  // 跳转到需要添加用户的数据库
   db.createUser({
     user: 'admin',  // 用户名
     pwd: '123456',  // 密码
     roles:[{
       role: 'readWrite',  // 角色
       db: 'test'  // 数据库名
     }]
   })
   

4. 设置配置文件

   进入 MongoDB 安装目录，创建（打开） mongo.config文件，写入以下内容。

   # 数据库数据存放目录
   dbpath=D:\mongodb\data
   # 数据库日志存放目录
   logpath=D:\mongodb\logs\mongodb.log 
   logappend=true
   journal=true
   # 开启用户认证
   auth=true
   # 端口
   port=27017
   # ip
   bind_ip=127.0.0.1
   

5. 启动

   windows 下建立启动脚本 run_mongodb.bat，写入以下内容，双击启动。

   %~d0
   cd %~dp0
   .\mongodb\bin\mongod.exe --config="%~dp0\mongodb\mongo.config"
   exit
   

后端--Tomcat

1. 设置配置文件

   使用默认的 8080 端口，如要更改可以打开 tomcat\conf\server.xml 修改。

2. 启动

• windows：双击 startup.bat

• linux：直接启动 ./startup.sh，作为服务启动 nohup ./startup.sh &

1. 将 war 包（lixxx.war 包）放到 tomcat\webapps\ 目录下，tomcat 启动后会自动解压。

2. 进入 tomcat\bin\ 目录，启动tomcat服务。

前端--Angular

1. 运行 npm install  在本地安装相应的ng依赖包
2. 运行 ng build 编译前端程序
3. 运行 ng serve --port 3000 启动前端程序

端口转发--nginx

1. 背景

   部署这个项目有两个问题：一是先前一个 C# 的 web 项目占用了 80 端口，所以这个 Java 项目就不能用 80 端口了，但是对外只开放了 80 端口，这该怎么搞；二是这个项目是前后端分离的，分别启动了前端和后端项目，那前端怎么和后端联系起来，该如何去请求后端呢？

   其实，上述问题是跨域问题，即浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。对于问题一，可以使用 nginx 的端口转发（反向代理）来解决，本项目后端 8080 端口和前端  3000 端口都转发到 80 端口，同时也解决了问题二。

2. 常用命令

   start nginx # 启动
   nginx.exe # 启动
   nginx.exe -s stop  # 停止 
   nginx.exe -s reload # 重新载入
   nginx.exe -s reopen # 打开日志文件
   nginx -v # 查看版本
   

3. 配置

   打开 \nginx\conf\nginx.conf 文件，作如下更改。

   server {
           listen       80;  # 监听端口
           server_name  localhost; 
   
           location / {
               proxy_pass http://localhost:3000/;  # 代理网址，前端
               proxy_set_header Host $http_host;
           }
   
           location /lixxx {
               proxy_pass http://localhost:8080/;  # 后端
               proxy_set_header Host $http_host;
           }
   }
   

4. 开启 80 端口

   终于配置好了，但是为啥在浏览器输入 http://210.71.22.210:80 还是不能访问。莫非是80端口没开放？

   # 查看到 Chain In_public_allow 字段下确实没有 80 端口
   iptables -L -n 
   
   # 开放 80 端口
   # 查看防火墙是否开启
   systemctl status firewalld
   
   # 若没有开启则开启
   systemctl start firewalld
   
   # 查看所有开启的端口
   firewall-cmd --list-ports  # 确定没有开放 80 端口
   
   # 防火墙开启80端口
   firewall-cmd --zone=public --add-port=80/tcp --permanent
   
   # 重启  
   firewall-cmd --reload
   
   # 再执行 
   firewall-cmd --list-ports # 确认已开启 80 端口
   

   很奇怪，8080, 27017, 3000 端口都是开放的，为啥只有 80 端口没开放？

5. 再次更改 nginx.conf

   server {
           listen       80;
           server_name  xxx.xx.xx.xxx;
   
           location / {
               proxy_pass http://xxx.xx.xx.xxx:3000/;
               proxy_set_header Host $http_host;
           }
   
           location /lixxx {
               proxy_pass http://xxx.xx.xx.xxx:8080/;
               proxy_set_header Host $http_host;
           }
   }
   

6. 成功

   终于，http://210.71.22.210 可以成功访问了，真不错。

总结

1. 启动 MongoDB 数据库： mongod.exe --config="mongodb\mongo.config
2. 启动前端： ng serve -host 210.71.22.210 --port 3000
3. 启动后端：双击 startup.bat 启动 Tomcat
4. 启动 Nginx:  双击 nginx.exe 启动
5. 访问:   http://210.71.22.210

参考资料

https://blog.csdn.net/death05/article/details/100973673

https://blog.csdn.net/weixin_38750084/article/details/90387056

https://zhuanlan.zhihu.com/p/108740468

https://blog.csdn.net/qq_28379809/article/details/87995524