Nginx Proxying
As Strapi does not handle SSL directly and hosting a Node.js service on the "edge" network is not a secure solution it is recommended that you use some sort of proxy application such as Nginx, Apache, HAProxy, Traefik, or others. Below you will find some sample configurations for Nginx, naturally these configs may not suit all environments and you will likely need to adjust them to fit your needs.
Configuration
The below configuration is based on Nginx virtual hosts, this means that you create configurations for each domain to allow serving multiple domains on the same port such as 80 (HTTP) or 443 (HTTPS). It also uses a central upstream file to store an alias to allow for easier management, load balancing, and failover in the case of clustering multiple Strapi deployments.
Strapi server
In order to take full advantage of a proxied Strapi application, Strapi should be configured so it's aware of the upstream proxy. Like with the below configurations there are 3 matching examples. Additional information can be found in the server configuration and admin configuration documentations.
✏️ NOTE
These examples use the default API Prefix of /api. This can be changed without the need to directly modify the Nginx configuration (see the API prefix documentation).
✋ CAUTION
If the url key is changed in the ./config/admin.js or ./config/server.js files, the admin panel needs to be rebuilt with yarn build or npm run build.
Subdomain Strapi configuration
- Example domain:
api.example.com - Example admin:
api.example.com/admin - Example API:
api.example.com/api - Example uploaded files (local provider):
api.example.com/uploads
Subfolder unified Strapi configuration
- Example domain:
example.com/test - Example admin:
example.com/test/admin - Example API:
example.com/test/api - Example uploaded Files (local provider):
example.com/test/uploads
Subfolder split Strapi configuration
- Example domain:
example.com - Example admin:
example.com/dashboard - Example API:
example.com/api - Example uploaded files (local provider):
example.com/uploads
Nginx Upstream
Upstream blocks are used to map an alias such as strapi to a specific URL such as localhost:1337. While it would be useful to define these in each virtual host file, Nginx currently doesn't support loading these within the virtual host if you have multiple virtual host files. Instead, configure these within the conf.d directory as this is loaded before any virtual host files.
In the following configuration the localhost:1337 is mapped to the Nginx alias strapi:
upstream strapi {
server 127.0.0.1:1337;
}
1
2
3
4
5
6
Nginx Virtual Host
Virtual host files are what store the configuration for a specific app, service, or proxied service. For usage with Strapi this virtual host file is handling HTTPS connections and proxying them to Strapi running locally on the server. This configuration also redirects all HTTP requests to HTTPs using a 301 redirect.
In the below examples you will need to replace your domain and likewise your paths to SSL certificates will need to be changed based on where you place them or, if you are using Let's Encrypt, where your script places them. Please also note that while the path below shows sites-available you will need to symlink the file to sites-enabled in order for Nginx to enable the config.
Below are 3 example Nginx configurations:
- subdomain based such as
api.example.com - subfolder based with both the API and Admin on the same subfolder such as
example.com/test/api and example.com/test/admin - subfolder based with split API and Admin such as
example.com/api and example.com/dashboard
Subdomain
This configuration is using the subdomain that is dedicated to Strapi only. It will redirect normal HTTP traffic over to SSL and proxies all requests (both API and admin) to the Strapi server running on the upstream alias configured above.
- Example domain:
api.example.com - Example admin panel:
api.example.com/admin - Example API:
api.example.com/api - Example uploaded Files (local provider):
api.example.com/uploads
server {
listen 80;
server_name api.example.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name api.example.com;
ssl_certificate /path/to/your/certificate/file;
ssl_certificate_key /path/to/your/certificate/key;
location / {
proxy_pass http://strapi;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
}
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
30
31
32
33
34
35
Subfolder unified
This configuration is using a subfolder dedicated to Strapi only. It will redirect normal HTTP traffic over to SSL and hosts the front-end files on /var/www/html like a normal web server, but proxies all strapi requests on the example.com/test sub-path.
✏️ NOTE
This example configuration is not focused on the front end hosting and should be adjusted to your front-end software requirements.
- Example domain:
example.com/test - Example admin:
example.com/test/admin - Example API:
example.com/test/api - Example uploaded files (local provider):
example.com/test/uploads
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/your/certificate/file;
ssl_certificate_key /path/to/your/certificate/key;
location / {
root /var/www/html;
}
location /test/ {
rewrite ^/test/?(.*)$ /$1 break;
proxy_pass http://strapi;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
}
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
30
31
32
33
34
35
36
37
38
39
40
41
Subfolder split
This configuration is using 2 subfolders dedicated to Strapi. It will redirect normal HTTP traffic over to SSL and hosts the front end files on /var/www/html like a normal web server, but proxies all strapi API requests on the example.com/api sub-path and all admin requests on the example.com/dashboard subpath.
Alternatively for the admin, you can replace the proxy instead with serving the admin build folder directly from Nginx, such centralizing the admin but load balancing the backend APIs. The example for this is not shown, but it would likely be something you would build into your CI/CD platform.
✏️ NOTE
This example configuration is not focused on the front end hosting and should be adjusted to your front-end software requirements.
- Example domain:
example.com - Example admin:
example.com/dashboard - Example API:
example.com/api - Example uploaded files (local provider):
example.com/uploads
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /path/to/your/certificate/file;
ssl_certificate_key /path/to/your/certificate/key;
location / {
root /var/www/html;
}
location / {
proxy_pass http://strapi;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass_request_headers on;
}
}
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
30
31
32
33
34
35
36
37
38
39
40
Redirecting landing page to admin panel
If you do not wish to have the default landing page mounted on / you can create a custom ./public/index.html using the sample code below to automatically redirect to your admin panel.
✋ CAUTION
This sample configuration expects that the admin panel is accessible on /admin. If you used one of the above configurations to change this to /dashboard you will also need to adjust this sample configuration.
Path — ./public/index.html
<html>
<head>
<meta http-equiv="refresh" content="0;URL='/admin'" />
</head>
</html>
1
2
3
4
5
