FYI. This blog is translated by machine. Please ignore any spelling and grammar errors; sorry for such inconvenience. We appreciate your understanding and support.
Are you excited to install, configure and run your TYPO3 with NGINX server? Then you’ve landed at the correct place; In this article, you will learn TYPO3 NGINX installation, configuration, helpful CLI commands, architecture, etc. Keep reading!
NGINX pronounced like “Engine-ex”, is an open-source web server that, since its initial success as a web server, is now also used as a reverse proxy, HTTP cache, and load balancer. It offers high performance, almost infinite configurations, and is a commonly used component in modern stacks like Kubernetes. In the TYPO3 community and development, many people prefer to choose NGINX as a server of TYPO3 instances for better speed and performance (compared to other servers like Apache).
NGINX vs Apache
In recent decades, the NGINX server is getting more popular on the LAMP/LEMP stack; While the Apache server is losing its market share. In my opinion, the Popularity of the NGINX server is better speed and performance of the webserver.
Do You Know TYPO3 LEMP Stack?
The LEMP software stack is a collection of software that can serve dynamic site pages and web applications written in PHP. This abbreviation depicts a Linux OS with an Nginx ("Engine-X") webserver. The backend information is stored in the MySQL database, and PHP handles dynamic data processing.
NGINX Server Installation for TYPO3
On your UNIX-based system (like Linux), You can easily install the NGINX server for your TYPO3 instance with the below CLI commands.
sudo apt update
sudo apt install nginx
TYPO3 NGINX Firewall Settings
Before we initiate the configuration of the TYPO3 NGINX server, let’s make sure about the server’s firewall and security settings.
// Checkout list of firewall available applications
sudo ufw app list
// Output
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
// Let’s allow the “NGINX HTTP” application to the firewall
sudo ufw allow 'Nginx HTTP'
sudo ufw status
// Output
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)
Test-Drive Your NGINX Server
I’m sure your NGINX server should work well; But let’s have a quick test drive :)
// Check Status of NGINX Server
systemctl status nginx
// Output
nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2018-04-20 16:08:19 UTC; 3 days ago
Docs: man:nginx(8)
Main PID: 2369 (nginx)
Tasks: 2 (limit: 1153)
CGroup: /system.slice/nginx.service
├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
└─2380 nginx: worker process
// Now you should have welcome NGINX page
your_server_ip
Commands to Manage the Nginx Process
JFYI, I recommend going through the below useful NGINX CLI-commands to manage the NGINX server well.
// To stop your web server, type:
sudo systemctl stop nginx
// To start the webserver when it is stopped, type:
sudo systemctl start nginx
// To stop and then start the service again, type:
sudo systemctl restart nginx
// If you are simply making configuration changes, Nginx can often reload without dropping connections. To do this, type:
sudo systemctl reload nginx
// By default, Nginx is configured to start automatically when the server boots. If this is not what you want, you can disable this behaviour by typing:
sudo systemctl disable nginx
// To re-enable the service to start up at boot, you can type:
sudo systemctl enable nginx
Configure NGINX Server Blocks (Recommended)
When using the Nginx web server, you can use server blocks (similar to virtual hosts in Apache) to encapsulate configuration details and host more than one domain from a single server.
// Create your virtual host
sudo mkdir -p /var/www/example.com/html
sudo chown -R $USER:$USER /var/www/example.com/html
sudo chmod -R 755 /var/www/example.com
// Add Test-drive HTML file
nano /var/www/example.com/html/index.html
<html>
<head>
<title>Welcome to Example.com!</title>
</head>
<body>
<h1>Success! The example.com server block is working!</h1>
</body>
</html>
// Create Site-Configuration at NGINX
sudo nano /etc/nginx/sites-available/example.com
server {
listen 80;
listen [::]:80;
root /var/www/example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
try_files $uri $uri/ =404;
}
}
// Let’s Create Reference to Sites-Enable
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
// Configure Hash Bucket Size for NGINX Server
sudo nano /etc/nginx/nginx.conf
...
http {
...
server_names_hash_bucket_size 64;
...
}
...
// Test for syntax errors:
sudo nginx -t
sudo systemctl restart nginx
// Hurray! Try to access your created virtual host
example.com
Configure TYPO3 NGINX
If you are aware of the TYPO3 Apache configuration, then you have the flexibility to configure . Htaccess according to your needs. But NGINX does not support such a structure at the TYPO3 application level, so we need to configure everything at our virtual host.
NGINX web server does not support any static file like htaccess in the document root by default. The NGINX configuration has to be set up manually.
# Edit your existing TYPO3 NGINX configuration
sudo nano /etc/nginx/sites-available/example.com
# Compressing resource files will save bandwidth and so improve loading speed especially for users
# with slower internet connections. TYPO3 can compress the .js and .css files for you.
# *) Set $GLOBALS['TYPO3_CONF_VARS']['BE']['compressionLevel'] = 9 for the Backend
# *) Set $GLOBALS['TYPO3_CONF_VARS']['FE']['compressionLevel'] = 9 together with the TypoScript properties
# config.compressJs and config.compressCss for GZIP compression of Frontend JS and CSS files.
location ~ \.js\.gzip$ {
add_header Content-Encoding gzip;
gzip off;
types { text/javascript gzip; }
}
location ~ \.css\.gzip$ {
add_header Content-Encoding gzip;
gzip off;
types { text/css gzip; }
}
# TYPO3 - Rule for versioned static files, configured through:
# - $GLOBALS['TYPO3_CONF_VARS']['BE']['versionNumberInFilename']
# - $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename']
if (!-e $request_filename) {
rewrite ^/(.+)\.(\d+)\.(php|js|css|png|jpg|gif|gzip)$ /$1.$3 last;
}
# TYPO3 - Block access to composer files
location ~* composer\.(?:json|lock) {
deny all;
}
# TYPO3 - Block access to flexform files
location ~* flexform[^.]*\.xml {
deny all;
}
# TYPO3 - Block access to language files
location ~* locallang[^.]*\.(?:xml|xlf)$ {
deny all;
}
# TYPO3 - Block access to static typoscript files
location ~* ext_conf_template\.txt|ext_typoscript_constants\.txt|ext_typoscript_setup\.txt {
deny all;
}
# TYPO3 - Block access to miscellaneous protected files
location ~* /.*\.(?:bak|co?nf|cfg|ya?ml|ts|typoscript|tsconfig|dist|fla|in[ci]|log|sh|sql|sqlite)$ {
deny all;
}
# TYPO3 - Block access to recycler and temporary directories
location ~ _(?:recycler|temp)_/ {
deny all;
}
# TYPO3 - Block access to configuration files stored in fileadmin
location ~ fileadmin/(?:templates)/.*\.(?:txt|ts|typoscript)$ {
deny all;
}
# TYPO3 - Block access to libraries, source and temporary compiled data
location ~ ^(?:vendor|typo3_src|typo3temp/var) {
deny all;
}
# TYPO3 - Block access to protected extension directories
location ~ (?:typo3conf/ext|typo3/sysext|typo3/ext)/[^/]+/(?:Configuration|Resources/Private|Tests?|Documentation|docs?)/ {
deny all;
}
location / {
try_files $uri $uri/ /index.php$is_args$args;
}
# TYPO3 Backend URLs
location = /typo3 {
rewrite ^ /typo3/;
}
location /typo3/ {
try_files $uri /typo3/index.php$is_args$args;
}
location ~ [^/]\.php(/|$) {
fastcgi_split_path_info ^(.+?\.php)(/.*)$;
if (!-f $document_root$fastcgi_script_name) {
return 404;
}
fastcgi_buffer_size 32k;
fastcgi_buffers 8 16k;
fastcgi_connect_timeout 240s;
fastcgi_read_timeout 240s;
fastcgi_send_timeout 240s;
fastcgi_pass typo3:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
Once you are done with your required TYPO3 NGINX configuration, Make sure to restart your TYPO3 NGINX server.
// Let’s re-start TYPO3 NGINX service
sudo systemctl restart nginx.service
The architecture of TYPO3 NGINX
It’s good to be aware of the all-over structure of the NGINX server; it’s almost similar to the Apache server ;)
Content
/var/www/html
The actual web content, which by default only consists of the default Nginx page you saw earlier, is served out of the /var/www/html directory. This can be changed by altering Nginx configuration files.
Server Configuration
/etc/nginx
The Nginx configuration directory. All of the Nginx configuration files reside here.
/etc/nginx/nginx.conf
The main Nginx configuration file. This can be modified to make changes to the Nginx global configuration.
/etc/nginx/sites-available/
The directory where per-site server blocks can be stored. Nginx will not use the configuration files found in this directory unless they are linked to the sites-enabled directory. Typically, all server block configuration is done in this directory and then enabled by linking to the other directory.
/etc/nginx/sites-enabled/
The directory where enabled per-site server blocks are stored. Typically, these are created by linking to configuration files found in the sites-available directory.
/etc/nginx/snippets
This directory contains configuration fragments that can be included elsewhere in the Nginx configuration. Potentially repeatable configuration segments are good candidates for refactoring into snippets.
Server Logs
/var/log/nginx/access.log
Every request to your web server is recorded in this log file unless Nginx is configured to do otherwise.
/var/log/nginx/error.log
Any Nginx errors will be recorded in this log.
Helpful NGINX TYPO3 Extensions
Our TYPO3 community is incredible; They always create and share excellent solutions in the form of “TYPO3 Extensions” at TER (TYPO3 Extensions Repository).
Reverse Proxy - Cache Manager
This TYPO3 extension is a flexible and generic way to track the cached pages by a reverse proxy like Nginx or varnish, or any helpful CDN.
- By embracing TYPO3's Caching Framework, this extension provides a new cache to track all pages’ output "cacheable".
- When an editor changes the content on a page, the page cache needs to be cleared - and the CDN / reverse proxy needs to be informed that the cache is invalid. This is usually done via an HTTP PURGE request to the CDN / proxy server.
Nginx Cache Manager
This TYPO3 extension adds the required bits to use NGINX's fastcgi_cache for TYPO3 pages. It adds appropriate cache control headers, documents the required NGINX configuration, and flushes the Nginx cache when content changes.
Nginx Connector
This extension provides an Nginx cache connector that purges cached responses in Nginx along with cached pages in TYPO3.
- Configurable Nginx base URL
- Sends PURGE {Nginx base url}/* when flushing the frontend or all caches in the TYPO3 backend.
- Sends PURGE {Nginx request url} for all cached responses associated with a page when flushing its page cache in the TYPO3 backend.
Detects and handles failed Nginx purge requests.
Closure!
Thanks for reading my article. I hope you enjoyed exploring TYPO3 NGINX.
If you are an Apache lover with TYPO3, I suggest you try TYPO3 NGINX. You will love the configuration and performance of your TYPO3 instance with the NGINX server.
Feel free to write to me (to the comment box) with any questions or problems. I’ll be delighted to answer you.
Have a Happy & Speedy TYPO3 with NGINX!
It feels like Apache is easier and gets the job done. But looking at the growth of Nginx and the possibilities it has, the future revolves around it. I follow your blogs regularly, I will wait for the next installment for this and the other related technologies.