August 25, 2016
In our last video we answered the question should I build on Drupal 7 or Drupal 8? We mentioned that we have a site currently in production on both Drupal 7 and Drupal 8. To the end-user browsing the site, it is completely transparent, they have no idea they are hitting two different Drupal instances. Today, we are going to show you how to pull this off.
You guys asked so here we are. In my last video I answered the question, “Should I build on Drupal 7 or Drupal 8?” I mentioned in that video that we have a site currently in production on both Drupal 7 and Drupal 8.” To the end user browsing the site it’s completely transparent, they have no idea they’re hitting two different Drupal instances. Today I’m going to show you how we’re pulling this off.
How are we doing this? The quick answer is we’ve got an Nginx server sitting in front our two Drupal sites, proxying traffic based on URL. It’s either Drupal 7 or Drupal 8. In a nutshell, basically what is happening is the user makes a request to your website URL which is pointed at our proxy server, the Nginx server, which has a list of rules of specific paths to push to Drupal 8 or otherwise push to Drupal 7. Let me show you a quick and dirty demo so you can see this in action. We’re going to get in the weeds so put your Dev Ops hat on. I’m going to do this all on my local host using docker and a nice little utility called ngrok which is used basically to tunnel back into my local system from the public internet. This is not how we’re doing it in production but the idea is the same.
All right, so I’m going to get two environments set up here. I’m going to use Drush Quick Drupal to get my Drupal 8 environment set up. Basically, this will get me a running version of Drupal 8.1.7 on my local machine. While that’s doing that over here I’m going to get our activelamp.com site set up locally as well. This is a Jekyll site and so basically all we have to do is type in grant serve to see that site locally. All right, so there’s our Active Lamp website running on our local host port 8080 and our Drupal 8 site is coming up and so now we have our Drupal 8 site hosting on port 888. What’s nice about Drush Quick Drupal if you’re not familiar with it is it actually builds you a Drupal 8 site, downloads all the dependencies, and then launches this browser as you can see here on port 8888. It’s using the internal php server to actually serve this.
We’re going to go ahead and log in. Don’t need to set a password because we’re not really going to be using this site. For demonstration purposes I’m going to set up a piece of content here and I’m going to call this the what we do page. I’m going to give it a URL path of what we do. If I save and publish this we’ll see the what we do page on our Drupal 8 installation. Basically, what we’re going to do is we’re going to set it up so that when you click on what we do on our Drupal 7 site it’ll actually route to the Drupal 8 site with an Nginx proxy that we talked about.
If you haven’t used Docker there’s a utility called Docker Machine that basically will spit up a machine for you to run Docker on since you can’t run it natively on the MAC yet. You can just type in Docker Machine Create, I’m going to do this in Virtual Box, and this is going to be our defaults machine. Okay, so our Virtual Box Docker Machine is set up and so now it asks us to run this command Docker Machine environment default and so we’re going to go ahead and run that command. That basically exported some environment variables and then it says to run this eval code right here and so we’re going to run that in our prompt as well. Now we should be able to use the Docker command and see what is on that Docker Machine, and so we have no containers currently running on that Docker Machine.
Okay, so we’re going to create our Nginx proxy now and let me just go to where I have it pre-configured. All right, so let’s look at what this pre-configured proxy looks like. In this directory I have a Docker file and that Docker file basically reads from the Nginx image that’s on Docker hub and then we have one step in there which is basically copying this activelamp.conf file into the conf.d directory for Nginx so that it gets read when Nginx has started. Let’s look at the activelamp.conf file.
Basically, I have some paths set up here. Basically, what we’re saying is when you hit the root path we’re going to go to some URL, when we hit the what we do path we’re going to go to some URL, basically pass to this URL. Then I have a couple Drupal paths, the core and the sites path. Basically anything that hits core or sites or anything underneath that will go to some URL. The way we’re going to actually do this is we’re going to set up this Docker file to … Or this configuration file to point at these local installations that I have set up. This is where ngrok comes into play. You can basically Google ngrok and install that. Go here, download ngrok, and then you’ll be able to have tunnels coming back to your local host.
I’m going to show you guys how to actually use this once you have this installed. I’m going to go back to my home directory and type in ngrok http, and I want … This is running on port 8080 and I want to map port 8080 back to my machine. This is basically updating or creating a tunnel out on the internet so that if I hit this URL right here it’ll hit port 8080 on my local host. Then the Drupal 8 site that we want is on port 8888 and so let’s open up another tab, ngrok8888. Okay, so now I have two URLs exposed to the internet that are coming back to my local machine. This is my Drupal 7 URL. In this case it’s actually going to be the Jekyll URL because we would be migrating from Jekyll up to Drupal 8. We’ll come back into here and we’re going to say anything … Or everything is going to come to this URL, but the what we do page we want to actually put on Drupal 8.
Let’s come over here to our Drupal 8 URL, which is the other tunnel that we opened up, and grab that. Then we also need to redirect the core in the sites directory to Drupal 8. Those paths don’t exist in the Jekyll site so we’re safe by just directing all traffic underneath these paths, so the Drupal 8 site so let’s go ahead and save this. All right, now let’s go ahead and start up our proxy. If we come back here to our D8 proxy we have a command to actually build this image, and that is Docker build. We’re going to call this thid D8 proxy under My name space and the Docker file is in this directory. This is going through the built process pulling down the Nginx image and then it’s going to be to add in our one little command and create an image for us that we can then use and run with Docker.
All right, so now our Docker image is created, we’re going to actually run this. The way you do that is Dockerrun. We’re going to expose a port to our machine and that’s going to be 8787 and we’re going to map that to port 80 within the Docker container which is what Nginx is listening on. The image that we want to run is the image that we just built which is called Tomfriedhof/d8proxy. All right, so now our image is running, let’s see if this actually works.
If we hit … Oh, one thing is this is running in a Docker Machine, we need to know what the Docker Machine IP address is. I’m going to open up another tab here and I’m going to type in Docker Machine IP. The default Docker Machine is running on this IP address so if I hit that IP address on port 8787 which is what we exposed we can see that it is actually hitting our local installation, all of the styles aren’t there. Then if I hit the what we do you can see that what we do is hitting the Drupal 8 path that we specified in our proxy so that’s the proxy in action.
The reason why we had to use ngrok here is we couldn’t access these containers directly from within our Docker container and so this is actually going out through the ngrok service and coming back into our local machine. Typically what you would do is the IP address of the proxy is what you would set up in DNS. We’re going to mimic that right now by basically creating a host record for this IP address. Let’s go back to our terminal, open up a new window, get into our hosts file, and we’re going to say this IP address is activelamp.com. Let’s save that. Now if I hit activelamp.com, let’s just go to the root path, we’ll see that we’re hitting our web server internally that’s running on this tab right here. And then if we were to click on what we do our Nginx proxy should forward us to Drupal 8. There you can see that the what we do path that we clicked on in the menu does in fact go to the Drupal 8 site.
Let’s go back to the home page. Basically, as you build out your site on Drupal 8 you can update these paths and just point different paths pointing to Drupal 8 so that you can update incrementally. That’s how you do it. An Nginx proxy server sitting in front of two installations directing traffic. In production we actually host the proxy in AWS managed by Ansible. I hope you found this information helpful, talk to you next time.
We update the channel regularly with the latest client work and special event videos.