Complete TYPO3 NGINX Installation & Configuration Handbook

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).

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

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)

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

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

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.

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!