1. 问题说明
通过前面几篇,整个案例的业务逻辑都处理完了,提供了以下的动态资源服务
- 用户服务:http://localhost:8081
- 验证码服务:http://localhost:8083
- 邮箱服务:http://localhost:8082
因为前后端分离,还有一个静态资源的服务也是不一样的端口。
在前面测试的时候,因为各个服务的请求端口不一样,在静态页面上调用时出现了跨域的问题。
这里,考虑通过在Nginx上配置静态资源和动态资源服务,使它们处于相同的域名下,通过同源策略来解决跨域的问题
2. 虚拟域名配置
2.1 造一个虚拟的域名
2.2 在hosts中增加ip与虚拟域名的映射
mac电脑中的路径是
/etc/hosts
127.0.0.1 www.test.com
3. Nginx上的配置
3.1 安装Nginx
3.2 在Nginx的配置文件nginx.conf上的http节点配置下那几个动态资源
http {
upstream cloud-user-server {
server 127.0.0.1:8081;
}
upstream cloud-email-server {
server 127.0.0.1:8082;
}
upstream cloud-code-server {
server 127.0.0.1:8083;
}
}
3.3 在Nginx的配置文件nginx.conf的http节点增加一个server节点
- 监听80端口
- 根据不同的URL进行匹配转发请求
- url匹配到users前缀,则转发到用户服务
- url匹配到emails前缀,则转发到邮箱服务
- url匹配到codes前缀,则转发到验证码服务
- url匹配到static前缀,表示静态资源访问,则去指定的路径下拿相应的静态页面
- 在配置静态资源的匹配规则时,需要指定下root这个节点,即静态页面的绝对路径
server {
listen 80;
server_name www.test.com;
access_log /logs/nginx/cloud.access.log;
location ^~ /users {
proxy_pass http://cloud-user-server;
}
location ^~ /emails {
proxy_pass http://cloud-email-server;
}
location ^~ /codes {
proxy_pass http://cloud-code-server;
}
location ^~ /static {
root /上层文件夹的绝对路径/user-cloud/lagou-static-web;
}
}
3.4 检查配置,重启nginx
sudo nginx -t
sudo nginx -s reload
3.5 修改静态页面中的jquery的ajax交互中的url,将根地址修改为www.test.com
- 如下图修改验证码发送
4. 测试
4.1 访问注册页面www.test.com/static/register.html
,进行账号的注册
- 输入邮箱,获取验证码
- 到邮箱中查看验证码
- 输入密码、验证码、注册账号
- 查看数据库的用户表,新增了一条用户信息
4.2 访问登录页面www.test.com/static/login.html
,进行登录
4.3 登录成功后,跳转到了欢迎页面
4.4 查看数据库的token表,增了一条token信息
5. 总结
这个案例的前后端分离的单体架构,到这里就完成了。接下来将进阶,对其应用上Spring Cloud分布式微服务的知识点