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!

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

 


 

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.

 

TYPO3 NGINX vs Apache

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!

Your One Stop Solutions for Custom TYPO3 Development

  • A Decade of TYPO3 Industry Experience
  • 250+ Successful TYPO3 Projects
  • 87% Repeat TYPO3 Customers
Get Your Free Quote

Post a Comment

×
  • user
    Erik Vogler 2023-07-14 at 4:03 pm
    I've been struggling with configuring TYPO3 to work seamlessly with NGINX, but this blog help me a lot.
  • user
    Josh Bergmann 2021-09-09 at 12:01 pm
    I was looking for a blog to get started with Nginx because it is in trend and works better than Apache (at least I feel that way) but what do you feel about other web servers like Microsoft IIS and Caddy Server? How do you feel about it? Are you planning on releasing a blog for the same?
  • user
    Jürgen Schmitz 2021-09-08 at 11:27 am
    Hi Thanks for the commands to manage Nginx and related processes, resources that are shared, documentation that is available to download but I must say that I am confused between Apache and 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.
  • user
    Noah Neumann 2021-09-07 at 12:25 pm
    hey there, nice post on this one, considering the complexity of the topic, You guys did a pretty good job in explaining the know-how of NGINX server installation, firewall setup, and all the other necessary processes most importantly, the LEMP stack, thanks for the short introduction on that one. Would definitely go for part 2 on this one if there is.