Update Docker setup

Author: lcharette

.vscode/launch.json

@@ -10,6 +10,20 @@
             "request": "launch",
             "port": 9000,
             "log": false,
+        },
+        {
+            "name": "Listen for Xdebug on Docker",
+            "type": "php",
+            "request": "launch",
+            "port": 9001,
+            "pathMappings": {
+                "/app": "${workspaceFolder}"
+            },
+            "xdebugSettings": {
+                "max_children": 128,
+                "max_data": 512,
+                "max_depth": 3
+            }
         }
     ]
 }

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 > This file contains the changelog of the Skeleton itself. You should replace it with your own Changelog!
 
 ## [6.0.0-beta.4](https://github.com/userfrosting/UserFrosting/compare/6.0.0-beta.3...6.0.0-beta.4)
+- Update Docker setup (@ssnukala)
 - Add exclude list for optimizeDeps in Vite config
 - Add Admin Sprinkle to main.ts
 - Go back to Vite default port (`5173`) + allows Vite port to be in env variable

app/.env.docker

@@ -0,0 +1,32 @@
+# Sample UserFrosting environment variables definition file for Docker environment.
+# Note that in production, it is strongly recommended that you set these variables directly in your environment instead.
+
+UF_MODE=
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_NAME=userfrosting
+DB_USER=docker
+DB_PASSWORD=secret
+DB_ROOT_PASSWORD=secret
+ROOT_PASSWORD=secret
+
+MAIL_MAILER=smtp # Set to one of 'smtp', 'mail', 'qmail', 'sendmail'
+SMTP_HOST=mailpit
+[email protected]
+SMTP_PASSWORD=password
+SMTP_PORT=2025
+SMTP_SECURE=false
+SMTP_AUTH=false
+
+[email protected]
+MAIL_FROM_NAME="Site Administrator"
+URI_PUBLIC="" # Set to the base URI of your site, e.g. http://www.example.com in production. If left blank, it will be automatically determined.
+
+# MySQL Container Settings - only used by docker-compose, not by UserFrosting itself
+# Set as same as DB_ settings above
+MYSQL_DATABASE=userfrosting
+MYSQL_ROOT_PASSWORD=secret
+MYSQL_USER=docker
+MYSQL_PASSWORD=secret

app/.env.example

@@ -2,19 +2,22 @@
 # Note that in production, it is strongly recommended that you set these variables directly in your environment instead.
 
 UF_MODE=""
+
 DB_CONNECTION="mysql"
 DB_HOST="localhost"  # Some developer environments, like some MAMP installations, require you to instead set DB_HOST="127.0.0.1"
 DB_PORT="3306"
 DB_NAME="userfrosting"
 DB_USER="userfrosting"
 DB_PASSWORD="password"
+
 MAIL_MAILER="smtp" # Set to one of 'smtp', 'mail', 'qmail', 'sendmail'
 SMTP_HOST="host.example.com"
 SMTP_USER="[email protected]"
 SMTP_PASSWORD="password"
 SMTP_PORT="587"
 SMTP_AUTH="true"
 SMTP_SECURE="tls"
+
 MAIL_FROM_ADDRESS="[email protected]"
 MAIL_FROM_NAME="Site Administrator"
 URI_PUBLIC="" # Set to the base URI of your site, e.g. http://www.example.com in production. If left blank, it will be automatically determined.

docker-compose.yml compose.yamldocker-compose.yml renamed to compose.yaml

@@ -1,27 +1,16 @@
-version: "3.2"
 services:
   app:
     restart: unless-stopped
     tty: true
     build:
-      context: docker/app
-    environment:
-      - DB_CONNECTION=mysql
-      - DB_HOST=mysql
-      - DB_PORT=3306
-      - DB_NAME=userfrosting
-      - DB_USER=docker
-      - DB_PASSWORD=secret
-      - SMTP_HOST=mailpit
-      - SMTP_PORT=1025
-      - SMTP_SECURE=false
-      - SMTP_AUTH=false
+      context: ./docker/app
+    env_file:
+      - ./app/.env
     volumes:
       - .:/app
       - ./docker/app/php/custom.ini:/usr/local/etc/php/conf.d/custom.ini
     networks:
       - backend
-
   nginx:
     restart: unless-stopped
     tty: true
@@ -33,38 +22,47 @@ services:
       - .:/app
     depends_on:
       - app
-      - mysql
       - mailpit
     networks:
       - frontend
       - backend
-
+  vue-frontend:
+    restart: unless-stopped
+    tty: true
+    build:
+      context: .
+      dockerfile: ./docker/vue/Dockerfile
+    env_file:
+      - ./app/.env
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+    networks:
+      - frontend
+  mysql:
+    restart: unless-stopped
+    tty: true
+    build:
+      context: ./docker/mysql
+    env_file:
+      - ./app/.env
+    ports:
+      - "8503:3306"
+    volumes:
+      - userfrosting-db:/var/lib/mysql
+    networks:
+      - backend
   mailpit:
     image: 'axllent/mailpit:latest'
     ports:
       - '1025:1025'
       - '8025:8025'
     networks:
       - backend
-
-  mysql:
-    image: mysql:8.0
-    networks:
-      - backend
-    environment:
-      - MYSQL_DATABASE=userfrosting
-      - MYSQL_ROOT_PASSWORD=secret
-      - MYSQL_USER=docker
-      - MYSQL_PASSWORD=secret
-    ports:
-      - 8593:3306
-    volumes:
-      - userfrosting-db:/var/lib/mysql
-
 volumes:
   userfrosting-db:
     driver: local
-
 networks:
   frontend:
   backend:

docker/README.md

@@ -6,13 +6,39 @@ First, install [Docker Compose or Docker Desktop](https://docs.docker.com/compos
 
 Second, initialize a new UserFrosting project:
 
-1. Get UserFrosting repository : `docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfrosting UserFrosting "^5.0" --no-scripts --no-install --ignore-platform-reqs`
-2. Change to the new directory `cd UserFrosting`
-3. Run `docker-compose build --no-cache` to build all the docker containers.
-4. Run `docker-compose up -d` to to start all the containers.
-5. Run `sudo chown -R $USER: .` and `sudo chmod 777 app/{logs,cache,sessions}` to set some directory permissions (your may have to enter your root password):
-6. Run `docker-compose exec app composer update` to install all composer modules used in UserFrosting.
-7. Run `docker-compose exec app php bakery bake` to install UserFrosting (database configuration and migrations, creation of admin user, ...). You'll need to provide info to create the admin user.
+1. Get UserFrosting repository : 
+   ```
+   docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfrosting UserFrosting "^6.0" --no-scripts --no-install --ignore-platform-reqs
+   ```
+2. Change to the new directory : 
+   ```
+   cd UserFrosting
+   ```
+3. Copy the default env file : 
+   ```
+   cp app/.env.docker app/.env
+   ```
+4. Build all the docker containers:
+   ```
+   docker-compose build --no-cache
+   ```
+5. Start all the containers:
+   ```
+   docker-compose up -d
+   ```
+6. Set some directory permissions (your may have to enter your root password):
+   ```
+   sudo chown -R $USER: .
+   sudo chmod 777 app/{logs,cache,sessions}
+   ```
+7. Install all composer modules used in UserFrosting:
+   ```
+   docker-compose exec app composer update
+   ```
+8. Install UserFrosting (database configuration and migrations, creation of admin user, ...). You'll need to provide info to create the admin user.
+   ```
+   docker-compose exec app php bakery bake
+   ```
 
 Now visit [http://localhost:8080](http://localhost:8080) to see your UserFrosting homepage!
 
@@ -21,8 +47,9 @@ Now visit [http://localhost:8080](http://localhost:8080) to see your UserFrostin
 **You can paste these into a bash file and execute it!**
 
 ```bash
-docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfrosting UserFrosting "^5.0" --no-scripts --no-install --ignore-platform-reqs
+docker run --rm -it -v "$(pwd):/app" composer create-project userfrosting/userfrosting UserFrosting "^6.0" --no-scripts --no-install --ignore-platform-reqs
 cd UserFrosting
+cp app/.env.docker app/.env
 docker-compose build --no-cache
 docker-compose up -d
 sudo chown -R $USER: .
@@ -35,11 +62,15 @@ docker-compose exec app php bakery bake
 
 If you need to stop the UserFrosting docker containers, just change to your userfrosting directory and run:
 
-`docker-compose stop`
+```
+docker-compose stop
+```
 
 To start containers again, change to your userfrosting directory and run:
 
-`docker-compose up -d`
+```
+docker-compose up -d
+```
 
 **Purge docker containers to start over**
 
@@ -55,8 +86,7 @@ And then start the installation process again.
 
 You may be tempted to run with this in production but this setup has not been security-hardened. For example:
 
-- Database is exposed on port 8593 so you can access MySQL using your favorite client at localhost:8593. However,
-  the way Docker exposes this actually bypasses common firewalls like `ufw` so this should not be exposed in production.
+- Database is exposed on port 8593 so you can access MySQL using your favorite client at localhost:8593. However, the way Docker exposes this actually bypasses common firewalls like `ufw` so this should not be exposed in production.
 - Database credentials are hard-coded so obviously not secure.
 - File permissions may be more open than necessary.
 - HTTPS not implemented fully

docker/app/Dockerfile

@@ -1,53 +1,45 @@
+# Use the official PHP 8.2 FPM image
 FROM php:8.2-fpm
 
-RUN apt-get update
+# Set environment variables for non-interactive installations
+ENV DEBIAN_FRONTEND=noninteractive
 
-RUN apt-get install -y apt-utils
-
-# Add NodeJS 18 Repository
-RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
-    apt-get install -y nodejs
-
-RUN apt-get install -y \
-    libc-client-dev \
+# Update and install all necessary system dependencies in a single RUN command
+RUN apt-get update && apt-get install -y apt-utils curl git unzip gnupg2 \
+    libpq-dev \
     libicu-dev \
     libkrb5-dev \
     libssl-dev \
     libxslt1-dev \
     libxml2-dev \
     locales \
     zlib1g-dev \
-    libzip-dev\
+    libzip-dev \
     libpng-dev \
     libfreetype6-dev \
     libjpeg62-turbo-dev \
     libjpeg-dev \
     zip \
-    nodejs
+    default-mysql-client \
+    # Clean up the package cache to reduce image size
+    && rm -rf /var/lib/apt/lists/*
+
+# Add NodeJS 20 Repository and install nodejs
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && rm -rf /var/lib/apt/lists/*
 
-# Optional XDebug Install
-#RUN curl -fsSL 'https://xdebug.org/files/xdebug-2.9.4.tgz' -o xdebug.tar.gz \
-#    && mkdir -p xdebug \
-#    && tar -xf xdebug.tar.gz -C xdebug --strip-components=1 \
-#    && rm xdebug.tar.gz \
-#    && ( \
-#    cd xdebug \
-#    && phpize \
-#    && ./configure --enable-xdebug \
-#    && make -j$(nproc) \
-#    && make install \
-#    ) \
-#    && rm -r xdebug \
-#    && docker-php-ext-enable xdebug   
+# Install XDebug via PECL
+RUN pecl install xdebug \
+    && docker-php-ext-enable xdebug
 
-# COMPOSER INSTALL
-RUN curl -sSfo /tmp/composer.phar https://getcomposer.org/installer
-RUN php /tmp/composer.phar --install-dir=/usr/local/bin --filename=composer
+# Install Composer
+RUN curl -sSfo /tmp/composer.phar https://getcomposer.org/installer \
+    && php /tmp/composer.phar --install-dir=/usr/local/bin --filename=composer
 
-# Install and configure PHP extensions
+# Configure and install PHP extensions
 RUN docker-php-ext-configure gd --with-freetype --with-jpeg \
     && docker-php-ext-install -j$(nproc) gd \
-    && docker-php-ext-install -j$(nproc) pdo pdo_mysql \
-    && docker-php-ext-install -j$(nproc) zip
+    && docker-php-ext-install -j$(nproc) pdo pdo_mysql zip
 
-WORKDIR /app
+WORKDIR /app

docker/app/php/custom.ini

@@ -3,4 +3,14 @@ memory_limit = 64M
 upload_max_filesize = 64M
 post_max_size = 64M
 max_execution_time = 600
-memory_limit=512M
+memory_limit=512M
+
+[xdebug]
+xdebug.mode=debug,coverage
+xdebug.start_with_request=yes
+xdebug.client_host=host.docker.internal
+xdebug.client_port=9001
+xdebug.log=/var/log/xdebug.log
+xdebug.log_level=7
+xdebug.discover_client_host=1
+xdebug.idekey=VSCODE

docker/mysql/Dockerfile

@@ -0,0 +1,10 @@
+
+
+# Use MySQL 9.4.0 as the base
+FROM mysql:9.4.0
+
+# Expose MySQL default port
+EXPOSE 3306
+
+# Default authentication plugin
+CMD ["mysqld"]

docker/mysql/mysql.conf

@@ -0,0 +1,3 @@
+[mysqld]
+bind-address = 0.0.0.0
+innodb_use_native_aio = 0