Remote Server Setup for Web Development

Remote Server Setup for Web Development

I personally use a remote server for my web development. And you should use one too. Now you must be thinking why on earth you would want a remote server when you can code perfectly on your personal computer? Well, I have plenty of reasons. And few of them are listed below.

  • No need of installing tons of software on your personal computer.
  • Less Software means less load on your PC.
  • Just one click and your code will already be uploaded and running on the server.
  • Minimize many issues that may occur later during deployment.
  • You can start coding anywhere, even if you’re not on your computer. Just need an IDE.
  • Possibility of loosing data is minimized as you are storing data on your drive and VPS too.

 

Okay, assuming that I’ve convinced you using a remote server, let’s move on and learn how you can do actually do that. So the first step is to choose a VPS provider. That is totally up to you, but I’m currently using DigitalOcean Droplets. That’s what they call their VPS – Droplet.  Their prices are very moderate and services are great.

Once you register there, creating a droplet is very simple. They ask you your preferences e.g what OS you want on your droplet, droplet location, choosing a host name and all. You just need to click some buttons and your first droplet will be up and running in less than 5 minutes and you will get server login credentials in your order email. (For this article, I’m using ubuntu droplet)

You would also need to buy a domain name and point it to your server ip. I highly recommend you buy domain name from name.com.   I mentioned choosing a host name earlier. Host name is a reachable address assigned to your vps that we can use instead of ip address. You can create a sub domain on the domain you just purchased and point it to yoru server’s IP Address and call it your host name. But that’s not it. You actually need to update host name in vps settings. that I will cover later in this article.

So at the moment you have a domain pointed at your server, root credentials and you are thinking what are you gonna do next? Well,  just follow this article and you will have a pretty great development environment in just few minutes.

Step 1 – Connecting to Remote Server

putty - opening remote connection

If you are a windows user, you can use Putty. And OSx users can use terminal to login remote server. On putty just type the host name or IP Address of your server and click open.

A console type window will open and ask for login name. Just enter root and press enter. A prompt will ask you for the password then. Type password (It won’t display anything while typing password. Just keep typing the password and press enter.

Note: On first time SSH Login, you will be asked to set a new root password for security reasons.

For OSx users, just open a terminal and use the following syntax

A prompt will ask for ssh password and rest is same as Putty in windows.

Step 2 – Creating a new root user

Creating a new root user with a different name and disabling root user is a good practice. This eliminates many server security issues.  Okay once when you are logged in, you can use the adduser command to add a new user to your system. (replace username with your desired name)

A prompt will ask you to enter password for your user. Type a secure password and then confirm it at next prompt.

Next few prompts will ask you for further user details. Just press enter to skip them all. Now the final step is to add user in sudo group.

And you are done.

Step 3 – Disabling Root SSH Login on remote server

In most cases, SSH should be the only service accessible from the outside which potentially allows root login, So this door must be locked by disabling default root user login. To me, disabling root is worth the potential issues. So once you have created a new root user. Logout of root user and then login with new created user. Test if he has all root privileges by executing some sudo command.  For example listing /root directory

If you don’t get any permission error, you are good to go. We can now disable default root login by editing ssh configuration file. To proceed open ssh configuration file in vim

Configuration file will open in vim. Press i to enter insert mode and then paste following line at the end and

to save configuration. Press Esc to exit insert mode and then type :wq to save and restart ssh service

Step 4 – Updating host name

A host name is accessible address assigned to our vps that we can use instead of vps IP address. By default your server have a random hostname assigned by your vps provider.  We can either use that or we can update it to use our own. At domain registration step, you created a sub domain for host name as I mentioned earlier. Right?  In Ubuntu, we need to edit the following 2 files.

For each file, enter insert mode, update file, Press Esc to exit insert mode and then type :wq to save file.

Restart hostname service

Step 5 – Installing a Server Control Panel

Okay configuring all the boring stuff is over and the fun part begins here. As we are using an un-managed server that doesn’t have any control panel installed at the moment. For starters, A control panel is a software that manage all the resources on our Servers. i.e WHM/CPanel.

You can always install WHM control panel but that is gonna cost you 20$/month. I wouldn’t recommend this as this is just your personal vps that you are gonna use for development purpose. Installing expensive control panels are just not worth it when can install Free control panel like Virtualmin that pretty much does everything WHM offers.

Before installing anything, make sure that all your system packages are up to date by executing following commands.

After updating system packages, download virtualmin installation script and make it executable by using following commands

Installing Virtualmin

Follow as the prompt instruct you while installation. This will hardly take a minute. Virtualmin will install all necessary  tools and utilities you need. E.g Apache, PHP, MySQL, firewalls etc

Step- 6 Accessing Virtualmin

On successful installation you can access your virtualmin control panel viapost installation wizard

https;//your-ip:10000   or  https://your-host-name:10000

A login page will appear. Use your ssh credentials to login Virtualmin and a post installation screen will welcome you. You may want to configure Virtualmin settings according to your server resources. Virtualmin will guide you itself according to your VPS.

 

Step 7 – Creating your first Virtual Server

Take virtual server as a website on your server. Each website is act as a virtual server on a server and is completely isolated from other virtual servers.  To create our virtual server. Follow the following steps

Setting up domain name

At this point, we only have one A type dns record on our domain. That we used for our vps hostname. i.e host.domain.com.  We need to setup proper dns record for our domain now. So in your Domain Provider Panel (name.com or  whatever domain registrar) , Go to their DNS management and add an A type record. Call it www and point it to your server. Once DNS record is updated. You can proceed to next step.

Setting up Virtual Server

When DNS records are updated. You can try opening

yourdomain.com

And you would most probably see a 403 error or default Apache test html page. That is because our vps doesn’t know where to redirect you right now. Since your Apache server doesn’t have any configuration saved for your domain yet, therefore it threw forbidden error. But don’t worry. You are just one click away. All you have to do is login your Virtualmin and Click on Create Virtual Server. A form will open and you basic information. Specify your domain, username and password in there and click create. And you are done.

On creating a Virtual server, Virtualmin automatically setup a home directory for your domain, ftp, ssh, MySQL user and Database, Apache virtual-host and all for you.  So you don’t have to setup everything by yourself.  Now you just have to start uploading your files in your public_html directory.

 

Step 7 – Configuring your Personal Computer:

So our virtual server is ready. Everything is set on our remote server.  Now you just need to setup your personal computer. You have SSH credentials for your domain name, your Database Credentials are same as ssh(You can always update them in virtualmin panel.) Now you just need to set up your IDE. Nothing else.

Choosing an IDE is entirely up to you.  But I’ll highly recommend you using Sublime Text3  or PHPStorm as these IDEs have FTP/SFTP modules in them So you don’t have to look for another software to upload your files on your remote server.

Installing SFTP Plugin

On Sublime Text 3 you have to install an additional plugin called sFTP to upload files on remote server. You can follow this installation guide.

Once installed you have to map your project folder to your remote server folder. Before start mapping, you need to know your remote path first. A remote path is a folder on your remote server where project files and folders are going to be uploaded. For instance, if your want your project files on domain root folder, then your remote server path is

Okay now as we know our remote path, we can map our project to this path in sublime text. mapping sublime stfp

 

To map remote path:

  1. Click on Project root folder
  2. Select SFTP/FTP
  3. Click on Map to Remote

 

A configuration file like this will open

 

Just edit remote path, host name, user and password in this file and save it. You also have to remove // before password field as it is commented out by default.

You might also want to set

By enabling this feature, your sftp will automatically upload files when you save them. So that you don’t have to upload manually.

Start Developing..

Finally, you are all set now. Now you can create projects, map them to remote paths and start writing your code.  Your code will directly upload to your server and you can access them using your domains. Therefore, You don’t need to install WAMP/XAMPP on your Computer anymore.  If you need help managing your next project properly then Check this out.

Thank You

Comments are closed.