利用nginx配置java的前后端分离项目(vue+springboot spring cloud)中遇到的问题

1 篇文章 0 订阅
1 篇文章 0 订阅
本文讲述了如何在JavaWeb项目中通过不同域名访问前后端,涉及hosts文件设置、Nginx配置和Vue.js应用调整。重点讲解了如何通过Nginx作为前端代理转发请求,以及在使用Nacos作为微服务管理时的数据库配置步骤。
摘要由CSDN通过智能技术生成

      通用的java web前后端分离项目中,一般建议前后端使用不同的域名访问。

      比如我这里使用了两个测试域名,javag.com 和 face.javag.com(如果使用了spring cloud,也是可以跨域的比如face.javax.com)

      我修改了Windows\System32\drivers\etc\hosts文件:记得用管理员权限打开记事本,再找到这个文件

    127.0.0.1    javag.com
     127.0.0.1    face.javag.com

还有nacos

   127.0.0.1    nacos-host

       javag给前端vue项目使用,而face.javag.com则给后端gateway网关统一分发给微服务使用。这样做的好处是前端项目可以做到和后端项目分开部署,互不影响。

       在本项目中,我的vue项目监听了8001端口,而后端java springboot项目的网关监听了8080端口。

       1. 首先, 如果想要通过域名访问,而不需要带上端口号的话,那就需要nginx来做前端代理,为什么呢?

因为不通过nginx代理的话,vue项目和java web项目同时监听一台机器的80端口是做不到的。

我们所以在nginx/conf/vhosts目录下增加两个配置,分别是 javag.com 和  face.javag.com,这么做的目的是转发javag.com到(8001端口) 和face.javag.com到vue和springboot项目(8080端口)。

分别如下:

face.javag.com_80.conf    

server{
  listen 80;
  server_name  face.javag.com;

  location / {
    proxy_pass  http://127.0.0.1:8080;  #nginx 接收到的80端口访问转发给 8080端口
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
access_log logs/face.javag.com_access.log;
}

javag.com_80.conf类似

 

2. 前端项目中,需要在vue.config.js文件中增加配置

disableHostCheck: true,  #增加这一行,避免出现不允许域名访问 报错 Invalid Host headerport: 8001,

  在public/index.html中修改访问的接口域名地址:

<!-- 开发环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
  <script>window.SITE_CONFIG['apiURL'] = 'http://face.javag.com';</script>  #这一行
<% } %>
<!-- 集成测试环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
  <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080';</script>
<% } %>

 

3. 这样就可以通过域名访问前端和后端项目。

 

在这里没有问题的话算基本上解决了。

 前端页面显示 javag.com界面,调用接口时访问 face.javag.com

 

由于在java后端项目中,我使用了nacos2.0.2做为我的微服务注册中心和管理中心,在本次项目中犯了一个低级错误,就是没有导入nacos的mysql数据库。在多次尝试过程中,会出现前端项目输入用户名密码后,后端返回 basic授权框,要求输入basic用户名密码,这里的原因是 后端gateway网关的auth服务没有正常工作。

下面列出nacos2.0初始化需要做的工作:

1. 配置Nacos的MySQL数据源,需要在application.properties文件末尾,新增如下配置:

spring.datasource.platform=mysql

db.num=1

 db.url.0=jdbc:mysql://localhost:3306/nacos? characterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnico

db.user=nacos  # 这里是创建的nacos数据库

db.password=acba23423sdx  #这里是mysql的密码

2. 新建数据库nacos,运行【nacos/conf/nacos-mysql.sql】文件即可

3. windows下启动 nacos :startup.cmd -m standalone

4. 导入nacos配置文件 :

common.yaml

datasource.yaml

gateway.json

 

之后依次运行后端微服务中的  gateway,auth,admin,monitor等服务,这样整个前后端项目就分别跑起来了。

 

 

   

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值