Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）五（前端页面，使用域名访问本地项目）

Posted 2021-09-01 蓝盒子bluebox

一、前端页面

1、域名使用

打开上次的项目

切换目录启动运行



访问项目
http://localhost:9001

如果不同环境使用不同的ip去访问，可能会出现一些问题。

为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。

我们将使用以下域名∶

• 主域名是:www.leyou.com
• 管理系统域名:manage.leyou.com
• 网关域名: api.leyou.com

但是最终，我们希望这些域名指向的还是我们本机的某个端口。
那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢?

2、域名解析

一个域名一定会被解析为一个或多个ip。这一般会包含两步∶

• 本地域名解析
  浏览器会首先在本机的hosts文件中查找域名映射的IP地址，如果查找到就返回IP，没找到则进行域名服务器解析，一般本地解析都会失败，因为默认这个文件是空的。

  • Windows下的hosts文件地址:C:\\Windows\\System32\\drivers\\etc\\hostso
    

  • Linux下的hosts文件所在路径:letc/hosts样式:

样式：
#My hosts
127.0.0. 1 localhost
0.0.0.0 account .jetbrains.com
127.0.o. 1 www.xmind.net

• 域名服务器解析
  本地解析失败，才会进行域名服务器解析，域名服务器就是网络中的一台计算机，里面记录了所有注册备案的域名和ip映射关系，一般只要域名是正确的，并且备案通过，一定能找到。

3、解决域名解析问题

（1）设置域名解析映射

我们不可能去购买一个域名，因此我们可以伪造本地的hosts文件，实现对域名的解析。
修改本地的host为:

127.0.0. 1 api.leyou.com
127.0.0.1 manage.leyou.com

这样就实现了域名的关系映射了。
每次在C盘寻找hosts文件并修改是非常麻烦的，给大家推荐一个快捷修改host的工具，

这里为大家提供了该软件：https://download.csdn.net/download/qq_44757034/20671507

管理员方式运行

运行效果




点击开启



修改leyou-manage-web下的build下的webpack.dev.conf.js

disableHostCheck: true,

终止运行 Ctrl+C后从新运行

http://manage.leyou.com:9001/#/index/dashboard

4、nginx解决端口问题

虽然域名解决了，但是现在如果我们要访问，还得自己加上端口:http://manage.taotao.com:9001 。

这就不够优雅了。我们希望的是直接域名访问: http://manage.taotao.com。这种情况下端口默认是80，如何才能把请求转移到9001端口呢?

这里就要用到反向代理工具:Nginx

（1）什么是Nginx

Nginx是一个高性能的 Web 和反向代理服务器，它具有有很多非常优越的特性;

作为Web服务器:相比Apache，Nginx使用更少的资源，支持更多的并发连接，体现更高的效率，这点使 Nginx尤其受到虚拟主机提供商的欢迎。
能够支持高达50,000个并发连接数的响应，感谢Nginx为我们选择了epoll and kqueue作为开发模型.

作为负载均衡服务器，Nginx既可以在内部直接支持 Rails 和 php，也可以支持作为 HTTP代理服务器对外进行服务。Nginx用C编写,不论是系统资源开销还是CPU使用效率都比Perlbal要好的多。

作为邮件代理服务器: Nginx同时也是一个非常优秀的邮件代理服务器（最早开发这个产品的目的之一也是作为邮件代理服务器),Last.fm描述了成功并且美妙的使用经验。

Nginx安装非常的简单，配置文件非常简洁（还能够支持perl语法)，Bugs非常少的服务器: Nginx启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。你还能够在不间断服务的情况下进行软件版本的升级。

nginx可以作为web服务器，但是更多的时候，我们把它作为网关，因为它具备网关的必备功能：

• 反向代理
• 负载均衡
• 动态路由
• 请求过滤

（2）Nginx作为web服务器

Web服务器分2类

• web应用服务器，如
  • tomcat
  • resin
  • jetty
• web服务器，如：
  • Apache服务器
  • Nginx
  • IIS

区分：web服务器不能解析jsp等页面，只能处理js，css，html等静态资源
并发：web服务器的并发能力远远高于web应用服务器

Nginx+tomcat

（3）Nginx作为反向代理

什么是反向代理？

• 代理:通过客户机的配置，实现让一台服务器代理客户机，客户的所有请求都交给代理服务器处理。
• 反向代理:用一台服务器，代理真实服务器，用户访问时，不再是访问真实服务器，而是代理服务器。

nginx可以当做反向代理服务器来使用:

• 我们需要提前在nginx中配置好反向代理的规则，不同的请求，交给不同的真实服务器处理
• 当请求到达nginx，nginx会根据已经定义的规则进行请求的转发，从而实现路由功能

如果是安装在虚拟机：

二、使用域名访问本地项目

1、虚拟机安装Nginx

• 查看是否有Nginx

ps -ef | grep nginx

• 新增用户

useradd leyou

• 上传安装包
  上传文件到目录：/home/leyou/

• 解压安装包
  
  进入Nginx
  
• 配置
  进入nginx目录
  安装pcre-devel解决问题

yum -y install pcre-devel

./configure --prefix=/opt/nginx --sbin-path=/usr/bin/nginx

这里指定安装目录在:/opt/nginx目录下

• 编译安装

make && make install

安装完成

• 启动
  Nginx可以通过命令来启动，操作命令
  • 启动：nginx
    安装完然后启动
    
    查看是否启动

ps -ef | grep nginx

通过命令开启端口号

iptables -I INPUT -p tcp --dport 80 -j ACCEPT  #开启端口号
service iptables status      #查看

保存设置开启端口号的设置

service iptables save

测试访问：

• 配置本机访问
  
  复制以下内容
  其中的ip地址是虚拟机的

server {
        listen       80;
        server_name  manage.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;


        location / {
            proxy_pass http://192.168.58.1:9001; #主机地址 下的9001端口
            proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }

}
server {
        listen       80;
        server_name  api.leyou.com;

        proxy_set_header X-Forwarded-Host $host;
		proxy_set_header X-Forwarded-Server $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;


        location / {
            proxy_pass http://192.168.58.1:10010; #主机地址 下的9001端口
            proxy_connect_timeout 600;
			proxy_read_timeout 600;
        }

}

复制到以下内容，不需要删除原有内容

• 在服务器上开启对应的端口号

iptables -I INPUT -p tcp --dport 9001 -j ACCEPT
iptables -I INPUT -p tcp --dport 10010 -j ACCEPT

service iptables status      #查看

保存配置

service iptables save

• 重启nginx

nginx -s reload

2、修改本机映射

# yun6
192.168.58.101 manage.leyou.com
192.168.58.101 www.leyou.com
192.168.58.101 api.leyou.com

在cmd当中ping一下

直接访问http://manage.leyou.com/