Menu

  • Client: Famous Software
  • Type:  Developer Doc (converted from wiki)
  • Original Publication: May 2019

Thumbnail and Preview Pre-Rendering Service

Background

Famous Studio’s Live Preview enables changes made to web apps to be seen in real-time. As creators choose higher-resolution images for their projects, the render time for updating in Live Preview and loading the final published apps is significantly affected. A rendering service is needed to support high-resolution images without negatively impacting the load time of Famous Web apps. 

System Overview

We are implementing a Node.js version of the Prerender Service, available under MIT licensing on Git Hub. This project uses a headless Chrome browser to download and render web pages in various formats, including PNG and JPEG. We have forked this to our repo for safety: https://git.in.famous.co/oasis/prerender

Quick Start

  1. Spin up a t3.small EC2 instance running Ubuntu on AWS
  2. Install the prerender service: https://github.com/prerender/prerender/ 
  3. Install headless chrome service on the instance
  4. Install PM2 (process manager) and configure it for your domain
  5. Automate running prerender service through pm2
  6. Use the running instance as an endpoint in your code for all images

System Requirements

This installation assumes the installer is comfortable interacting with ssh in a terminal. 

Hardware (VM ):

  • T3.Small AWS EC2 Instance running Ubuntu 18 LTS

Software:

Download and Install prerender

    % wget https://github.com/prerender/prerender/archive/master.zip. 
% unzip master.zip
> master
% mv master prerender-master

Test Run prerender

    % cd prerender-master
% npm i
% node server.js

Install Google Chrome

    % wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - 
% sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
% sudo apt-get install google-chrome-stable
% google-chrome --version

%> Google Chrome 79.0.3945.79

Install pm2

    % cd prerender-master
% npm i
% node server.js
%  wget -qO- https://getpm2.com/install.sh | bash

Create prerender Launch Script

Using VI or your favorite text editor, create a bash shell script to auto launch  pretender using pm2

    % vi start_prerender.sh   
            
                    
        
    #!/bin/bash

cd /home/ubuntu/prerender
export ALLOWED_DOMAINS=famous.co
node server.js

Configure logging for pm2

    % pm2 install pm2-logrotate
% pm2 set pm2-logrotate:compress true
% pm2 set pm2-logrotate:retain 7

Start pm2

    % pm2 start /home/ubuntu/start_prerender.sh

Add prerender to pm2 startup 

    % pm2 startup
(follow the prompts to run the prerender script with pm2 automatically)

Update Database Configuration Table

Each stack needs to have the correct prerender_endpoint added to the configuration database. 

  • stable/rc (Production) PRERENDER_ENDPOINT –> “https://prerender.in.famous.co/render”
  • development (any dev stack) PRERENDER_ENDPOINT –> “https://prerender-dev.in.famous.co/render”

Thumbnail and Preview Rendering Service

Network Setup

  • The DNS for these services are in the in.famous.co Hosted Zone of the AWS Route53 
  • The Load Balancers are:
    • Oregon (us-west2): development with a prerender ruleset.
    • California (us-west1): famous-prod-services with a prerender ruleset.
  • Auto-scaling groups in Oregon and California use corresponding launch templates for prerenders.

Additional Use Cases

Using prerender in Development Environments

The easiest way to use the pretender service in a development environment is using Docker. There are several ways to do this. 

  1. Create the image using studio/prerender-docker/Dockerfile
  2. Download and launch a preconfigured container image from  ECR:  https://us-west-2.console.aws.amazon.com/ecr/repositories/third_party_prerender/?region=us-west-2

Run the prerender docker image locally

    % docker run --name local-prerender -p 3020:3000 --rm -d 730857767296.dkr.ecr.us-west-2.amazonaws.com/imagename:latest

Run prerender locally with docker

  1. Set your AWS credentials in ~/.aws/credentials
  2. Make sure the Database / Endpoint table points to the AppServer using the external IP if your laptop (eg 192.168.x.x or 10.0.x.x) so the prerender container can see it
  3. Log in to ECR

aws ecr get-login-password –region us-west-2 | \

   docker login \

   –username AWS \

   –password-stdin 730857767296.dkr.ecr.us-west-2.amazonaws.com

 

Run the prerender using the script

pushd studio/ext/prerender-service/

npm i

node server.js