前后端分离的web项目
背景
最近接手了一个前后端分离的 web 项目，因为之前很少接触 web 项目，更别提前后端分离的了，感觉很是复杂。项目的 readme 很简约，起初没有重视，折腾了一两天之后重新看，悟了。虽然简单但直接给我指明了技术方向，又折腾了一天，终于在本地运行成功；但是独立启动了前端和后端程序，这两者如何通讯呢？即使实现了通讯，这个项目的端口又如何统一到 80 端口呢？这两个问题搞的我心烦意乱，不过经过他人指点，终于看到了一丝希望，用 nginx 进行端口转发。
踩完一个又一个坑，重新看这个项目，其实无非也就是10几步，但折腾了一周，记录之。
技术简介
使用的主要技术
-
前端使用 Angular -
后端使用 Java (Spring MVC) -
数据库使用 MongoDB 3.6 -
IDE 使用 IntelliJ IDEA
Angular
-
Angular(ng) 是一个高级前端框架，致力于 MVC 代码解耦，采用 model, controller 以及 view 方式去组织代码。
-
使用 TypeScript 来创建 Angular 应用，TypeScript 是由微软开发的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。
-
Node.js 是 JavaScript 程序的运行环境，TypeScript 最终会转译成 JavaScript 在 Node.js 环境中运行。TypeScript 和 Node.js 的关系是编程语言和运行环境的关系。
-
npm 是随 Node.js 一起安装的包管理工具，Angular 的包也需要 npm 来管理。
Spring MVC
-
Spring MVC 是一种基于 Java 实现的 Web MVC 设计模式的请求驱动类型的轻量级 Web 框架。 -
Maven 是一个项目管理工具，可以对 Java 项目进行构建、依赖管理，是一个自动化构建工具。可用于 jar 包的依赖管理、项目一键构建（清理、编译、测试、打包等）。 -
Tomcat 是一个运行 Java 的 web 应用服务器，依赖 Java 环境。
配置详情
配置简介
前端环境配置
-
安装 Nodejs, npm, ng(angluar), python2.7: -
安装 angular client: npm install -g @angular/cli -
安装 typescript: npm install -g typescript -
安装 python2.7 -
执行 npm config set python python2.7
后端环境配置
-
安装 JDK1.8, Tomcat8 -
使用 maven 安装所需依赖库 -
打包并将 war 包（lixxx.war）放到 tomcat\webapps\ 目录下 -
启动 tomcat 服务器
nginx端口转发
-
安装 nginx -
修改 nginx 配置文件 nginx.conf -
启动 nginx
访问
-
假设 ip 地址为：210.71.22.210 -
前端项目访问：http://210.71.22.210:3000 -
后端项目访问 http://210.71.22.210:8080/lixxx -
配置 nginx 后访问 http://210.71.22.210:80
数据库--MongoDB
-
目录结构
mongodb
--mongodb # MongoDB安装目录
--data # 数据
--logs # 日志
--run_mongodb.bat # 启动脚本 -
按上述文件级别创建
logs,data文件夹 -
连接 MongoDB，并设置用户名密码，暂时没有添加超级管理员
use test // 跳转到需要添加用户的数据库
db.createUser({
user: 'admin', // 用户名
pwd: '123456', // 密码
roles:[{
role: 'readWrite', // 角色
db: 'test' // 数据库名
}]
}) -
设置配置文件
进入 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 -
启动
windows 下建立启动脚本
run_mongodb.bat，写入以下内容，双击启动。%~d0
cd %~dp0
.\mongodb\bin\mongod.exe --config="%~dp0\mongodb\mongo.config"
exit
后端--Tomcat
-
设置配置文件
使用默认的 8080 端口，如要更改可以打开
tomcat\conf\server.xml修改。 -
启动
-
windows：双击 startup.bat
-
linux：直接启动
./startup.sh，作为服务启动nohup ./startup.sh & -
将 war 包（lixxx.war 包）放到
tomcat\webapps\目录下，tomcat 启动后会自动解压。 -
进入
tomcat\bin\目录，启动tomcat服务。
前端--Angular
-
运行 npm install 在本地安装相应的ng依赖包 -
运行 ng build 编译前端程序 -
运行 ng serve --port 3000 启动前端程序
端口转发--nginx
-
背景
部署这个项目有两个问题：一是先前一个 C# 的 web 项目占用了 80 端口，所以这个 Java 项目就不能用 80 端口了，但是对外只开放了 80 端口，这该怎么搞；二是这个项目是前后端分离的，分别启动了前端和后端项目，那前端怎么和后端联系起来，该如何去请求后端呢？
其实，上述问题是跨域问题，即浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。对于问题一，可以使用 nginx 的端口转发（反向代理）来解决，本项目后端 8080 端口和前端 3000 端口都转发到 80 端口，同时也解决了问题二。
-
常用命令
start nginx # 启动
nginx.exe # 启动
nginx.exe -s stop # 停止
nginx.exe -s reload # 重新载入
nginx.exe -s reopen # 打开日志文件
nginx -v # 查看版本 -
配置
打开
\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;
}
} -
开启 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 端口没开放？
-
再次更改 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;
}
} -
成功
终于，http://210.71.22.210 可以成功访问了，真不错。
总结
-
启动 MongoDB 数据库： mongod.exe --config="mongodb\mongo.config -
启动前端： ng serve -host 210.71.22.210 --port 3000 -
启动后端：双击 startup.bat启动 Tomcat -
启动 Nginx: 双击 nginx.exe启动 -
访问: 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