laravel + Vue 前后端分离 之 项目配置- 生产环境部署

几日之后,开始部署 生产环境, 有兴趣的同学可以先看一下laravel + Vue 前后端分离 项目配置 开发环境,好了,废话少说,开始总结

部署过程中的问题:https://blog.csdn.net/qq_22227087/article/details/82527526

说明:
项目配置: 
	主网站     www.a.com 
	接口域名	api.a.com  

第一步: vue-cli开发环境中配置代理服务

原:

const DEVHOST = 'http://api.a.com/api/';
module.exports = {
  '/': {
    target: DEVHOST,
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  },
}
项目中调用接口

this.$http.get('/blogs/blists')...
即请求地址: http://api.a.com/api/blogs/blists

开发过程中使用顺利,美滋滋,但是在部署到生产环境中之后,报api接口404, 着实让人难受,结果一番搜索吧,终于找到了解决办法.

const DEVHOST = 'http://api.a.com/'; # 去掉api/
module.exports = {
  '/': {
    target: DEVHOST,
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  },
}

项目中调用接口

this.$http.get('/api/blogs/blists')... # 在每一个请求上添加 /api/xxxx
即请求地址: http://api.a.com/api/blogs/blists

第二步: 改代理服务地址(反向代理)
由于我使用的是Apache服务器,所以主要以Apache说明,请领会意思,举一反三

首先, 开启代理()

# 配置文件地址 :  /usr/local/apache/conf/httpd.conf
//去调下面俩行的注释(#)
#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_http_module modules/mod_proxy_http.so

两种方式

使用 域名 配置

# 配置文件地址: /usr/local/apache/conf/extra/httpd-vhosts.conf
# vue
# www.a.com 地址配置
<VirtualHost *:80>
    ServerName www.a.com
    DocumentRoot /data/www/default/blog/www.a.com/dist
    <Directory  "/data/www/default/blog/www.a.com/dist">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require all granted
    </Directory>

	# 反向代理
	# ProxyRequests On # 开启正向代理
	ProxyRequests Off # 开启反向代理
	# ProxyPass /api http://api.a.com/
	# ProxyPassReverse /api http://api.a.com/
	ProxyPassMatch ^/api http://api.a.com/
</VirtualHost>

ProxyRequests Off 指令是指开启反向代理,对于客户端来说,他就是原始服务器,并且客户端不用进行特别的设置;而正向代理允许客户端通过它访问任何服务并隐藏客户端自身,因此必须采取一些安全措施确保只为授权的服务器提供服务;
ProxyPass 将一个远端服务器映射到本地服务器的URL空间中;
ProxyPassReverse 调整由反向代理服务器发送的HTTP回应头中的URL;

# laravel
# api.a.com 配置 
<VirtualHost *:80>
	ServerName api.a.com
	DocumentRoot /data/www/default/blog/api.a.com/public
	<Directory  "/data/www/default/blog/api.a.com/public">
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		AllowOverride All
		Require all granted
	</Directory>
</VirtualHost>

使用 端口 配置

# vue
# www.a.com 地址配置
# 端口: 8081
<VirtualHost 127.0.0.1:8081>
    DocumentRoot /data/www/default/blog/www.a.com/dist
    <Directory  "/data/www/default/blog/www.a.com/dist">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require all granted
    </Directory>

	# 反向代理
	ProxyPreserveHost Off 
	ProxyPass /api http://127.0.0.1:8082/
	ProxyPassReverse /api http://127.0.0.1:8082/
</VirtualHost>

# laravel
# api.a.com 配置 
# 端口: 8082
<VirtualHost 127.0.0.1:8082>
	DocumentRoot /data/www/default/blog/api.a.com/public
	<Directory  "/data/www/default/blog/api.a.com/public">
		Options +Indexes +Includes +FollowSymLinks +MultiViews
		AllowOverride All
		Require all granted
	</Directory>
</VirtualHost>

部署过程中的问题:https://blog.csdn.net/qq_22227087/article/details/82527526

到此就OK了,

参考链接:
Nginx 配置: http://vue_book.siwei.me/nginx_fix_cross_domain_problem.html
apache代理转发配置: https://blog.csdn.net/m0sh1/article/details/78621270



在这里插入图片描述
在这里插入图片描述
使用正向代理时严格控制访问权限(使用ProxyRequests指令)是非常重要的。否则你的代理会被客户端利用来访问其它服务器并且隐藏客户端的真实身份。这不仅对您的网络有威胁,对整个因特网来说也同样如此。当使用反向代理(在"ProxyRequests Off"条件下使用ProxyPass指令)的时候访问控制要相对宽松,因为客户端只能连接你配置的特定主机。

本文介绍了一个基于Spring Boot、Spring Cloud和Vue前后端分离项目实战。这个项目是一个简单的在线商城,包含了用户注册、登录、商品展示、购物车、订单管理等功能。通过这个项目,读者可以深入理解前后端分离的架构模式和互联网应用的开发方式。 首先,文章介绍了前后端分离的基本概念和优势。前后端分离是将应用的前端和后端代码分开来开发,使得前端和后端具有独立的开发周期和技术栈,进而提高了开发效率和代码质量。同时,前后端分离还可以提供更好的用户体验和灵活性,对于互联网应用来说尤为重要。 接下来,文章介绍了项目的架构和技术栈。项目采用了Spring Boot和Spring Cloud框架来实现后端代码,采用MyBatis作为ORM框架和Redis作为缓存中间件。同时,项目还采用了Vue.js作为前端框架和Element UI组件库来实现前端页面。通过这些开源框架和组件,可以快速搭建一个前后端分离的互联网应用。 然后,文章介绍了项目的核心功能和代码实现。在用户注册和登录方面,项目采用了Spring Security框架和JWT令牌来实现用户认证和授权,保证了用户信息的安全性。在商品展示和购物车方面,项目采用了Vue.js来实现前端页面和事件处理。在订单管理方面,项目采用了MyBatis Plus来实现订单数据的持久化和分页查询。 最后,文章介绍了项目的测试和优化。通过对项目的压力测试和性能测试,文章发现项目还存在一些性能瓶颈和安全隐患,可以通过优化数据库查询、缓存配置和代码实现来提高应用的性能和安全性。 总之,这篇文章介绍了一个基于Spring Boot、Spring Cloud和Vue前后端分离项目实战,通过实现一个在线商城的功能,展示了前后端分离的开发模式和互联网应用的开发技术栈。本文可以作为前后端分离开发的入门教程,也可以作为互联网应用开发的参考文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值