Hosting multiple web projects web developer

Deepika Gunda
4 min readNov 15, 2020

Hi there ! I am writing a small post to show how we can create and host multiple projects using Digital Ocean droplet .

What we are trying to achieve

Purchasing domain <<demo>>.com and then be able to host 2 projects on digital ocean droplet and configuring cloudflare and nginx so that we can

  1. access project1 on the main domain , i.e <<demo>>.com
  2. access project2 using subdomain like project2.demo.com

Highlevel view of what I used :

I used porkbun — to purchase domain , cloudflare’s free tier to manage the domains and digital ocean to host the web projects and configure nginx to route the incoming requests to the right websites.

Step 1 : Domain

If you have a domain then you are all set . If not, you can purchase the domain you want from godaddy or porkbun . I have heard good reviews about porkbun and gave it a try and it was perfect. No-nonsense , user-friendly interface to purchase and manage domains. If you want to try it out along with me , just purchase a domain and accept the verification email .

Step 2 : Digital Ocean Droplet

Create a new account and create a new droplet . There are a lot of ways of creating droplets and digital ocean has some fine articles on the same. For this demo , I have used the digital ocean’s 5$ droplet and took the following steps to create it .

  1. First create the SSH key value pair and upload the SSH key to digital ocean.

1.1) Create the SSH key .

1.2) From the Account section, in the Security tab, find the SSH keys section. Click Add SSH Key to open the New SSH key window.Paste your public key into the SSH key content field, give it a name, then click Add SSH Key.

2. Create a Cloud Firewall . These are the firewall rules to be setup to allow ssh access to the new droplet we are going to create .

2.1)From the control panel, click Create in the top right to open the create menu, then click Cloud Firewalls to open the firewall create page.

3. Create a digital ocean droplet from the control panel . One of the options while creating the droplet is providing userdata. This userdata helps in configuring the machine after the OS has been installed and to configure additional users . Provide a non-sudo root user name in the user data script .

3.1 ) In Authentication, select SSH keys, and choose one or more keys. These keys will give you access to the root user, and the user data script will add these keys to the sudo non-root user and disable password authentication.

Once the above droplet is created . We are provided a dynamic IP by digital ocean. The IP can keep changing as we reboot the instance. We need to create a floating IP (these are static IPs) and can then be assigned to our droplet.

At the end of this step , we have our digital ocean droplet all set and configured for the initial set of users. The same commands as above can also be perfomed using doctl .

Step 3: Checking time

Now, connect to the above droplet using ssh.

ssh <<Floating IP>@<<username>>

Step 4 : Cloudflare for DDOS attacks.

I had a terrible experience with digital ocean as my earlier droplet was dropped because of a DDOS attack . I had used cloudflare in the past and it helps against DDOS attacks.

4.1) Sign up for a account in cloudflare and choose the free tier.

4.2) To let cloudflare manage your domain, Add the domain to cloudflare. To do that , you need to replace the nameservers in porkbun UI to the nameservers from cloudflare. This will take bit of a time.

4.3) We need to configure the cloudflare for our subdomain. To do that add a A record to the cloudflare dns. In the name — provide ‘project2’ , in the content provide the floating IP of the droplet.

Step 5: Configure nginx to redirect incoming requests to the right websites.

First step is to create the folders where the websites will be placed. I created folders <<domain>>.com and project2.<<domain>>.com . I gave the same name as the URL that will be used for these projects. Create these folders using sudo .

Run the following commands to configure the main site. 
1) Copy the default config for the main domain
mydomain="<<domain>>.com"sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/$mydomainsudo ln -s /etc/nginx/sites-available/$mydomain /etc/nginx/sites-enabled/$mydomain2) Edit the config file -
vi /etc/nginx/sites-available/$mydomain
The content should look something like thisserver {listen 80;listen [::]:80;root /var/www/project2.<<domain>>.com;index index.html;server_name project2.<<domain>>.com;}Run the following commands to configure the subdomain site.mydomain="<<subdomain>>.com"sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/$mydomainsudo ln -s /etc/nginx/sites-available/$mydomain /etc/nginx/sites-enabled/$mydomain2) Edit the config file -
vi /etc/nginx/sites-available/$mydomain
The content should look something like thisserver {listen 80;listen [::]:80;root /var/www/project2.<<domain>>.com;index index.html;server_name project2.<<domain>>.com;}4. Delete the default available site. sudo rm /etc/nginx/sites-enabled/default5. sudo service nginx restart

Once all these are run . The websites we created should be available from the <<domain>>.com and project2.<<domain>>.com .

--

--

Deepika Gunda

I am a Software Engineer n Tech Enthusiast . You will see me publishing articles on Javascript, NodeJS and misc.