How can I host a separate landing/web page alongside my meteor app on the same droplet?

October 27, 2016 145 views
Applications DigitalOcean DNS MongoDB Node.js VPN

Hello, I am very new to digital ocean and hosting as a whole and would like some advice here.

I have so far successfully deployed a meteor app to my droplet and assigned a domain name (app.example.com) and that works perfectly. However I would like to know how, if possible, I can host a landing/web page for my app on the same droplet that can be accessed from example.com. (The idea is to have a simple web page that links visitors to the app store to download the app, but they can also proceed to app.example.com for the web version.)

I know I might have to use something like Apache and do a virtual host etc. but the real question is; how do I assign an A Record to my domain that links to the landing page (example.com) and assign a different A Record that links to the app (app.example.com)?

Since droplets only have a single IP, is that at all possible? Or is there another way to go about doing this.

Thanks in advance to anyone who might be of help!

1 Answer
xMudrii October 27, 2016
Accepted Answer

Hello @Axeslashed.

This is possible and it should not be hard to setup.
First make sure that your app doesn't run on port 80 (or 443). We will use that port for web server and I will help you setup reverse proxy for app.
I recommend to change app port to something higher than 1024. Ports less than 1024 are required to be run as root because of system security...
In this example, I will use most common one - 8080.

If you use DigitalOcean DNS management for records, first make sure you added domain as example.com and not app.example.com.
Open settings for domain. You should have at least following records:
A record - Name: @ - Value: Your Droplet IP address
CNAME record - Name app - Hostname: @
And leave NS records as they're.

Now when you ping example.com and app.example.com both should point to Droplet IP. Please note that you could have to wait before DNS record refreshes, so it maybe it'll not work right after change. You can try refreshing DNS cache on local machine (or I had experience when restarting internet modem helped, but that depends on ISP).

Login to Droplet via SSH.
You have to choose now web server. You can go with Apache or Nginx. Personally, if you don't know what to go on with and don't have experience with any of it, I would recommend Nginx. Personally, I think Nginx is easier to configure for setup you need (landing page and reverse proxy for meteor app) than Apache, but that's only personal opinion.

In case you want to go with Apache, you can follow First step of LAMP tutorial.
Yet for Nginx, go with first step of LEMP tutorial.

When you setup that, you are ready to make Virtual Hosts (or Server Blocks for Nginx).
Apache - Tutorial for Virtual Hosts.
Nginx - Tutorial for Server Blocks.

What you want is to setup one block for example.com and one for app.example.com.
For first, example.com you want to follow tutorial as it is, to make it serve some content.
For second, app.example.com you want to make ProxyPass from http://localhost:meteor-app-port. There is tutorial based on Nginx and Node.js that should help you. It's How To Set Up a Node.js Application for Production on Ubuntu 16.04 and you need Set Up Nginx as a Reverse Proxy Server.

When you setup it, make sure you restart Apache or Nginx and try to see does it works.
If you get into any problem or have questions, ask them, I or somebody else will try to answer it. :)

A "LAMP" stack is a group of open source software that is typically installed together to enable a server to host dynamic websites and web apps. This term is actually an acronym which represents the Linux operating system, with the Apache web server. The site data is...
  • This worked like an absolute charm! Thank you @xMudrii for explaining the steps and linking to the tutorials. Following the directions I was able to create two server blocks using NGINX; #1 (example.com) was my default server and currently links to my html5 landing page while #2 (app.example.com) was set up as a Reverse Proxy listening to the meteor app port and set up to ProxyPass from http://localhost:meteor-app-port. It now links to my app flawlessly.

    I could have never done it without your help. Thanks once again!

Have another answer? Share your knowledge.