nginx konfigurera statisk sajt: komplett guide

Behöver du en färdig nginx-konfiguration för en statisk sajt, en single page app eller en omvänd proxy? Den här guiden går igenom varje del steg för steg: HTTPS, gzip, cache, säkerhetsrubriker och hastighetsgräns. Slutligen testar du allt med nginx -t.

Nginx är en webbserver som utvecklades av Igor Sysoev och släpptes i sin första version 2004 under BSD-licensen. Den är känd för att hantera många samtidiga anslutningar med låga resurser, vilket gör den till ett bra val även för mindre statiska sajter.

Vad en statisk sajt behöver av nginx

En statisk sajt består av HTML-filer, bilder, CSS och JavaScript som ligger färdiga på servern. Nginx behöver bara ta emot en förfrågan och skicka tillbaka rätt fil. Ingen databas och ingen applikationskörning på servern krävs. Det gör konfigurationen enkel, men det finns ändå några inställningar som gör skillnad mellan en långsam och en snabb sajt.

Du behöver:

En mapp med dina statiska filer (till exempel /var/www/sajt eller /usr/share/nginx/html).
Ett domännamn som pekar mot serverns IP-adress.
Rootåtkomst eller sudo för att redigera nginx-konfigurationsfiler.

Steg 1: Skapa grundkonfigurationen

Skapa en konfigurationsfil för din sajt, till exempel /etc/nginx/sites-available/sajt.conf. Den enklaste versionen ser ut så här:

server {
    listen 80;
    server_name exempel.se www.exempel.se;
    root /var/www/sajt;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

listen 80 lyssnar på vanlig HTTP. server_name är ditt domännamn. root pekar till mappen där dina filer ligger. try_files letar efter den begärda filen och returnerar 404 om den inte finns.

Aktivera sajten genom att skapa en länk till sites-enabled:

sudo ln -s /etc/nginx/sites-available/sajt.conf /etc/nginx/sites-enabled/

Steg 2: Konfigurera för en single page app (SPA)

Kör du ett webbprogram som React, Vue eller Angular är sajten statisk efter byggsteget, men alla sidor hanteras av JavaScript i webbläsaren. Om en besökare laddar om på /om-oss skickar webbläsaren begäran till servern, som inte har någon fil på den sidan.

Lösningen är att skicka alla begäranden till index.html och låta webbapplikationen ta över:

location / {
    try_files $uri $uri/ /index.html;
}

Med /index.html som sista alternativ returnerar nginx alltid applikationens startsida, och routningen sköts i webbläsaren.

Steg 3: Konfigurera som omvänd proxy

Nginx kan också fungera som omvänd proxy: den tar emot förfrågningar från besökare och skickar dem vidare till en annan tjänst på servern, till exempel en Node.js-applikation som körs på port 3000.

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $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_pass anger vart trafiken ska vidarebefordras. De övriga rubrikerna ser till att bakomliggande tjänsten vet vem besökaren är och om anslutningen var säker.

Steg 4: Aktivera HTTPS

HTTPS krypterar trafiken mellan besökaren och servern. Skaffa ett certifikat, till exempel via Let's Encrypt, och peka ut certifikatfilerna i konfigurationen:

server {
    listen 443 ssl;
    server_name exempel.se www.exempel.se;
    root /var/www/sajt;
    index index.html;

    ssl_certificate /etc/letsencrypt/live/exempel.se/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/exempel.se/privkey.pem;

    location / {
        try_files $uri $uri/ =404;
    }
}

Lägg också till en omdirigering från port 80 till 443 så all trafik blir krypterad:

server {
    listen 80;
    server_name exempel.se www.exempel.se;
    return 301 https://$host$request_uri;
}

Steg 5: Lägg till säkerhetsrubriker

Säkerhetsrubriker berättar för webbläsaren hur den ska hantera din sajt. Några av de nyttigaste är:

X-Content-Type-Options: nosniff hindrar webbläsaren från att gissa filformat.
X-Frame-Options: DENY förhindrar att din sajt visas inuti ett iframe på en annan webbplats.
Referrer-Policy: no-referrer-when-downgrade styr vilken information som skickas när besökaren klickar vidare.

Lägg till dem i din server-block:

add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "DENY" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;

Steg 6: Slå på gzip-komprimering

gzip krymper textbaserade filer som HTML, CSS och JavaScript innan de skickas till besökaren. Det gör sajten snabbare, särskilt på långsammare uppkopplingar.

gzip on;
gzip_types text/plain text/css text/xml application/javascript application/json;
gzip_min_length 1000;

gzip_types anger vilka filtyper som ska komprimeras. gzip_min_length ser till att mycket små filer inte komprimeras i onödan.

Steg 7: Ställ in cache för statiska filer

Bilder, CSS och JavaScript ändras sällan. Låt webbläsaren spara dem lokalt så besökaren slipper ladda ner dem vid varje sidvisning:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Här sätts en livslängd på 30 dagar för vanliga bild- och stilmallar. Om du uppdaterar en fil oftare kan du korta ned tiden eller byta filnamn vid varje ändring.

Steg 8: Sätt hastighetsgräns

Hastighetsgräns (rate limiting) skyddar servern mot att för många begäranden kommer från samma adress på kort tid.

Först definierar du gränsen i http-blocket:

limit_req_zone $binary_remote_addr zone=limit:10m rate=10r/s;

Sedan tillämpar du den på den plats som ska skyddas:

location / {
    limit_req zone=limit burst=20 nodelay;
    try_files $uri $uri/ =404;
}

burst=20 tillåter korta toppar på upp till 20 extra begäranden, och nodelay gör att de hanteras direkt istället för att köas.

Steg 9: Testa konfigurationen med nginx -t

Innan du laddar om nginx ska du alltid kontrollera att konfigurationsfilen inte har syntaxfel:

sudo nginx -t

nginx -t läser alla filer och rapporterar om något är fel. Kommer meddelandet syntax is ok och test is successful kan du ladda om:

sudo systemctl reload nginx

Kör aldrig systemctl reload utan att först ha kört nginx -t. Ett fel i konfigurationen kan stoppa hela webbservern.

Vanliga misstag

Glöm inte semikolon i slutet av varje instruktion.
root och index bör sitta i server-blocket, inte bara i location.
Testa alltid med nginx -t innan du laddar om.
Se till att nginx har läsrättighet till mappen med dina filer.

Frågor och svar

Måste jag använda HTTPS?

För en publikt tillgänglig sajt är HTTPS rekommenderat. Det skyddar besökarnas data och påverkar även hur sajten rankas i sökresultat.

Kan jag köra både en statisk sajt och en omvänd proxy på samma domän?

Ja. Använd olika location-block för olika sökvägar, till exempel / för den statiska delen och /api för proxyn.

Vad händer om nginx -t ger fel?

Läs felmeddelandet noga. Det anger oftast exakt vilken fil och vilket radnummer som är felaktigt. Rätta felet och kör nginx -t igen.

Sammanfattning

En färdig nginx-konfiguration för en statisk sajt behöver inte vara komplicerad. Börja med grunderna, lägg till HTTPS och säkerhetsrubriker, slå på gzip och cache, sätt en hastighetsgräns och avsluta alltid med nginx -t innan du laddar om. Då har du en snabb och stabil sajt som är redo för besökare.