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

  • 如下图修改验证码发送

nginx 精确匹配txt文件 nginx匹配路径_nginx 域名转发

4. 测试

4.1 访问注册页面www.test.com/static/register.html,进行账号的注册

  • 输入邮箱,获取验证码

nginx 精确匹配txt文件 nginx匹配路径_验证码_02

  • 到邮箱中查看验证码

nginx 精确匹配txt文件 nginx匹配路径_nginx 域名转发_03

  • 输入密码、验证码、注册账号
  • 查看数据库的用户表,新增了一条用户信息

nginx 精确匹配txt文件 nginx匹配路径_验证码_04

4.2 访问登录页面www.test.com/static/login.html,进行登录

nginx 精确匹配txt文件 nginx匹配路径_nginx_05

4.3 登录成功后,跳转到了欢迎页面

nginx 精确匹配txt文件 nginx匹配路径_nginx 域名转发_06

4.4 查看数据库的token表,增了一条token信息

nginx 精确匹配txt文件 nginx匹配路径_nginx 域名转发_07

5. 总结

这个案例的前后端分离的单体架构,到这里就完成了。接下来将进阶,对其应用上Spring Cloud分布式微服务的知识点