Howto setup a QNAP NAS with VPN and develop using PhpStorm

A quick post on how easy it is to setup a local QNAP NAS with a VPN, connect to it from a remote location and work on project (optionally using PhpStorm).

In this setup we have:

  • a QNAP with all our development projects stored on it
  • a Laptop (running Linux Mint) with PhpStorm installed for web development
  • a Router that supports PPTP passthrough (most good ones do)

Here is a quick list of what to do to get up and running:

  1. Connect your laptop to the local network like normal. Make sure the laptop can access the QNAP NAS normally.
    Here is an example of my setup on my linux laptop.
    In the /etc/fstab file I define the QNAP mount point:

    //qnap/data /qnap cifs noauto,user,username=yourusername,password=yourpassword,_netdev,uid=1000,gid=1000 0 0

    and I define the “qnap” hostname in /etc/hosts to point to my QNAP ip address, like this:

    10.1.1.100 qnap

    so from Linux I can run “ping qnap” and it will ping 10.1.1.100 successfully. I can also run “mount /qnap” and it will mount my qnap folder locally.

  2. Login to QNAP administration and enable the VPN service. Go to Applications > VPN Service and enable “PPTP VPN Server”. Leave OpenVPN disabled. Click apply.
  3. Go to “VPN Client Management” and enable one of the existing QNAP users access to the PPTP VPN. I enabled the same user as in the mount command above (yourusername).
  4. Login to your local router web configuration interface and enable PPTP passthrough (Look under Networking > VPN or Security > VPN or Advanced > VPN for this option).
  5. Also setup port forwarding on your router through to the QNAP. Forward port number 1723 through to your local QNAP ip address (eg: 10.1.1.100).
  6. Now find the IP address of your current local internet connection ( go to whatismyip.org ) and write this down (optional – setup DynDNS or similar so you don’t have to remember an IP address).
  7. Unmount the qnap drive from the Linux laptop (unmount /qnap) and disconnect your laptop from the local network.
  8. Plug your mobile phone into your laptop and turn on USB Tethering. This way your laptop will be connected to the internet via your phone and will have no access to the local QNAP server (yet!).
  9. In Linux, setup the VPN client to connect to our QNAP server. Right click the little “network connection” icon in the status bar (available in Linux Mint/Ubuntu/etc..) and choose “Edit Connections”. Select the VPN tab and click “Add”.
    Choose PPTP, type in a Connection Name, untick the connect automatically option. In Gateway type in your internet IP Address (step 6) or DynDNS address. Type in the username from step 3 and choose “always ask” for password.
    Choose the IPv4 Settings tab, set Method to Automatic(VPN) and then click “Routes” and choose “Use this connection only for resources on its network”
  10. Save the VPN connection and then connect!
  11. Open a console on the laptop and try to ping your QNAP over the VPN while connected to the internet from your phone: “ping 10.0.0.2” if you see success then all is good!
  12. Open the /etc/fstab file and comment out the old qnap entry and replace it with a new qnap entry:
    #10.1.1.100 qnap
    10.0.0.2 qnap
  13. Now you can try “ping qnap” and it should still work, and then finally you can “mount /qnap” and it will mount your QNAP NAS over a VPN to your linux laptop 🙂
  14. Before disconnecting the VPN make sure you unmount the QNAP folder (unmount /qnap) and then change the qnap entry in /etc/hosts back to normal by swapping the comments around:
    10.1.1.100 qnap #qnap locally
    #10.0.0.2 qnap #qnap over VPN

Working over a VPN with PhpStorm

  1. Mount your QNAP NAS over the VPN as per above.
  2. Open PhpStorm
  3. Choose File > New Project from Existing Files
  4. Choose “Web server is on a remote host, files are accessible via network share or mounted drive”
  5. Choose a project name and a local storage directory (your project will be copied over the VPN to this local directory)
  6. Choose “Add new remote server”
  7. Enter a server name (eg: QNAP) and choose the path to the main projects folder on your NAS (eg: /data/projects/) don’t use the directory of the project you wish to open, use the main directory that holds all your projects.
  8. Highlight your project directory from the listing and click “Project Root”
  9. You can ignore web path if you wish, just click finish.
  10. Once the project copies the files over the VPN and opens up go to Tools > Deployment and tick the “Automatic Upload” option.
  11. Open a project file, make a change, save the file. The changed file should now be automatically pushed back over the VPN to your QNAP NAS in the background.
  12. Go to Tools > Deployment > Configuration. Setup another FTP/SFTP server for your live deployment or somewhere else where you wish to upload files for testing. Don’t click “Use this server as default” for this one, leave the other folder mapping as default for automatic uploads to continue to work.
  13. Open a file and make some changes, save the changes, the changes should go back over the VPN to the QNAP NAS automatically. To upload your changes use the keyboard shortcode Ctrl+Alt+U and select (using a number or the mouse) the non-default server to upload. Your file will now be uploaded via FTP to your designated location.
  14. Now when you get back to local network and you are no longer over the VPN you can continue to work in exactly the same way. So your development workflow will be identical no matter if you are on the local network or via a VPN.

 

Leave a Reply

Your email address will not be published. Required fields are marked *