Make any local service accessible over https with Valet

Update: I recently find out about the valet proxy command which lets you easily proxy local services through valet. More information can be found in the official documentation of Valet

Recently I discovered MeiliSearch, a service that provides fast text search via an API. So I installed it locally and set it up accordingly. I then faced the following error in the Safari browser console:

You can disable this kind of warnings via the Safari preferences but I actually like this feature for security reasons, even when it's local. It's also very easy to run the service securely via NGINX with the help of Valet. Lets see how it works!

1. Create a new NGINX config

In order to route all traffic securely over SSL we are going to use NGINX as a proxy. The first step is to create a new nginx configuration that will be used solely for routing request to MeiliSearch. Lets add a new NGINX config by running the follow command in your console:

valet secure meilisearch.test

2. Edit the newly created NGINX config

Your newly created config should be located at: ~/.config/valet/Nginx/meilisearch.test. Copy over the content to a text editor. Replace the the nginx config file with the following content:

server {
    listen 127.0.0.1:443 ssl http2;

    server_name meilisearch.test www.meilisearch.test *.meilisearch.test;

    ssl_certificate "/absolute/path/to/meilisearch.test.crt";
    ssl_certificate_key "/absolute/path/to/meilisearch.test.key";

    location / {
        proxy_pass  http://127.0.0.1:7700;
        proxy_read_timeout     60;
        proxy_connect_timeout  60;
        proxy_redirect         off;

        # Allow the use of websockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Make sure to replace the SSL certificate path and the certificate key path with the original values (that you copied to the text editor).

This updated configuration tells Valet to route all traffic that it is receiving from https://meilisearch.test to https://localhost:7700 (the local destination where MeiliSearch is running on).

3. Restart Valet

Make sure the updated Nginx config is properly loaded by restarting valet:

valet restart

Now you should be able to access the MeiliSearch instance via https://meilisearch.test, how cool is that!

This specific technique can also be used in your production environment to publish any kind of service that run on your machine but needs to be securely accessible from the outside. This could be applied when working with websockets for example. Alex Bouma wrote a really nice in-depth article which inspired me to come up with this solution for local use.