Docker containerization

[Jonston]

Good afternoon! What if laravel api and nuxt application are in different containers, but I want to use cookie-based authorization? Setting baseUrl=http://laravel:8000 results in crossdomain requests and cookie issues. Thank you!

[manchenkoff]

Hey @Jonston! This can be solved by naming you Laravel app the same way as domain would be. For example, Laravel container name - api.myapp.test.

Then you can setup an entry in your /etc/hosts (depends on your OS), to make api.myapp.test accessible from the web browser.

In this case, CSR requests will go to api.myapp.test -> resolved to docker -> passed into Laravel container
For SSR, requests will go directly to the container named api.myapp.test (they should be in the same network)

You can check more details in the following discussions:

• [Reopen] API URLs for CSR/SSR with Docker containers #58
• [Feature] Different baseUrl for server side rendering #115
• [Help needed] I cannot make it work with SSR enabled (two days trying to fix) #57
• Can't login, keep getting Sanctum errors 500 or 419 #13

[Jonston]

I'm having difficulty setting up nginx. The server and client seem to be configured normally, but communication between the Nuxt -> Laravel container is problematic. Could you help me?
backand docker-compose.yml

services:
    laravel:
        build:
            context: .
            dockerfile: Dockerfile
        container_name: api.events.local
        restart: unless-stopped
        working_dir: /var/www/html
        volumes:
            - .:/var/www/html
        networks:
            - laravel-network
            - shared-network
        depends_on:
            - mysql
        env_file:
            - .env

    mysql:
        image: mysql:8.0
        container_name: mysql
        restart: unless-stopped
        environment:
            MYSQL_DATABASE: ${DB_DATABASE}
            MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
            MYSQL_PASSWORD: ${DB_PASSWORD}
            MYSQL_USER: ${DB_USERNAME}
            SERVICE_TAGS: dev
            SERVICE_NAME: mysql
        volumes:
            - mysql-data:/var/lib/mysql
        networks:
            - laravel-network
        ports:
            - "3306:3306"

networks:
    laravel-network:
        driver: bridge
    shared-network:
        external: true

volumes:
    mysql-data:
        driver: local

Frontend docker-compose.yml

services:
    nuxt:
        build: .
        container_name: events
        restart: unless-stopped
        ports:
            - "3000:3000"
        volumes:
            - .:/app
            - /app/node_modules
        environment:
            - NODE_ENV=development
        command: npm run dev
        networks:
            - nuxt-network
            - shared-network

networks:
    nuxt-network:
        driver: bridge
    shared-network:
        external: true

nginx default.conf

upstream backend {
    server api.events.local:9000;
}

upstream nuxt {
    server nuxt:3000;
}

server {
    listen 80;
    server_name api.events.local;
    root /var/www/html/public;

    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass backend;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

server {
    listen 80;
    server_name events.local; # Или как ты хочешь обращаться

    location / {
        proxy_pass http://nuxt;
        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;
    }
}

Буду очень признателен за помощь

[manchenkoff]

You can make it work even without Nginx if Laravel and Nuxt containers are working as long-running apps on their own. However, if you want to use Nginx, make sure it is connected to the same network.

I'm transferring this issue into a discussion, where you can ask further questions. The best option would be to provide a minimal repro, which configuration I can help with.

[Jonston]

Thank you for your answer. Can you show an example without nginx?

[manchenkoff]

Sure, you can check breeze-api app template based on the Sail environment - docker-compose.yml. Same result can be achieved w/o Sail if you use artisan serve command as an entrypoint

[Jonston]

@manchenkoff thanx a lot man. My Englesh no so strong? but i try explain Thanks a lot for your plugin it have very usefull staf. Your i undestand your proposition. I am rum laravel app as a nosistanse docker imag and it work. I glad for that. Thank to a Gods! But share mu trying to keep alive internet.
So thats nuxt docker-compose.yml config

services:
    nuxt:
        build: .
        container_name: events.local
        restart: unless-stopped
        ports:
            - "3000:3000"
        volumes:
            - .:/app
            - /app/node_modules
        environment:
            - NODE_ENV=development
        command: npm run dev
        networks:
            - nuxt-network
            - shared-network

networks:
    nuxt-network:
        driver: bridge
    shared-network:
        external: true

Here laravel api docker-compose.yml config

services:
    api.events.local:
        build:
            context: './vendor/laravel/sail/runtimes/8.4'
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWW_GROUP}'
        image: 'sail-8.4/app'
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWW_USER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
            - shared-network
        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
networks:
    sail:
        driver: bridge
    shared-network:
        external: true
volumes:
    sail-mysql:
        driver: local

Do its works for me!
But another way we can allso with nginx + external docker network/ Alias nginx service like

services:
  # Nginx сервис
  nginx:
    build:
      context: ./docker/nginx
    container_name: laravel_nginx
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html
      - ./docker/nginx/nginx.conf:/etc/nginx/conf.d/nginx.conf
    depends_on:
      - php
    networks:
      - laravel-network
      - shared-network