flask: dev envs support & misc improvements (#263)

* Docker Desktop Development Environments config
* Use cache volumes for pip
* Upgrade from Python 3.7 -> Python 3.10
* Use port `8000` to avoid conflicts with Airplay on
  macOS for default Flask port `5000`
* Use `SIGINT` to gracefully stop Flask

Signed-off-by: Milas Bowman <milas.bowman@docker.com>

flask/.docker/docker-compose.yaml

@@ -0,0 +1,10 @@
+services:
+  web: 
+    build:
+      context: app
+      target: dev-envs
+    stop_signal: SIGINT
+    ports: 
+      - '8000:8000'
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock

flask/README.md

@@ -16,37 +16,38 @@ Project structure:
 ```
 services: 
   web: 
-    build: app 
+    build:
+     context: app
+     target: builder
     ports: 
-      - '5000:5000'
+      - '8000:8000'
 ```
 
 ## Deploy with docker compose
 
 ```
 $ docker compose up -d
-Creating network "flask_default" with the default driver
+[+] Building 1.1s (16/16) FINISHED
-Building web
+ => [internal] load build definition from Dockerfile                                                                                                                                                                                       0.0s
-Step 1/6 : FROM python:3.7-alpine
+    ...                                                                                                                                         0.0s
-...
+ => => naming to docker.io/library/flask_web                                                                                                                                                                                               0.0s
-...
+[+] Running 2/2
-Status: Downloaded newer image for python:3.7-alpine
+ ⠿ Network flask_default  Created                                                                                                                                                                                                          0.0s
-Creating flask_web_1 ... done
+ ⠿ Container flask-web-1  Started
-
 ```
 
 ## Expected result
 
 Listing containers must show one container 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
-c126411df522        flask_web                    "python3 app.py"         About a minute ago  Up About a minute   0.0.0.0:5000->5000/tcp flask_web_1
+flask-web-1         "python3 app.py"    web                 running             0.0.0.0:8000->8000/tcp
 ```
 
-After the application starts, navigate to `http://localhost:5000` in your web browser or run:
+After the application starts, navigate to `http://localhost:8000` in your web browser or run:
 ```
-$ curl localhost:5000
+$ curl localhost:8000
 Hello World!
 ```
 
@@ -54,3 +55,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/flask
+```

flask/app/Dockerfile

@@ -1,7 +1,27 @@
-FROM python:3.7-alpine 
+# syntax=docker/dockerfile:1.4
+FROM --platform=$BUILDPLATFORM python:3.10-alpine AS builder
+
 WORKDIR /app
+
 COPY requirements.txt /app
-RUN pip3 install -r requirements.txt --no-cache-dir
+RUN --mount=type=cache,target=/root/.cache/pip \
+    pip3 install -r requirements.txt
+
 COPY . /app
+
 ENTRYPOINT ["python3"]
 CMD ["app.py"]
+
+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 / /

flask/app/app.py

@@ -6,4 +6,4 @@ def hello():
 	return "Hello World!"
 
 if __name__ == '__main__':
-	app.run(host='0.0.0.0')
+	app.run(host='0.0.0.0', port=8000)

flask/compose.yaml

@@ -1,5 +1,10 @@
 services:
   web: 
-    build: app 
+    build:
+      context: app
+      target: builder
+    # flask requires SIGINT to stop gracefully
+    # (default stop signal from Compose is SIGTERM)
+    stop_signal: SIGINT
     ports:
-      - '5000:5000'
+      - '8000:8000'