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.comDocumentRoot /data/www/default/blog/www.a.com/dist<Directory "/data/www/default/blog/www.a.com/dist">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire 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.comDocumentRoot /data/www/default/blog/api.a.com/public<Directory "/data/www/default/blog/api.a.com/public">Options +Indexes +Includes +FollowSymLinks +MultiViewsAllowOverride AllRequire 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 +MultiViewsAllowOverride AllRequire 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 +MultiViewsAllowOverride AllRequire 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指令)的时候访问控制要相对宽松,因为客户端只能连接你配置的特定主机。
laravel + Vue 前后端分离 之 项目配置- 生产环境部署相关推荐
- laravel + Vue 前后端分离 之 项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点 配置Laravel 作为前 ...
- 基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言 从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...
- Laravel+Vue前后端分离项目(四)邮箱验证与滑动验证
流程图 在做业务逻辑前,我们需要做一个流程图,确保用户所走的业务逻辑不会出现死循环或者陷入死胡同. 效果图 步骤 1.前端页面 src/views/login.vue <templ ...
- Springboot+vue前后端分离(所有项目通用)-实现图片上传
前情说明:本代码暂时只供本人实用,可以实现效果,如大家有觉得需要改进或者可以用到的地方,可以随时给我建议和意见 谢谢 前端vue 按钮 <el-buttonv-model="form. ...
- 基于Springboot+vue前后端分离商城项目基本开发手册——商城表设计【三】
商品信息 商品分组 购物车 订单 地区管理 运费模板 商品信息 1. 背景了解 在看具体的数据库实体设计之前,我们先一起了解下电商的名词定义 1.1 名词定义 参考 <产品 SKU 是什么意思? ...
- JAVA外卖项目第九天 前后端分离和项目部署优化
瑞吉外卖项目优化-Day03 课程内容 前后端分离开发 Yapi Swagger 项目部署 前言 当前项目中,前端代码和后端代码混合在一起,是存在问题的,存在什么问题呢? 主要存在以下几点问题: 1) ...
- phython在file同时写入两个_喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目 赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
- React / Vue 前后端分离项目实现微信分享教程
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 网上非常多的微信分享例 ...
最新文章
- 建高性能ASP.NET站点 第五章—性能调优综述(中篇)
- 测试手机硬件参数软件b站,OnePlus 7T评测:什么是硬件优秀,软件有料,它就是...
- 将vim打造成IDE编程环境
- 多项式加法c语言数组解,急!!!!c语言:求n次多项式的加法和乘法
- pytorch的梯度计算以及backward方法
- vs2017报错 popen pclose
- mq同步mysql数据 duplicate entry_MySQL数据同步之otter
- 【ssi】增删改查六操作小框架(八)
- 记录 之 tf.placeholder() 函数的意义及用法
- web 项目集成福昕_项目学生:Web服务集成
- linux mysql数据库日志关闭,linux 怎样恢復mysql数据库日志
- 旧文重现,10种职场经典寓言
- 计算机专业需要外语口试,计算机专业英语词汇大全,计算机专业必读英语词汇!...
- 实验(一)时间片轮转调度算法(Java)
- 关于c++产生string subscript out of range问题的自己的经历与解决方案
- 液晶屏UFB、STN、TFT比较
- BZOJ3238[Ahoi2013]差异
- 中国本土化编程(汉语编程)之我见
- 第三天--css3-3D平移、缩放、旋转
- 将ts视频文件转换为图片
热门文章
- TF之DCGAN:基于TF利用DCGAN测试MNIST数据集并进行生成过程全记录
- Sql:成功解决将sql输出的datetime时间格式转为常规格式
- Py之mglearn:python库之mglearn简介、安装、使用方法之详细攻略
- vue组件间的传值方式及方法调用汇总
- Bootstrp--一个导航面板切换的实用例子
- 安卓手机开机键失灵,FASTBOOT模式ADB重启
- spring-boot-maven-plugin插件的作用
- 如何一键部署项目代码自动更新
- (译)如何用命令行在windows Azure上安装负载平衡的web Farm虚拟机(linux或其他)...
- 很久没写东西了,留个言。