Deploying a Custom Site

By default, GraphGrid comes with two websites that are bundled in the nginx Docker image. The GraphGrid dashboard provides users a simple way to access ONgDB data, and is the default site for nginx. A copy of the GraphGrid documentation site is also available at /docs.

The GraphGrid Nginx image can also serve other static sites. To do this, start by creating a directory inside your data directory and under the nginx directory. For the purpose of this tutorial, this directory will be named sites, and will be at data/nginx/sites. Next, go ahead and put your site content into a subfolder of sites. Once again this will only work for static content (i.e html, css, js), so any backend server code will need to be run externally.

Next, you'll need to expose any site subfolders you set up to the nginx docker container. Do this by adding a bind mount in docker-compose.yml. Note the addition of the last line below:

  nginx:
    image: 754290812573.dkr.ecr.us-west-2.amazonaws.com/graphgrid/nginx:1.4.0
    networks:
      - default
    ports:
      - 80:80
      - 443:443
    volumes:
      - data/nginx/config/nginx.conf:/etc/nginx/nginx.conf
      - data/nginx/config/global:/etc/nginx/global
      - data/nginx/config/sites-enabled:/etc/nginx/sites-enabled
      - data/nginx/config/sites-available:/etc/nginx/sites-available
      - data/nginx/certs:/etc/nginx/ssl/certs/
      - data/nginx/sites/demo-site:/var/www/demo-site

Now you'll need to configure nginx to serve this new site. Create your config files inside data/nginx/config/sites-available. For this example we'll name our config file demo-site.conf. Below is an example nginx config that we have found works well with our single-page React web applications.

server {
  listen 80;
  server_name demo-site.graphgrid.com;
  root /var/www/demo-site;
  
  location = / {
    try_files /index.html @catchall;
  }

  location / {
    rewrite ^/(.*)/$ /$1 break;
    try_files $uri.html $uri @catchall;
  }

  location @catchall {
    access_log  off;
    more_set_headers "Pragma: public";
    more_set_headers "Cache-Control: public";
    try_files /index.html =404;
   }
}

Please note that you will need to set the server_name in your nginx configs. When this is configured, any traffic with a matching destination hostname will be routed to the custom site, while all other traffic will go to the default GraphGrid dashboard. It is possible to run multiple sites inside the same nginx container, but you'll need to use distinct hostnames.

To activate this new nginx config, create a symbolic link to sites-enabled. To do this, cd into data/nginx/config/sites-enabled and run ln -s ../sites-available/demo-site.conf demo-site.conf

From here you should be able to restart the nginx container and access your custom site. If you have any issues loading it, try modifying the file/folder permissions under the sites directory to be more permissive using chmod.

If you're looking to test the custom site locally, and are on a unix machine, add a line to /etc/hosts with a fake domain name pointing to 127.0.0.1. You may have to restart your local DNS resolver for the change to take effect. Another option is to use curl and manually set the host header like this:

curl -H "Host: demo-site.graphgrid.com" http://localhost/