nginx-flask-mysql: add dev envs support (#272)

* Add Docker Desktop Development Environments config
* Change port `5000` -> `8000` for Flask to avoid conflicts on
  recent macOS versions
* Improve DB health check (for non-dev envs case) to avoid
  producing a bunch of log spam

Co-authored-by: Guillaume Lours <guillaume@lours.me>
Signed-off-by: Milas Bowman <milas.bowman@docker.com>

nginx-flask-mysql/.docker/docker-compose.yaml

@@ -0,0 +1,61 @@
+services:
+  db:
+    image: mariadb:10-focal
+    command: '--default-authentication-plugin=mysql_native_password'
+    restart: always
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "127.0.0.1", "--silent"]
+      interval: 3s
+      retries: 5
+      start_period: 30s
+    secrets:
+      - db-password
+    volumes:
+      - db-data:/var/lib/mysql
+    networks:
+      - backnet
+    environment:
+      - MYSQL_DATABASE=example
+      - MYSQL_ROOT_PASSWORD_FILE=/run/secrets/db-password
+    expose:
+      - 3306
+      - 33060
+
+  backend:
+    build:
+      context: backend
+      target: dev-envs
+    restart: always
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    secrets:
+      - db-password
+    ports:
+      - 8000:8000
+    networks:
+      - backnet
+      - frontnet
+    depends_on:
+      db:
+        condition: service_healthy
+
+  proxy:
+    build: proxy
+    restart: always
+    ports:
+      - 80:80
+    depends_on: 
+      - backend
+    networks:
+      - frontnet
+
+volumes:
+  db-data:
+
+secrets:
+  db-password:
+    file: db/password.txt
+
+networks:
+  backnet:
+  frontnet:

nginx-flask-mysql/README.md

@@ -18,13 +18,15 @@ Project structure:
 ```
 services:
   backend:
-    build: backend
+    build:
+      context: backend
+      target: builder
     ...
   db:
     # We use a mariadb image which supports both amd64 & arm64 architecture
-    image: mariadb:10.6.4-focal
+    image: mariadb:10-focal
     # If you really want to use MySQL, uncomment the following line
-    #image: mysql:8.0.27
+    #image: mysql:8
     ...
   proxy:
     build: proxy
@@ -37,7 +39,7 @@ Make sure port 80 on the host is not already being in use.
 > ℹ️ **_INFO_**  
 > For compatibility purpose between `AMD64` and `ARM64` architecture, we use a MariaDB as database instead of MySQL.  
 > You still can use the MySQL image by uncommenting the following line in the Compose file   
-> `#image: mysql:8.0.27`
+> `#image: mysql:8`
 
 ## Deploy with docker compose
 
@@ -56,15 +58,13 @@ Creating nginx-flask-mysql_proxy_1   ... done
 
 ## Expected result
 
-Listing containers must show three containers running and the port mapping as below:
+Listing containers should show three containers running and the port mapping as below:
 ```
-$ docker ps
+$ docker compose ps
-CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                    NAMES
+NAME                          COMMAND                  SERVICE             STATUS              PORTS
-c2c703b66b19        nginx-flask-mysql_proxy     "nginx -g 'daemon of…"   39 seconds ago      Up 38 seconds       0.0.0.0:80->80/tcp     nginx-flask-mysql_proxy_1
+nginx-flask-mysql-backend-1   "flask run"              backend             running             0.0.0.0:8000->8000/tcp
-2b8a21508c3c        nginx-flask-mysql_backend   "/bin/sh -c 'flask r…"   9 minutes ago       Up 38 seconds       0.0.0.0:5000->5000/tcp   nginx-flask-mysql_backend_1
+nginx-flask-mysql-db-1        "docker-entrypoint.s…"   db                  running (healthy)   3306/tcp, 33060/tcp
-0e6a96ea2028        mysql:8.0.19                "docker-entrypoint.s…"   9 minutes ago       Up 38 seconds       3306/tcp, 33060/tcp      nginx-flask-mysql_db_1
+nginx-flask-mysql-proxy-1     "nginx -g 'daemon of…"   proxy               running             0.0.0.0:80->80/tcp
-
-
 ```
 
 After the application starts, navigate to `http://localhost:80` in your web browser or run:
@@ -77,3 +77,14 @@ Stop and remove the containers
 ```
 $ docker compose down
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.
+
+![Screenshot of creating a Dev Environment in Docker Desktop](../dev-envs.png)
+
+To develop directly on the services inside containers, use the HTTPS Git url of the sample:
+```
+https://github.com/docker/awesome-compose/tree/master/nginx-flask-mysql
+```

nginx-flask-mysql/backend/Dockerfile

@@ -1,8 +1,35 @@
-FROM python:3.8-alpine
+# syntax=docker/dockerfile:1.4
+FROM --platform=$BUILDPLATFORM python:3.10-alpine AS builder
+
 WORKDIR /code
-COPY requirements.txt /code/
+COPY requirements.txt /code
-RUN pip install -r requirements.txt --no-cache-dir
+RUN --mount=type=cache,target=/root/.cache/pip \
-COPY . /code/
+    pip3 install -r requirements.txt
+
+COPY . .
+
 ENV FLASK_APP hello.py
-CMD flask run --host=0.0.0.0
+ENV FLASK_ENV development
+ENV FLASK_RUN_PORT 8000
+ENV FLASK_RUN_HOST 0.0.0.0
+
+EXPOSE 8000
+
+CMD ["flask", "run"]
+
+FROM builder AS dev-envs
+
+RUN <<EOF
+apk update
+apk add git
+EOF
+
+RUN <<EOF
+addgroup -S docker
+adduser -S --shell /bin/bash --ingroup docker vscode
+EOF
+
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
 
+CMD ["flask", "run"]

nginx-flask-mysql/compose.yaml

@@ -1,13 +1,13 @@
 services:
   db:
     # We use a mariadb image which supports both amd64 & arm64 architecture
-    image: mariadb:10.6.4-focal
+    image: mariadb:10-focal
     # If you really want to use MySQL, uncomment the following line
-    #image: mysql:8.0.27
+    #image: mysql:8
     command: '--default-authentication-plugin=mysql_native_password'
     restart: always
     healthcheck:
-      test: ["CMD", "mysqladmin", "ping", "-h", "127.0.0.1", "--silent"]
+      test: ['CMD-SHELL', 'mysqladmin ping -h 127.0.0.1 --password="$$(cat /run/secrets/db-password)" --silent']
       interval: 3s
       retries: 5
       start_period: 30s
@@ -23,19 +23,23 @@ services:
     expose:
       - 3306
       - 33060
+
   backend:
-    build: backend
+    build:
+      context: backend
+      target: builder
     restart: always
     secrets:
       - db-password
     ports:
-      - 5000:5000
+      - 8000:8000
     networks:
       - backnet
       - frontnet
     depends_on:
       db:
         condition: service_healthy
+
   proxy:
     build: proxy
     restart: always
@@ -45,11 +49,14 @@ services:
       - backend
     networks:
       - frontnet
+
 volumes:
   db-data:
+
 secrets:
   db-password:
     file: db/password.txt
+
 networks:
   backnet:
   frontnet:

nginx-flask-mysql/proxy/conf

@@ -2,7 +2,7 @@ server {
     listen       80;
     server_name  localhost;
     location / {
-        proxy_pass   http://backend:5000;
+        proxy_pass   http://backend:8000;
     }
 
 }