You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This project can be used to serve **static assets** (like, for example, `css`, `js`, `jpg` files) of your website from a **"self-hosted CDN"**, that will act as a **transparent proxy** from the origin server to the client's browser.
4
4
5
5
The peculiarity of this project is that, for every image requested **from the transparent proxy**, it will **convert the source image in WEBP format**, serve it, and then for every other request all images will be **permanent-redirected to the webp version**.
6
6
7
+
## What is the purpose of this project?
8
+
9
+
The purpose of this project is to **serve static assets from a CDN in your control**, without having to **touch the code of the origin server**.
10
+
11
+
This is useful, for example, if you:
12
+
13
+
1. Don't want to use a third-party CDN like Cloudflare or Cloudfront
14
+
2. Don't want to touch the code of the origin server - in the sense that you don't want to deeply change the way static assets are referenced in the HTML, but only write a quick and dirty rewrite rule to redirect all static assets to the CDN itself (or a buffer post-processing function, if you are using a CMS)
15
+
3. Want to serve **webp** images to browsers that support it, and **jpg** images to browsers that don't support it, without having to touch the code of the origin server
16
+
17
+
## Request lifecycle
18
+
19
+
1. The client requests a _Web Page_ of your website
20
+
2. That _Web Page_ contains references to static assets (images, css, js, etc) that are re-routed to the CDN in a 1:1 pattern, like `https://my-project.example.com/images/whatever/resource.jpg` -> `https://static.mycdn.com/images/whatever/resource.jpg`
21
+
3. The _Transparent Proxy CDN_ receives the _Request_ (file path) and checks if the requested _Resource_ is already present in its filesystem
22
+
4. If the _Resource_ is physically present on the CDN's filesystem, it is served to the client and optimized via the `.htaccess`_Expires_ and _Cache-Control_ directives
23
+
5. If the _Resource_ is not present on the CDN's filesystem, it is **automatically fetched from the origin server** and served to the _Client_, and then it is **cached** on the CDN's filesystem. In this case, _headers_ are blindly mirrored from the origin server to the client, and the _Expires_ and _Cache-Control_ directives are set via PHP
24
+
7
25
## Can you give me an example of what's going on?
8
26
9
27
Suppose you:
@@ -14,17 +32,17 @@ Suppose you:
14
32
15
33
Then, you would only need to make sure that **images** in the **origin server** are referenced in the HTML this way:
16
34
17
-
```
18
-
...
35
+
```html
36
+
<!--
19
37
The HTML of a page inside https://my-project.example.com
Then, voilà, **your origin server is webp-enabled without touching a single line of code** (apart from redirecting static assets to the CDN itself, but **that is easy**)
@@ -35,19 +53,27 @@ You define it via the **.env** file
35
53
36
54
## Installation
37
55
38
-
1. A lamp server with a valid https virtualhost
39
-
2. Clone this repo to the virtualhost's root dir
40
-
3. Make sure `mod_rewrite` and `mod_headers` are enabled ( `sudo a2enmod rewrite headers` )
41
-
4. Make sure you have `curl` support in your PHP enabled modules
42
-
5. Run `composer install`
43
-
6. Install my other project, `https://github.com/mauriziofonte/php-image-to-webp-conversion-api` into a virtualhost of its own (maybe in another dev server with PHP's `exec()` enabled) and set it up reading the project's readme
44
-
7. Clone the `.env.example` into `.env` and modify it accordingly to your needs
56
+
1. Clone this repo inside your _LAMP_ server with a VirtualHost pointed to `/proj/dir/public`
57
+
2. Make sure `mod_rewrite`, `mod_headers` and `mod_expires` are enabled ( `sudo a2enmod rewrite headers expires` )
58
+
3. Make sure you have `curl` support in your _PHP enabled modules_
59
+
4. Make sure you're running at least **PHP 7.2.5**
60
+
5. Run `composer install`
61
+
6. Install my other project [https://github.com/mauriziofonte/php-image-to-webp-conversion-api](https://github.com/mauriziofonte/php-image-to-webp-conversion-api) into a VirtualHost of its own - _even better in another dev server with PHP's `exec()` enabled_ and configure it accordingly to the project's readme
62
+
7. Clone the `.env.example` into `.env` and modify it accordingly to your needs
63
+
64
+
Specifically, if you want to use the **Image to WEBP conversion API**, you need to set the `WEBP_API_SERVER` and `WEBP_API_KEY` variables in the `.env` file.
65
+
66
+
> **Heads up!**
67
+
>
68
+
> The application **automatically caches** the `.env` file into `.cached.env.php` to avoid reading the `.env` file on every request.
69
+
>
70
+
> If you modify the `.env` file, you need to **manually delete** the `.cached.env.php` file to force the application to re-read the `.env` file.
45
71
46
72
## What to do on the frontend, to rewrite static assets to the CDN
47
73
48
74
It depends on your application. If it is a CMS, refer to the CMS's output buffering and/or output filter functionalities. If it's something custom, you can do the following (untested!):
49
75
50
-
```
76
+
```php
51
77
<?php
52
78
ob_start('rewrite_static_assets');
53
79
... app ...
@@ -77,20 +103,26 @@ It depends on your application. If it is a CMS, refer to the CMS's output buffer
77
103
78
104
## How to configure the .env
79
105
80
-
```
106
+
```text
81
107
DEBUG = true|false
82
108
Defines the error reporting of the application. NEEDS TO BE TURNED OFF IN PRODUCTION, otherwise static assets output may be poisoned from the PHP error output
83
-
SOURCE_HOST = "https://main.origin.server.biz"
109
+
110
+
SOURCE_ORIGIN = "https://main.origin.server.biz"
84
111
Defines the main host where the "original" static assets are physically present and can be cloned from
Define the extensions that will be enabled on the transparent proxy. Potentially, you could use this to cache also HTML or ZIP files
115
+
87
116
CACHE_EXPIRY = 2592000
88
117
Defines the expiry time of static assets served from the trasparent CDN. Please keep in mind that this directive will be set via PHP only the "first time" a static asset does not exists on the CDN filesystem. Subsequent calls will be cached accordingly to what the .htaccess defines. (1 month)
Defines the Image to WEBP api url, that can be cloned from https://github.com/mauriziofonte/php-image-to-webp-conversion-api . Refer to the documentation of that project to know more.
125
+
94
126
WEBP_API_KEY = "a-very-strong-api-key"
95
127
Same as WEBP_API_SERVER. Refer to the documentation of "php-image-to-webp-conversion-api" to know more.
0 commit comments