Laravel Sail + Ngrok

#laravel #ngrok #sail #docker

Laravel sail is a great tool to get started with Docker + Laravel. Installation is quite straight forward however, few features like (Site sharing) didn't run for me out of the box.

So in this article, We will try to use Ngrok, with is a great service that can be used to create publicly accessible URL for development purposes.

Pre-requisites:

Docker Desktop
Basic understanding how NGROK works
Ngrok Account, signup for a free account
Working Laravel 8 OR 9 setup + Composer

First Step: Install Laravel Sail.
Ensure to have Docker service up & running on your system. I have just listed below the 3 main commands to install Laravel Sail on a Laravel site, for more detailed step check the main docs here.



composer require laravel/sail --dev

php artisan sail:install

./vendor/bin/sail up

This should generate a docker-compose.yml file in your project, Once everything runs as expected without any error your site should be available at http://localhost/

Next step: Add the below snippet for NGROK to the file.



    ngrok:
        image: 'ngrok/ngrok:alpine'
        environment:
            NGROK_AUTHTOKEN: '${NGROK_AUTHTOKEN}' // this makes the NGROK_AUTHTOKEN env variable available inside the Ngrok Docker instance
        command: 'http laravel.test:80' // this refers to the internal Laravel site domain, eg: ngrok http localhost:80
        ports:
            - '4040:4040'
        networks:
            - sail
        depends_on:
            - laravel.test

Once you have create a ngrok account or already have one, navigate to the Dashboard here, and copy the auth-token and add it your projects .env file as shown below:

Ngrok Dashboard:



NGROK_AUTHTOKEN=abcabcabcabc12312312312313123123123123

Project .env file:

Finally your docker-compose.yml file should look something like this:




version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s

    ngrok:
        image: 'ngrok/ngrok:alpine'
        environment:
            NGROK_AUTHTOKEN: '${NGROK_AUTHTOKEN}'
        command: 'http laravel.test:80'
        ports:
            - '4040:4040'
        networks:
            - sail
        depends_on:
            - laravel.test

networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local

Last Step: Once this is done you can open the NGROK url using below 3 ways.

Open the below URL in the browser: http://localhost:4040/status and use search for the URL.
Curl this link curl localhost:4040/api/tunnels , use the link under "public_url" ```

$ curl localhost:4040/api/tunnels
{"tunnels":[{"name":"command_line","ID":"17392213123123b81cce385753","uri":"/api/tunnels/command_line","public_url":"https://123-51-37-97-194.eu.ngrok.io","proto":"https","config":{"addr":"http://laravel.test:80","inspect":true},"metrics":{"conns":{"count":43,"gauge":0,"rate1":0.024543318563119754,"rate5":0.0713663027223514,"rate15":0.03781519558791336,"p50":168847294,"p90":817055932.8000002,"p95":2911789251.399993,"p99":10355445542},"http":{"count":43,"rate1":0.024543318563119754,"rate5":0.0713663027223514,"rate15":0.03781519558791336,"p50":163345378,"p90":720535289.4000003,"p95":2894676624.1999927,"p99":10327856752}}}],"uri":"/api/tunnels"}

- Or navigate to the Ngrok Dashboard [here](https://dashboard.ngrok.com/cloud-edge/endpoints) to view the site URL.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/323m2xkl5oyjx4i2jmcd.png)