logotype

80 Ridge Street Media

Vi är experter på User Experience

Öka intäkterna med effektiva och optimerada webbar och appar med användaren i fokus

Foto från Påarp, Halmstad

Så sätter du upp en snabb server för statiskt innehåll

Publicerad av   i Webbutveckling

Vi på Ridge Street Media gillar snabba webbar. Ett sätt att snabba upp sin webbplats eller webbapplikation är att sätta upp en dedikerad server för statiskt innehåll, det vill säga stilmallar, bilder och script. Det finns en hel del olika servrar att välja mellan och hosting-alternativ, här tänkte jag gå genom hur du sätter upp en nginx-server. Andra alternativ är ju egen-hostad Apache eller annan server eller att hosta i molnet, exempelvis Amazon S3 med Cloudfront.

Det man vill åstadkomma med en server för statisk innehåll är:

  • Snabbare nedladdning av css, javascript och bilder
  • Avlastning av själva webben som inte behöver behandla statiska requests utan bara själva applikations-anropen
  • Möjlighet att cacha statiskt innehåll hårdare
  • Konfigurera en så ren server som möjligt
  • Slippa sätta cookies på statiska filer
  • Skippa access-loggning för statiska filer
  • Enklare att underhålla, statiska filer kan uppdateras och hanteras utan att själva applikationen behöver röras.

Det finns flera vägar att gå, antingen sätta upp en ny subdomän på din webb eller fixa en helt ny domän:

Peka om din nya subdomän

static.exempel.se eller exempel-static.se, i detta exempel kommer jag använda static.exempel.se, men för att exempelvis slippa att cookies skickas med vid varje request så kan exempel-static.se vara att föredra. Har du järnkoll på hur du sätter dina cookies så fungerar givetvis static.exempel.se men vill du vara helt säker (ngn tredjepartsvara du använder kan ju sätta en *.exempel.se-cookie som kommer skickas till alla subdomäner) så kör på en helt unik domän. Setupen är densamma förutom server-namnet.

Se till att din server svarar på static.exempel.se. Det kan göras på följande sätt:

  • Sätt upp en wildcard A-name (*.exempel.se) till din servers IP-nummer
  • Sätt upp en A-name record (static.exempel.se) till din servers IP-nummer
  • Sätt upp en CNAME record (static.exempel.se) till din servers IP-nummer

Jag föreslår att du gör som alternativ 2, då får du bättre koll på vilka subdomäner du verkligen använder, men alla tre funkar.

Konfigurera nginx

Vi förutsätter att du har nginx installerat på din server, läs mer om hur du kommer igång på nginx wiki. I denna artikel så använder vi Ubuntu, pather kan vara annorlunda beroende på OS och din egen setup av konfiguration tex.

$ cd /etc/nginx/sites-available/
$ sudo vi static.exempel.se

Filen ska innehålla följande, uppdatera med rätt path till den mapp du vill använda för dina statiska filer.

server {
  listen 80;
  server_name static.exempel.se;
  root /home/username/www/static.exempel.se/public;

  gzip on;
  gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/json;

  location ~* \.(?:js|css|png|jpg|jpeg|gif|ico)$ {
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    access_log off;
    log_not_found off;
    tcp_nodelay off;
    break;
  }

  location / {
    deny all;
  }
}

Spara (esc + :wq i vi) och se till att nginx känner igen din nya server konfiguration genom att lägga en symbolisk länk i sites-enabled till din nyligen skapade konfiguration och ladda om konfigurationen.

$ sudo ln -s static.exempel.se ../sites-enabled/static.exempel.se
$ sudo /etc/init.d/nginx reload

Du bör nu ha en snabb och ren statisk filserver på static.exempel.se. Servern loggar inte till access-loggen, den har ingen overhead som exempelvis en PHP-binär eller dylikt, den gzippar css och javascript (och lite andra format). Filerna kommer cachas på klienten, expires max sätter Expires headern till 31 December 2037 23:59:59 GMT, vill du ha en annan kan du sätta en relativ tid, ex expires 24h, expires 30d. Läs mer på nginx sida över HttpHeadersModule. Ladda upp dina filer till nya server root och du bör se effekt på exempelvis ditt Yslow-betyg omgående.

Post-installation

Efter du har fått upp din så behöver du hitta ett bra sätt att jobba med din nya server även när du utvecklare lokalt. Jag brukar sätta upp det som så att jag har en public-folder i mitt webprojekt som jag hänvisar relativt till när jag utvecklar lokalt och till min statiska server när sajten konsumeras live. Alla länkar till statiska resurser i dina dokument bör prependas med en variabel som är beroende på miljö, exempelvis:

<link rel="stylesheet" href="{{static_root}}/css/style.css" type="text/css">

Så någonstans i din webbkod behöver du ha config beroende på vilken miljö du är i:

static_root = (environment == LIVE) ? '//static.exempel.se' : ''

Hoppas denna artikel hjälpt dig och att du blivit mer intresserad av hur man snabbar upp sin webb. Tveka inte att kontakta oss på 80 Ridge Street Media om du är intresserad av hur din webb kan bli ännu snabbare, effektivare och erbjuda en bättre användarupplevelse eller om du bara har en fråga om artikeln eller hur du kan bygga snabbare, mer responsiv och användarfokuserad webb, effektiv webb.

Kategorier

Nyckelord

Kommentarer

Vill du lära dig mer om User Experience?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Vill du lära dig mer om User Experience?

Anmäl dig till vår nyhetslista så får du tips direkt till din e-post.

Några av våra kunder


Senaste på bloggen

På vår blogg kan du läsa våra tankar kring User Experience.


80 Ridge Street Media AB

Bättre och mer effektiv webb och appar med fokus på User Experience, Product Management, SEO, Webbutveckling. Knivsta, Uppsala.

Åsgatan 80
74145 Knivsta, Uppsala
Telefon 0735-336699
E-post info@ridgestreet.se
Webb
Facebook ridgestreet
Twitter @80ridgestreet
Google Plus Google+