How to deploy a Meteor app to an Azure VM with MUP on the new Azure interface
While Azure is very powerful, it is not the easiest of interfaces to use. This is especially true when trying to follow old tutorials where many of the matching options are either not present or hidden deep within the new interface.
This was the problem I faced when trying to deploy my Meteor app to an Azure VM. There is an excellent tutorial by Thijs from a while back, but I struggled since the instructions followed an old UI. After a bunch of hours, I finally found all the options and configurations I needed to get my Meteor app working well.
While you can follow Thijs’s tutorial and just skip to 3 to work out the differences in the interfaces, I will be writing the entire flow here for convenience.
Getting started
- Create an account
Create an account or login to your account at azure.microsoft.com and select Azure Portal if you’re prompted to do so.
2. Setup your VM
- Select Virtual Machines on the side bar.
- Click + Add
Now you have to select your OS
- Choose Ubuntu Server (Canonical)
- Select 14.04 LTS.
- Click create. Deployment model should be Resource Manager.
Set basic configurations
- Set a name, username, password (or use SSH option), and resource group for your VM. Odd’s are you want to create a new resource group — name it something you’d recognize and associate with your application.
- Choose a server location that works best for you.
Select instance size
- You can click view all to see more options or change it later in your configuration settings.
- Click Select and then OK on the next two screens.
At this point your VM is starting and you’ll be re-routed to your main dashboard. It takes a few minutes for it to be up and running so go grab a coffee.
Welcome back!
There are two things you need to do now:
- Create a custom DNS name for your app to serve as your ROOT_URL parameter
- Create an endpoint
These are the two main steps that are hidden deep in the interface (as you’ll soon see) which make it difficult to follow other tutorials. This will all be configured from the resource group.
3. Create a custom DNS
Click Virtual Machines on the menu again to navigate to your VM’s. You should see your new VM (mine is called test-name in this example) in the list. Click on it.
- Navigate to resource group by clicking on the name of your resource group.
- Click on <your-vm-name>-ip
- Click configuration
Enter your desired custom DNS subdomain and click save up top. This is totally customizable. In my case, my full DNS is test-app.southcentralus.azure.com. Notice that yours might end differently if you chose a different region.
Keep your full DNS handy as it will serve as your ROOT_URL in your mup.js file. (Note: This is also the link you should point your custom domain (i.e. http://mywebsite.com) to if you are using a domain you bought.)
Congrats! You’re almost done.
4. Setting up an endpoint
Now we have to navigate back to the resource group. This can be done by exiting this screen with the ‘x’ on the top right, by scrolling left, or by navigating to our VM list, selecting the VM, and clicking on the resource group. Whichever you decide, you should end up back here and click on <your-vm-name>-nsg.
Set up your endpoint
- Click on Inbound security rules
- Click + Add
- Give your rule a name and select HTTP as your service (or HTTPS if you are using SSL), then click OK.
Give yourself a pat on the back, you’re done configuring Azure for Meteor!
Navigate back to the main screen for your VM and write down your Public IP address someplace handy.
5. Using MUP to deploy
Install MUP from anywhere in your terminal by typing npm install -g mup and then navigate to your project directory.
5a. Type mup init into your terminal. This will create your mup.js config file which you should open. It’ll look like the picture below.
5b. Customize all the details by the arrows to match your settings in Azure.
— IP Address: the public IP address of your server you just wrote down.
— Username/Pass: the username/pass you set earlier.
— If you used SSH instead of a password, uncomment the pem line, provide the path to your ssh file, and comment out the password line.
— Name: I set this to match the name of my VM (although it doesn’t have to).
— Path: if your mup.js file is in the root of your project, the path will be ‘.’
— PORT: the same port number as the endpoint you set, which should be 80.
— ROOT_URL: should match the custom DNS name you chose.
— MONGO_URL: if you are using a remote MongoDB, make sure to pass the URI to MONGO_URL in the env object.
5c. In your terminal, type mup setup
5d. If everything went well, now you can type the magical words: mup deploy
Congratulations! You’e done.
Extras
Deploying a mobile/cordova version of your app
If you are also going to deploy a mobile version of your app, you need to build it with the--mobile-server option after deploying your app to Azure and it should point to ip:port.
— For example: meteor run <platform>-device --mobile-server 1.2.3.4:80.
You also need to enable cors which is blocked on mobile devices by default. Simply add this code into a server js file (or customize it further if you need to):
if(Meteor.isServer){
Meteor.startup(function () {
WebApp.connectHandlers.use(function (req, res, next) {
res.setHeader('access-control-allow-origin', '*');
return next();
})
})
}For more information on what you can do with MUP, how to use it like a ninja, and also how to troubleshoot issues that might arise, check out Jason McIver’s post at Deploy with mup.
If this helped you out, please hit that little heart down below!
My name is Adam Moisa and I build software for a variety of enterprises, from cloud security monitors to food safety/compliance platforms for large chain restaurants and patient/order management systems for large hospitals.
Some of my work can be found at moisaconsulting.com
