Share localhost with SSH & Apache

There’s been a lot of services released lately that aim to assist developers share their local development environments over the internet. localtunnel, showoff.io and pagekite come to mind, just to name a few. However, you can roll your own forwarding service if you have SSH access to a server running Apache fairly easily.

The Big Picture

First, setup a webserver to listen for connections to demo.example.com. When a user connects to the webserver, it will attempt to proxy their request to port 1337 (demo.example.com port 1337).

Second, a reverse proxy initiated with SSH on your localhost creates a connection to demo.example.com, and then has all traffic on demo.example.com port 1337 forwarded to localhost port 80.

User => demo.example.com:80 <=> demo.example.com:1337 <=> localhost:80

Requirements

Server

  • Apache Web Server
  • Apache mod_proxy module
  • OpenSSH

Client

  • Local web application
  • SSH client
  • SSH public/private keys to login to the remote server

Server Setup (Ubuntu)

You should be able to login to your server over SSH using public/private key authentication. How to do that is out of scope for this post, however there are plenty of guides available online that explain in detail how to do this.

Apache: Enable mod_proxy

$ sudo a2enmod proxy_http

Apache: Configure VirtualHost

Setup Apache to use a VirtualHost for URL you want to use for sharing your work:

<VirtualHost *:80>
ServerName “demo.example.com”
ProxyPass / http://127.0.0.1:1337/
ProxyPassReverse / http://127.0.0.1:1337/
</VirtualHost>

The ServerName Directive tells Apache to listen for client requests for demo.example.com. ProxyPass and ProxyPassReverse configure Apache to forward all requests to the local port 1337.

Apache: Restart to load VHost

$ sudo apachectl restart

Localhost Setup

Make sure you’re running a local web application

This should be pretty obvious :) It doesn’t matter what port it’s running, you can configure that when you start the SSH reverse proxy.

Create an SSH Reverse Proxy

To actually enable the connection form your public web server to your localhost, you have to create a reverse proxy using SSH. The reverse proxy will create a connection from your localhost to the remote server (demo.example.com), then have all traffic from a designated remote port forwarded to a local port.

$ ssh -fNR 1337:localhost:80 demo.example.com

  • -f puts ssh into the background. If you want to be able to easily kill the Proxy later, omit the -f and use ctrl + c.
  • -N disables all output keeping things clean. If you omit this, you’ll see SSH connect to your remote server.
  • -R 1337:localhost:80 Tells SSH to create a reverse proxy and that all traffic on the remote port 1337 should be forwarded to localhost’s port 80.
  • demo.example.com is the remote server you want SSH to connect to.

You may need to change your localhost port depending on what port your local environment is running on. For example: if you’re developing a rails application using the builtin webserver, you might need to use port 3000 instead of port 80.

You should now be able to hit demo.example.com in your browser, and see your application load.

2010 Development Toolbox

Here is a quick run down of the tools and applications I user pretty much everyday. As of this time I’m doing a lot of frontend work as well as some backend PHP development.

Programming

  • Browsers
    • Safari – I use it for all my general development
    • Firefox – Mostly great for tuning CSS and pixel pushing
    • Google Chrome – ¬†Great for debugging and performance testing
  • Textmate – texteditor
    • open in Textmate – utility to put in your Finder that lets you quickly open files in Textmate
    • project plugin – better project handling for Textmate
  • Versions – Very clean SVN client
  • Fluid – great to take web pages you always access and make them their own app.
    • JIRA – This is just a great setup, this way JIRA is always a few keystrokes away
    • jQuery API – quick and easy access to the jQuery API
  • iTerm – better replacement for the built in mac terminal
    • vim – best TE in the world (next to Textmate?)
  • Sequel Pro – GUI for MySQL
  • Charles Web Proxy – for intercepting and viewing http data, also great for testing slow connections to a certain domain
  • Reggy – Regular expression sandbox, great for finding out what the hell is going on with a regular expression
  • HTTP Client – Great app that let’s you play with HTTP, great for testing out backend services
  • VMWare Fusion – X-browser testing
  • Adobe Photoshop CS5

Utilities

  • Caffeine – awesome little app to keep your computer from going to sleep or launch the screensaver. You don’t know how much you love caffeine until you actually use it a few times
  • Divvy – awesome window management app that helps you resize windows on the fly using hotkeys or your mouse.
  • Droplr – terrific app for taking screenshots and sharing them with others
  • Spot Color – great little color picker
  • VirtualHostX – app to manage all the virtualhosts installed on your system’s apache instance
  • iStat Menus – bunch of monitors that sit in your menubar and report system status to you. Great for keeping an eye on memory and processor usage

Misc

  • Evernote – Great for taking notes throughout the day and also syncs back up with your iphone or mobile device
  • Mail.app
  • Pandorajam – If you listen to pandora, do your self a favor and download this badass app right now. Simply amazing.
  • Grooveshark – think of iTunes, but has any song you can think of. Completely web based.
  • Adium – IM client
  • Colloquy – IRC client
  • Echofon – Twitter client
  • Skim – PDF Reader, much better than preview or acrobat reader

Interviewing Your Future Employer

Going through an interview can be a rather daunting experience, however this is a good time for a candidate to find out more in depth information about the company, it’s culture, processes and many other aspects that may not be immediately realized. This list should serve as a starting ground for job hunters looking to build a dialogue during their interview process.

I would first read through this list and break these up into categories that work for you. Save certain questions for round two or three, or for a more technical person, or for someone in more of a management role. It may be useful to ask some questions only once, or some towards each new intervewer you chat with to get a feel for how each role feels about a certain topic. Also, if you are fortunate to get the name of the person interviewing you, do your research on that person to build up some more topics to talk about during the interview. Finally, do your research on the company as well as demo their products/servces if you can and read through some source code they may have released to the Open Source world (you never know what sort of funny comments you might find that could spark a conversation).

Job Opening

  • What brought on the need for this opening, client? project?
  • What would be my title?
  • Who would I report to?
  • Were do I fit in on the company org chart?

Working Conditions

  • What kind of team will I be on?
  • How many people are on the team?
  • What skill sets the team members possess?
  • Take me through the day in the life of a developer.
  • How long is an average work day for a person in this position?
  • How often does the team have late night sessions to meet deadlines?
  • What sort of flexibility is allowed for work hours?
  • Can I work from home occasionally?
  • What sort of hardware is provided to developers? Multiple Monitors?
  • What is the usual expected productivity rate or utilization rate of your team?

Process

  • How are teams organized?
  • Explain the relationship between developers, creatives and account managers and how they work together on a project.
  • How is employee performance measured? By Whom?
  • Explain the lifecycle of a project from beginning to end and how each team is involved in each phase.
  • How does your team learn from there previous mistakes?
  • How does your team manage the tradeoff pyramid? Which point does the team continually find compromising on?
  • How are employees expected to track time? Using what software? To what accuracy?
  • How does the company share knowledge? (Is there a company wiki? Basecamp?)

Company

  • What are some difficulties the company is facing right now? What’s the strategy in place to overcome those issues?
  • What’s the toughest technical issue you are facing right now? Non-technical issue?
  • What is the companies policy on intellectual property?
  • What is the companies turnover rate?

Culture

  • Employee Age range?
  • What sort of extra curricular activities does the company provide? Are these organized by employees?
  • How often do departments get to mingle and meet one another?
  • What’s the dress code?
  • Who was the last person you met for the first time at [COMPANY HERE]?
  • Where do most people live in the area?
  • Do people carpool?

Growth

  • What’s the opportunity for growth within the company?
  • Where can I go? What can I do?
  • Does the company provide allowances for employee education? Conferences? Training? Workshops?
  • What is the company policy on being transferred to other offices?
  • Is there a mentorship program or something similar?

Development & Best Practices

  • Code Repositories? Which one?
  • How do you handle staging/development sites?
  • How do you handle bug reporting and testing? Is there a QA team?
  • How is a project schedule managed and maintained?
  • How is the office noise level?
  • How do people communicate around the office? Instant Messenger? Email? Twitter?
  • Is there a library available for developers?
  • Are there code reviews?
  • What Project Management tools are being used?
  • Does the team contribute code to the open source community?

Interviewer Specific

  • Should a developer be a jack of all trades or a deep specialist?
  • Why do you like working here? What are your favorite parts about your job? Least favorite parts?
  • How long have you worked at [COMPANY HERE]
  • What’s something that you or your team has done that you are really proud of?
  • Where do you see me in 6 months?
  • What are you looking for in an ideal candidate?

Fun

  • Is your coffee filtered or unfiltered? Free?

I have assembled this list through various resources on the internet, Stack Overflow’s – A Standard Set of Questions to ask and Interview as well as the infamous Joel Test by Joel Spolsky, friends and family. Thanks to all!

Please feel free to leave any additional questions or idea to the comments and I will try and add them to the list!