26

The site configuration for my meteor app has directives which look like the following:

server {
  listen 443;
  server_name XXX;

  ssl on;
  ssl_certificate XXX;
  ssl_certificate_key XXX;

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header X-Real-IP $remote_addr;  # http://wiki.nginx.org/HttpProxyModule
    proxy_http_version 1.1;  # recommended for keep-alive connections per http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }
}

I feel like I should be telling nginx to serve contents of static_cacheable and setting the expires header to max. How exactly do I go about doing that? Are there other things I should add in here?

0

2 Answers 2

26

Although I'm not an nginx expert, I feel like I have a much better understanding of how to do this now. As I figure out more I'll update this answer.

One possible solution to my original question is this:

location ~* "^/[a-z0-9]{40}\.(css|js)$" {
  root /home/ubuntu/app/bundle/programs/web.browser;
  access_log off;
  expires max;
}

Which says: Any URL for this site containing a slash followed by 40 alphanumeric characters + .js or .css, can be found in the web.browser directory. Serve these files statically, don't write them to the access log, and tell the client that they can be cached forever.

Because the the main css and js files are uniquely named after each bundle operation, this should be safe to do.

I'll maintain a full version of this example here. It's also worth noting that I'm using a recent build of nginx which supports WebSockets as talked about here.

Finally, don't forget to fully enable gzip in your nginx config. My gzip section looks like:

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

After doing all that, I was able to get a decent score on pagespeed.

update 9/17/2014:

Updated the paths for meteor 0.9.2.1

10
  • 1
    If you allow caching of all css/js files, will the user's copy still be updated (like a hot code reload) when u make a change to the Meteor files in the client directory?
    – Nyxynyx
    Dec 16, 2013 at 0:58
  • 1
    Yes. Every time you bundle your app it will create a new pair of css and js files with unique names. Dec 16, 2013 at 1:02
  • How do you handle keeping websocket connections alive when deploying with live users on the site? I get 502 Bad Gateway errors and current users have to reload the app.
    – deepwell
    Dec 16, 2013 at 1:52
  • 1
    @AndrewMao Nice - glad you got it working. I didn't add the gzip settings to the gist because they really belong in a different section of your main nginx.conf rather than in a site config. I think the real solution here if for me to blog about how I do this in production. When I do that I'll add a link from the answer. Jan 30, 2014 at 18:40
  • 1
    I would suggest adding jpg or png resources as well? if they are served from the same instance. Mar 17, 2014 at 21:05
9

I made some updates and improvements to the other answer. Specifically,

  • the X-Forwarded-For header needs to be set for Meteor's new IP address detection that is done in this file. It does not appear that X-Real-IP is used.
  • the /nginx_status path can be used to monitor the amount of traffic coming through the proxy.

I've fiddled with this a bit and come up with the following configuration. Edit your fields appropriately.

First, compression, which speeds up load time considerably. Note that the gzip_buffers directive is usually automatically computed by default using the system's memory page size:

gzip on;                                                                                                                                                  
gzip_disable "msie6";                                                                                                                                     
gzip_min_length 1100;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

The server config itself:

server {
    listen 443 ssl;
    server_name my.domain.com;

    ssl on;
    ssl_certificate /etc/ssl/nginx/certificate.crt;
    ssl_certificate_key /etc/ssl/nginx/certificate.key;

    access_log /var/log/nginx/localhost.ssl_access_log main;
    error_log /var/log/nginx/localhost.ssl_error_log info;

    # Forward to meteor server                                                                                                                        
    location / {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # copied from http://blog.kovyrin.net/2006/04/29/monitoring-nginx-with-rrdtool/
    location /nginx_status {
         stub_status on;
         access_log off;
         allow 192.168.0.0/24;
         deny all;
    }
}

Finally, as Dan mentioned, you will need to set the HTTP_FORWARDED_COUNT environment variable in Meteor to properly pick up the client IPs from behind the reverse proxy.

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.