ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2021-08-04 17:59:57  阅读:203  来源: 互联网

标签:Vue 项目 网络商城 Nginx 域名 leyou nginx 服务器 com


一、前端页面

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/

在这里插入图片描述

在这里插入图片描述

标签:Vue,项目,网络商城,Nginx,域名,leyou,nginx,服务器,com
来源: https://blog.csdn.net/qq_44757034/article/details/119301453

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有