Forem: Adrian Mejias

How to Enable SSL for Local Laravel Sail Development using Caddy and Docker

Adrian Mejias — Sun, 10 Oct 2021 17:21:02 +0000

Let's talk SSL and local development; don't worry, I've been searching too.

There is an issue with developing locally, not just with Laravel, where developers who are building saas products aren't able to get a clean setup for SSL in the browser. This makes setting things up like PWAs or Google sign-in buttons impossible if the certificate isn't valid.

Given the power of Docker and Caddy, the dream is real. You can absolutely use this for non-Laravel Sail web applications as well.

The end result of implementing the code below should give you a couple of certificates (intermediate.crt, laravel.test.crt) that you can install to your local system.

GitHub Gist: https://gist.github.com/adrianmejias/0997f2b8a20715428f594a4798e034f5

Directory Structure

docker/
- caddy/
- authorities/ (intermediate.crt)
- certificates/
  - laravel.test/ (laravel.test.crt)
- Caddyfile
- Dockerfile
- start-container
docker-compose.yml

Files

docker-compose.yml

# ...
  laravel.test:
        # Comment or remove ports
        # ports:
        #     - "${APP_PORT:-80}:80"
   # ...
   caddy:
        build:
            context: "./docker/caddy"
            dockerfile: Dockerfile
            args:
                WWWGROUP: "${WWWGROUP}"
        restart: unless-stopped
        ports:
            - "${APP_PORT:-80}:80"
            - "${APP_SSL_PORT:-443}:443"
        environment:
            LARAVEL_SAIL: 1
            HOST_DOMAIN: laravel.test
        volumes:
            - "./docker/caddy/Caddyfile:/etc/caddy/Caddyfile"
            - ".:/srv:cache"
            - "./docker/caddy/certificates:/data/caddy/certificates/local"
            - "./docker/caddy/authorities:/data/caddy/pki/authorities/local"
            - "sailcaddy:/data:cache"
            - "sailcaddyconfig:/config:cache"
        networks:
            - sail
        depends_on:
            - laravel.test
# ...
volumes:
    # ...
    sailcaddy:
        external: true
    sailcaddyconfig:
        driver: local

docker/caddy/Dockerfile

FROM caddy:alpine

LABEL maintainer="Adrian Mejias"

ARG WWWGROUP

ENV DEBIAN_FRONTEND noninteractive
ENV TZ=UTC

RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

RUN apk add --no-cache bash \
    && apk add --no-cache nss-tools \
    && rm -rf /var/cache/apk/*

RUN addgroup -S $WWWGROUP
RUN adduser -G $WWWGROUP -u 1337 -S sail

COPY start-container /usr/local/bin/start-container
RUN chmod +x /usr/local/bin/start-container

ENTRYPOINT ["start-container"]

docker/caddy/start-container

#!/usr/bin/env sh

if [ ! -z "$WWWUSER" ]; then
    addgroup $WWWUSER sail
fi

if [ $# -gt 0 ]; then
    # @todo find alpine equivilent of below
    # exec gosu $WWWUSER "$@"
else
    /usr/bin/caddy run --config /etc/caddy/Caddyfile --adapter caddyfile
fi

docker/caddy/Caddyfile

{
    admin off
    # debug

    on_demand_tls {
        ask http://laravel.test/caddy
    }

    local_certs
}

:80 {
    reverse_proxy laravel.test {
        header_up Host {host}
        header_up X-Real-IP {remote}
        header_up X-Forwarded-Host {host}
        header_up X-Forwarded-For {remote}
        header_up X-Forwarded-Port 443
        # header_up X-Forwarded-Proto {scheme}

        health_timeout 5s
    }
}

:443 {
    tls internal {
        on_demand
    }

    reverse_proxy laravel.test {
        header_up Host {host}
        header_up X-Real-IP {remote}
        header_up X-Forwarded-Host {host}
        header_up X-Forwarded-For {remote}
        header_up X-Forwarded-Port 443
        # header_up X-Forwarded-Proto {scheme}

        health_timeout 5s
    }
}

app/Http/Controllers/CaddyController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CaddyController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        if (in_array($request->query('domain'), config('caddy.authorized'))) {
            return response('Domain Authorized');
        }

        abort(503);
    }
}

config/caddy.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Authorized Domains
    |--------------------------------------------------------------------------
    |
    | Domains that are authorized to be viewed through Caddy.
    |
    */

    'authorized' => [
        'laravel.test',
        // 'app.laravel.test',
    ],

];

app/Http/Middleware/TrustProxies.php

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Middleware\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string|null
     */
    protected $proxies = '*'; // Add wildcard or specific domain(s)

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers =
        Request::HEADER_X_FORWARDED_FOR |
        Request::HEADER_X_FORWARDED_HOST |
        Request::HEADER_X_FORWARDED_PORT |
        Request::HEADER_X_FORWARDED_PROTO |
        Request::HEADER_X_FORWARDED_AWS_ELB;
}

routes/web.php

<?php

use App\Http\Controllers\CaddyController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/caddy', CaddyController::class)->name('caddy');

// ...

Tabs vs Spaces

Adrian Mejias — Tue, 30 Jul 2019 23:22:16 +0000

Tabs.

Synchronous vs Asynchronous Programming in Javascript

Adrian Mejias — Tue, 30 Jul 2019 23:02:53 +0000

What is the difference between synchronous and asynchronous programming?

The difference between synchronous and asynchronous is the manner of execution. For example, in javascript, the execution of code goes from top to bottom in sequential order. Each item gets executed and continues to the next but not until the previous item has finished.

Called one() .. 2 second execution time
Called two() .. 4 second execution time (we must wait before the next method is called)
Called three() .. 2 second execution time

Page data load: 8 seconds

However, you are able to run an asynchronous piece of code without the stack getting stuck. For example, an onclick event on a button tag would be considered asynchronous as it does not prevent execution of other code.

Called one() .. 2 second execution
Called two() .. 2 second execution time + 2 second wait on server background call (we don't need to wait in order for the next method to be called)
Called three() .. 2 second execution time
Asynced two() .. we are now able to use data from two()

Page data load: 6 seconds (saving 2 seconds from background async call)

The example below will show you a clear difference. Keep in mind, javascript has other asynchronous features in the form of promises.

HTML Source (non-advanced example, btw)

<!DOCTYPE html>
    <html>
        <head>
            <title>Synchronous vs Asynchronous Example in Javascript</title>
        </head>
    <body>
        <h1>Synchronous vs Asynchronous Example in Javascript</h1>
        <h3>Synchronous</h3>
        <div id="sync-data"></div>
        <h3>Asynchronous</h3>
        <div id="async-data"></div>
        <button id="async-button">Async Click</button>
        <script>
            (() => {
                let runCommand = (elementId, identifier, timeout = -1) => {
                    console.log('runCommand', elementId, identifier, timeout)
                    if (timeout > -1) {
                        console.log('Waiting for data...', identifier, timeout + ' second delay')
                        window.setTimeout(() => {
                            runCommand(elementId, identifier)
                        }, timeout * 1000)
                    } else {
                        let dataNode = document.createElement('div')
                        let textNode = document.createTextNode('Run method ' + identifier + ' was called')
                        dataNode.appendChild(textNode)
                        document.getElementById(elementId).appendChild(dataNode)
                    }
                }
                // @type sync
                // @stack 1, 2, 3, 4
                for (let i = 1; i <= 4; i++) {
                    runCommand('sync-data', i)
                }
                // @type async
                // @stack 1, 2, 4, 3
                runCommand('async-data', 1)
                runCommand('async-data', 2)
                runCommand('async-data', 3, 2) // call after 2 seconds, continue to call next tick
                runCommand('async-data', 4)
                // @type async
                document.getElementById('async-button').addEventListener('click', () => {
                    console.log('async-button clicked')
                    let dataNode = document.createElement('div')
                    let textNode = document.createTextNode('Button was called without interruption of other async threads')
                    dataNode.appendChild(textNode)
                    document.getElementById('async-data').appendChild(dataNode)
                })
            })()
        </script>
    </body>
</html>

For more information on async/await in javascript, check out the animation in this article: Understanding Async/Await in 7 Seconds

Hi, I'm Adrian Mejias

Adrian Mejias — Tue, 17 Jan 2017 18:02:39 +0000

I have been coding for 20+ years.

You can find me on Twitter as @adrianmejias

I live in Leander, TX.

I work for sitegoals.

I mostly program in these languages: php, html, javascript, typescript.

I am currently learning more about blockchain and smart contracts.

Nice to meet you.