Stop Using IP Addresses for Local Vagrant and VirtualBox Setup

Why IP addresses break cookies and headers in local dev, and how to set up custom domain names using Vagrant and Ansible.

When you build apps locally with Vagrant or VirtualBox, it is easy to just open your app using an IP address like http://192.168.98.101/app.

It works at first. But then your app suddenly logs you out, drops your session, or stops saving cookies.

Using IP addresses instead of real domain names causes weird bugs that waste hours of your time. Here is why you should use custom hostnames, and how to set them up easily using Vagrant and Ansible.

Why IP Addresses Break Your Web Apps

1. Web Browsers and Cookies

Browsers have strict rules about how they save cookies. By web standards, cookies often need a proper domain name to work correctly.

httpCopy
# THIS MIGHT BE REJECTED OR IGNORED
Set-Cookie: session_id=xyz123; Domain=192.168.98.101; Path=/; HttpOnly
 
# THIS WORKS AS EXPECTED
Set-Cookie: session_id=xyz123; Domain=.my-app.local; Path=/; HttpOnly
 

If your backend sets domain cookies or uses tools like OAuth, accessing your app through 192.168.98.101 means the browser might refuse to save or send your login session back.

2. Multi-Site Apps and Web Servers

If your virtual machine runs a web server like Nginx or Apache with multiple sites (like app.my-app.local and api.my-app.local), the server checks the domain name in the request header to figure out which site to open.

If you type http://192.168.98.101/ into your browser, the web server does not know which app you want, so it just shows the default fallback page.

What is vagrant-hostmanager and How Does It Work?

Usually, when you want a custom local domain name, you have to open a text editor and manually edit the /etc/hosts file (or C:\Windows\System32\drivers\etc\hosts on Windows) on your computer.

The vagrant-hostmanager plugin automates this completely.

When you run your virtual machine, the plugin does two main jobs automatically:

1. Updates your computer (Host Machine): It automatically adds an entry like 192.168.98.101 my-app.local to your main computer's hosts file. This lets your web browser find the virtual machine using http://my-app.local.
2. Updates the Virtual Machine (Guest VM): It logs into the VM and adds the same entry to the VM's internal /etc/hosts file. This lets scripts, background jobs, or tools inside the VM connect to http://my-app.local as well.

When you delete or stop the VM later, the plugin cleans up those lines from your hosts file so your computer stays neat and tidy.

Step 1: Set Up Domain Names in Your Vagrantfile

To use the plugin, first install it on your computer:

bashCopy
vagrant plugin install vagrant-hostmanager
 

Next, update your Vagrantfile like this:

rubyCopy
Vagrant.configure("2") do |config|
 
  # Turn on hostmanager for both your host machine and guest VM
  config.hostmanager.enabled = true
  config.hostmanager.manage_guest = true
  config.hostmanager.manage_host = true
 
  config.vm.define "app-server" do |srv|
    srv.vm.box = "cloud-image/debian-13"
    srv.vm.network :private_network, ip: "192.168.98.101"
 
    # Set your custom local domain and extra names
    srv.vm.hostname = "my-app.local"
    srv.hostmanager.aliases = %w(www.my-app.local api.my-app.local)
 
    srv.vm.provider :virtualbox do |vb|
      vb.name = "my-app-vm"
      vb.memory = 4096
      vb.cpus = 2
    end
  end
end
 

To run the plugin and update your host files without restarting your virtual machine, run:

bashCopy
vagrant hostmanager
 

Step 2: Add Domain Names to Your Ansible Playbook

If you use Ansible to configure your VM, it is good practice to explicitly ensure these hostnames exist inside the VM's /etc/hosts file. This guarantees that internal HTTP tests or API checks inside Ansible won't fail during deployment.

Add this step near the beginning of your Ansible playbook:

yamlCopy
- name: Add custom domain names to guest hosts file
  ansible.builtin.lineinfile:
    path: /etc/hosts
    line: "127.0.0.1 my-app.local www.my-app.local api.my-app.local"
    state: present
  become: true

Using 127.0.0.1 inside the VM keeps internal traffic fast and simple.

Step 3: Apply Your Changes

You do not need to restart or destroy your virtual machine. Just run provision again:

bashCopy
vagrant provision
 

Quick Testing Checklist

1. Check in Browser: Open http://my-app.local/ in your web browser. Press F12, open Application -> Cookies, and confirm your session cookie is saved properly.
2. Check inside the VM: Log into your VM (vagrant ssh) and run:

bashCopy
curl -I [http://my-app.local](http://my-app.local)
 

Setting up real domain names early saves you from hard-to-find login bugs and keeps your local setup running smoothly.

Note: Written based on my own experience fixing this issue, then polished and edited with AI for readability.