多域名部署

提示

laytp推荐使用单域名部署，如果你想将静态资源单独一个域名访问（比如你使用了CDN加速静态资源），接口和html使用单独域名访问，不同的应用接口之间使用单独域名访问，可以进行多域名部署，接下来是多域名部署的教程

前提

执行多域名部署前，应完成了单域名部署除域名解析的步骤

准备4个域名

下面举例4个域名，并说明4个域名的作用以及绑定到的目录（本地解析域名可以修改本地的hosts文件，都指向到127.0.0.1的IP）

localadmin.laytp.com

用于访问后台的静态Html页面
绑定到 /public/admin/ 目录

nginx配置举例

server 
{
      listen       80;
      server_name  localadmin.laytp.com;
      root   "yourCatalog/public/admin/";
}

localstatic.laytp.com

用于访问静态css、image、js资源
绑定到 /public/static/ 目录

nginx配置举例

server 
{
      listen       80;
      server_name  localstatic.laytp.com;
      root   "yourCatalog/public/static/";
      location ~ .*\.(eot|ttf|otf|woff|woff2|svg|yml)$ {
          #添加下列头部，解决跨域问题
          add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Headers X-Requested-With;
          add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
      }
}

注意点，.json文件浏览器是禁止跨域请求的，所以，在多域名部署模式下，不要请求静态资源的.json文件。所有数据类请求都使用api接口提供

localapi.laytp.com
- 用于访问前端的api接口
- 绑定到 /public/ 目录
- Nginx配置，参考单域名部署的Nginx配置
localadminapi.laytp.com
- 用于访问后端的api接口
- 绑定到 /public/ 目录
- Nginx配置，参考单域名部署的Nginx配置

域名要求

访问后台的静态Html页面的域名 和 访问后端的api接口的域名 的主域名需要相同。
也就是 localadmin.laytp.com 和 localadminapi.laytp.com 两个域名的主域名 laytp.com 部分需要相同，否则即使你做了后续的操作， ThinkPHP6 中基于 Session 的功能将不能使用。比如 验证码 功能， CSRF-TOKEN 功能。

意义

为什么要实现使用4个域名来访问Laytp

静态资源支持使用独立域名访问后，你可以将 /public/static/ 目录下的文件同步至CDN
前后端接口访问域名区分后，安全得到了保障，暴露给前端使用的Api接口地址将不能访问到后台项目

后续步骤，完成多域名部署

修改/public/admin/index.html和/public/admin/login.html两个文件

localStorage.setItem("adminDomainModel","true");// /public/admin目录是否独立绑定域名模式，如果是多域名部署模式要改成true
localStorage.setItem("adminApiDomain","http://localadminapi.laytp.com");// 请求后台接口的域名
localStorage.setItem("staticDomain","http://localstatic.laytp.com");// 请求静态资源的域名

解决跨域验证码问题
- 修改config/cookie.php文件，将有效域名设置成主域laytp.com
- 修改config/session.php文件，将var_session_id设置成session_id
- 前端进行登录验证时将PHPSESSID的cookie值使用session_id为key的方式传递给后端
  - 这个在进行后台登录部分的前端代码已经实现了

修改Mysql的表lt_admin_menu，将href字段的值，把开头的/admin/改成/

  UPDATE `lt_admin_menu` SET `href` = replace(`href`,'/admin/','/') WHERE `href` LIKE '/admin/%';

修改Mysql的表lt_admin_menu，将rule字段的值，把开头的/admin.改成/

  UPDATE `lt_admin_menu` SET `rule` = replace(`rule`,'/admin.','/') WHERE `rule` LIKE '/admin.%';

修改laytp.config.yml，将默认的控制面板地址前面的/admin去掉

修改路由文件，/route/app.php

  <?php
  //自定义路由
  use think\facade\Route;
  // api子域名路由指定
  Route::domain('localapi',function () {
      Route::rule('/plugin/:plugin', "laytp\library\PluginRoute@execute");
      Route::get('captcha/[:config]','\\think\\captcha\\CaptchaController@index');
      Route::rule('/:pathInfo', '/api.:pathInfo')->pattern(['pathInfo'=>'[\w\.\/]+']);
      Route::miss(function() {
          return json([
              "code" => 0,
              "msg" => '路由不存在',
              "data" => new stdClass()
          ]);
      });
  });
  // adminapi子域名路由指定
  Route::domain('localadminapi',function () {
      Route::rule('/plugin/:plugin', "laytp\library\PluginRoute@execute");
      Route::get('captcha/[:config]','\\think\\captcha\\CaptchaController@index');
      Route::rule('/:pathInfo', '/admin.:pathInfo')->pattern(['pathInfo'=>'[\w\.\/]+']);
      Route::miss(function() {
          return json([
              "code" => 0,
              "msg" => '路由不存在',
              "data" => new stdClass()
          ]);
      });
  });

修改laytp.config.yml

index的href/admin去掉

index:
id: "2" ## 标识 ID , 建议与菜单项中的 ID 一致
href: "/console.html" ## 页面地址

logo的image的/static去掉

yml

## 网站配置
logo: 
## 网站名称
title: "Laytp Admin"
## 网站图标
image: "/admin/images/logo.png"

修改.env文件，增加[DOMAIN]部分的配置

  [DOMAIN]
  api = "http://localapi.laytp.com"
  adminapi = "http://localadminapi.laytp.com"
  static = "http://localstatic.laytp.com"

至此，多域名部署模式完成，你可以使用 localadmin.laytp.com 来访问Laytp了

注意点

编辑器插件，UEditor和MEditor中都有图片上传的功能。

UEditor提供单图上传和多图上传
MEditor仅提供单图上传

如果使用多域名部署Laytp，UEditor和MEditor两个编辑器的单图上传都将有获取iframe值跨域问题。

UEditor的多图上传功能，可以将UEditor的js放置到admin目录下，修改编辑器统一加载的ueditor.html，引用admin目录下的ueditor的js文件可以避免跨域问题

部署建议

为了方便使用编辑器的上传功能，后端整个项目不要进行跨域部署。实际部署时，仅设置app/controller/api目录为独立域名，后端的项目使用一个独立的域名即可。实际部署时，就只需要api.domain.com和admin.domain.com两个域名即可。上述的后续步骤，仅需修改route文件即可