Caddy单域名部署Vue与Laravel项目

之前是想写一篇 Nginx 关于配置前后端项目公用一个域名笔记的,可是后来客户提供的是已经是由其它项目的服务器,他们是使用的 Caddy 作为 web 服务器,所以也就变成了这篇文章。

我对于服务器环境配置可以说是一无所知,勉勉强强完成这次的项目部署,各位将就看看…😖

使用两个二级域名

一个顶级域名可以创建很多个二级域名,所以使用两个二级域名就很容易配置了,直接创建两个服务就可以,但是会跨域,因为是不同二级域名,后端单独做一下跨域允许就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Vue
https://www.example.com {
root /var/www/vue
log /var/log/caddy/fe.log
errors /var/log/caddy/fe.errors.log
gzip

rewrite {
to {path} /
}
}
# Laravel
https://api.example.com {
root /var/www/laravel/public
log /var/log/caddy/bk.log
errors /var/log/caddy/bk.errors.log
gzip

# PHP-FPM Configuration for Caddy
fastcgi / /run/php/php7.2-fpm.sock php {
ext .php
split .php
index index.php
}

rewrite {
to {path} {path}/ /index.php?{query}
}
}

使用同一个域名

方法一:使用同一域名然后不同路径作为站点地址:

我使用 https://www.example.com/ 作为 Vue 项目的地址;
https://www.example.com/api 作为 laravel 项目的站点地址。
配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Vue
https://www.example.com {
root /var/www/vue
log /var/log/caddy/fe.log
errors /var/log/caddy/fe.errors.log
gzip

rewrite {
to {path} /
}
}
# Laravel
https://www.example.com/v/ {
root /var/www/laravel/public
log /var/log/caddy/bk.log
errors /var/log/caddy/bk.errors.log
gzip

# PHP-FPM Configuration for Caddy
fastcgi / /run/php/php7.2-fpm.sock php {
ext .php
split .php
index index.php
}

rewrite {
to {path} {path}/ /index.php?{query}
}
}

这个时候访问的地址,后台可以接收到,但是在路由表中找不到对应信息,因为 laravel 部分把 /api 作为路由前缀,修改一下就可以了,例如 https://www.example.com/v ,前端请求的时候使用 /v/api 这个地址

方法二:使用一个域名作为 Vue 项目站点地址,api接口使用重定向

这个方法我还没有在Caddy尝试,Nginx倒是知道,等以后尝试看看


遇到问题

  • 配置完之后访问 laravel 提示 [ file not found ]
    一般来说遇到这个问题的同时,可以在日志文件中查看到 Primary script unknown 的异常,这个问题是由于配置的目录没有写入权限,如果已经配置了写入权限,请确保在 同一用户/组 下运行 Caddyphp-fpm

  • 如果 Vue 项目需要启用 History 路由模式怎么配置Caddy ?
    当使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,不过这种模式还需要后台配置支持。
    因为应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,所以需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面

    1
    2
    3
    4
    rewrite {
    regexp .*
    to {path} /
    }