Question 97597 in Nginx Question posted in
The official documentation can be found here.

Laravel + Vite + Sail over HTTPS. Possible? – Nginx

After several hours to try things, I think I’m too much confuse to understand what’s going wrong… The title explain perfectly what I’m trying to make working.
My docker-compose.yml:

version: '3'
services:
    mysite.test:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '443:443' //added for test but not working...
            - '${HMR_PORT:-8080}:8080'
            - '5173:5173' //Vite port
        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
            - minio
    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
networks:
    sail:
        driver: bridge
volumes:
    sail-nginx:
        driver: local
    sail-mysql:
        driver: local

My vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        https: true,
        host: '0.0.0.0'
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true
        }),
    ],
});

My .env:

(...)
APP_URL=https://mysite.test
APP_SERVICE=mysite.test
(...)

The result of that configuration is it working with http://mysite.test but not in https. That return:

This site can’t be reached

mysite.test unexpectedly closed the connection.

Does anyone have a tips for me? 🙏
Thank you!

Tags:

2

Answers


  1. 0

    Using the share command you can run a https tunnel through expose. Your domain will look like

    https://[something].expose.dev

    Getting a real globally trusted ssl certificate can only be done by a certificate authority like for example Let’s Encrypt. They need to verify you own the domain, either by a http challenge or a dns challenge.

    As you cannot really own a .test domain, your only option left is sign a certificate yourself and add it to your own computer plus it’s root certificate. If you do this only your computer will show the connection as secure though.

    Login or Signup to reply.
  2. 0

    I managed to get this working with Caddy using the following gist
    https://gist.github.com/gilbitron/36d48eb751875bebdf43da0a91c9faec

    After all of the above I added the vite port to docker-compose.yml under laravel.test service.

    ports:
    - '5173:5173'

    Also vite itself needs an ssl certificate

    vite.config.js:

    import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
    server: {
        https: true,
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        },
    },
    plugins: [
        basicSsl(),
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

    For some reason my app generates http links, not https. So I added the following to the boot method of my AppServiceProvider.php

    URL::forceScheme('https');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search