前端vue与后端Thinkphp在服务器的部署

前端vue与后端Thinkphp在服务器的部署,第1张

vue在服务端部署时,我们都知道通过npm run build 指令打包好的dist文件,通过http指定是可以直接浏览的,Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据,有两种方法:1、前端跨域调用后端数据,2、前端打包文件部署在后端的服务器文件夹下(同域)。

web服务器: apache

一、跨域

在服务器配置站点

在路径/home/www/  下创建test项目文件夹,用来放项目文件。  

找到httpd-vhosts.conf文件配置站点  

前端站点:  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

后端站点:  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

将前端打包好的dist文件放在/home/www/test/ 文件夹下,运行http://test.test.com可浏览,当路径改变时,刷新会出现404错误。此时dist文件下创建一个.htaccess文件,当路径不存在时,路径指向http://test.test.com/index.html能解决此问题。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夹下创建项目根目录php文件夹,将thinkphp文件放在php下。TP5的入口文件在public文件下,在这将public下的入口文件index.php挪到php文件夹下(个人习惯将入口文件放在项目根目录), 后端绑定Index模块。

前端调用后端接口,存在跨域,跨域解决方法有好几种,在这我将在后端php做配置,解决跨域问题,在公用控制器设置跨域配置:

class Common extends Controller  

{  

    public $param  

    // 设置跨域访问  

    public function _initialize()  

    {  

        parent::_initialize()  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : ''  

        header('Access-Control-Allow-Credentials: true')  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS')  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId")  

$param =  Request::instance()->param()  

$this->param = $param  

    }  

}  

前端调用登录接口: this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定义接口:http://test.testphp.com/index.php/)

二、同域

后端配置同上,公共配置器中的header配置注释。将前端的dist文件下的所有文件(包含.htaccess),放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件:

namespace app\index\controller  

use think\Controller  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/index.html')  

    }  

}  

前端调用登录接口: this.axios.post('/index.php/base/login', {user: '', password: ''})

转自:https://blog.csdn.net/qq_35465132/article/details/78986675

前边介绍了负载均衡,mysql同步,接下来介绍tp6分布式部署多个数据库,实现读写分离。

tp6的分布式部署读和写仍然是一个系统,这里我们分开操作,给用户展示的就是从数据库,后端添加文章就是主库,然后同步到从库。

1、配置数据库链接参数

目标:实现随机使用数据库展示信息,只是读操作。

测试:前台可以读取表中内容(存放的不一致),查看是否是随机显示的。

打开.env文件进行编辑

说明:

2、编辑database.php

找到deploy设置为1分布式部署,下边不要改,都是读,写入的也就是后端的我们单独建站连接主库。

配置完成,tp6使用的是mt_rand取随机数判断使用哪个数据库。

3、数据库交互写操作

比如浏览量没必要每次都去更新数据库,可以先使用redis缓存,存够1000的整数倍,再去更新数据库。

4、后台独立,也就是写

可以前后端分离,单独做一个网站(没有前端)使用ip访问或者独立的域名连接后台。

5、上传附件(jquery ajax跨域上传)

使用了nginx负载均衡,肯定是多个一样的网站,如果图片存放到一个站,别的就不能访问了,可以单独设置一个附件(压缩包,图片等)服务器,可以使用二级域名连接,这就要求我们上传附件的时候,是上传到附件服务器。

jqueryURL

API控制器apdpic方法

说明:

也可以先传到后台服务器然后使用(php)ftp上传,或者是通过curl上传到附件服务器,感觉那样毕竟麻烦,直接设置跨域会比较简单。

也测试了使用jsonp跨域,但是不能上传附件。

6、thinkphp6实现读写分离(在一个站点)

我个人是不喜欢这样的,负载均衡应该是均衡地读,也就是前台单独一个站点,后端的写是另一个独立的站点,看个人喜好吧。

独立后台的优点:可以提升安全性,因为我们的后台网址是不公开的,避免用户猜测一些后台的信息。

.env配置按照1所述编辑,默认第一个是主库。

database.php

愿大家在新的一年心想事成,万事如意!!!

一、阿里ECS服务器配置

     1.因为线上已经有几个站点了.所以要配置ngnix多站点

     2.阿里云ecs目录结构,ngxin 在/etc/nginx/目录下,配置的地方主要是nginx.config文件。或者在conf.d新建一个配置文件然后在include到nginx.config文件中

        

     3.nginx.config新建站点信息

server {

listen       80

server_name  www.你的域名.com

root         站点的相对路径

index index.php index.html index.htm

#charset koi8-r

#access_log  /var/log/nginx/host.access.log  main

# Load configuration files for the default server block.

include /etc/nginx/default.d/*.conf

location / {

#try_files $uri $uri/ /index.php

root   /opt/www/pcweb/ytyy_pc

index  index.php index.html index.htm            if (!-e $request_filename) {   rewrite  ^(.*)$ /index.php?s=$1  last  break   }}             url重写(可以没有)

# redirect server error pages to the static page /40x.html

#

error_page  404              /404.html  40错误页面配置

location = /40x.html {

}

# redirect server error pages to the static page /50x.html

#

error_page   500 502 503 504  /50x.html 50错误页面配置

location = /50x.html {

}

location ~ \.php$ {

root           站点相对路径

fastcgi_pass   127.0.0.1:9000

fastcgi_index  index.php

fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name

include        fastcgi_params

}

location ~ /\.ht {

deny  all

}

}

配置文件的基本内容如上;

配置完成后测试配置文件是否正确

这样配置就可以使用了

然后重启nginx服务器 

这样nginx配置就结束了可以使用了。吧站点文件放到对应的目录下面。我直接git clone过去的。

二.thinkphp项目文件转移

本来以为上传完就结束了。上传上去碰到的第一个问题就是访问页面报错,页面被电信的114页面劫持了。。。麻蛋 看不到报错

万能百度大法

解决方法1.internet高级选项->隐私->站点  新加阻止站点

解决方法2:控制面板->网络和internet->本地连接->属性->ipv4  使用如下ip

终于搞定可以看到报错页面了。。。。。。麻蛋。再次开启万能百度大法

 

 

 得到最终结论是文件目录权限引起的。thinkphp 的runtime目录没有写入权限。。thinkphp文件上传到阿里的好像都有这个问题。解决问题很简单

进入到项目文件目录

直接跟文件最高权限

chmod -R 777 [目录]  //linux修改文件权限

 


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/133775.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-03-17
下一篇2023-03-17

发表评论

登录后才能评论

评论列表(0条)

    保存