Simplified Dev Container setup to use a single compose file (#21649)

no issue

- The current devcontainer setup was built with the intention of using
it as the _primary_ way of running Ghost in Docker locally. As such, it
was designed to be extensible — there was a `base.compose.yml` file with
the default configuration, and multiple other `compose.yml` files that
could be added to extend the base setup to cover different use-cases.
- We've run into some problems with using the devcontainer for regular
day to day usage, so we're moving toward using a more conventional
`compose` based setup for more advanced configurations.
- We're going to keep the devcontainer around as it's still nice for a
quick and easy setup, but it no longer needs to support multiple
configurations — as such, we can simplify the setup to a single
`compose.yml` file to make it easier to reason about and troubleshoot if
anything goes wrong.
- This commit removes the `.devcontainer/.docker` directory, and many of
the files that were in it. The main `compose.yml` file and the
Dockerfile were moved to the root of `.devcontainer` which should make
the setup a bit easier to follow and modify as needed.

.devcontainer/.docker/base-devcontainer.compose.yml

@@ -1,13 +0,0 @@
-# For use in a Dev Container where your local code is mounted into the container
-name: ghost-devcontainer
-services:
-  ghost:
-    image: ghost-base-devcontainer
-    build:
-      target: base-devcontainer
-    command: ["sleep", "infinity"]
-    environment:
-      - DEVCONTAINER=true
-      - DISPLAY=host.docker.internal:0
-    volumes:
-      - /tmp/.X11-unix:/tmp/.X11-unix

.devcontainer/.docker/development.compose.yml

@@ -1,38 +0,0 @@
-# Development container with Ghost code and dependencies pre-installed
-## Watches your local filesystem and syncs changes to the container
-## Intended for use with raw docker compose commands
-name: ghost-development
-services:
-  ghost:
-    image: ghost-development
-    build:
-      target: development
-    command: ["yarn", "dev"]
-    volumes:
-      - ../../.yarncache:/workspaces/ghost/.yarncache
-    develop: 
-      watch: 
-        - path: ../../
-          action: sync
-          target: /workspaces/ghost
-          ignore: 
-            - node_modules/
-            - .yarncache/
-        - path: yarn.lock
-          action: rebuild
-    ports:
-      - 2368:2368
-      - 4200:4200
-      - 4173:4173
-      - 41730:41730
-      - 4175:4175
-      - 4176:4176
-      - 4177:4177
-      - 4178:4178
-      - 6174:6174
-      - 7173:7173
-      - 7174:7174
-      - 9174:9174
-    environment:
-      - DEBUG=${DEBUG:-}
-      - APP_FLAGS=${APP_FLAGS:-}

.devcontainer/.docker/development.entrypoint.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-if [ -z "$(ls -A ".yarncache")" ]; then
-    cp -r /workspaces/ghost/.yarncachecopy/* /workspaces/ghost/.yarncache/
-fi
-
-exec "$@"

.devcontainer/.docker/full-devcontainer.compose.yml

@@ -1,26 +0,0 @@
-# Dev Container with all Ghost code and dependencies pre-installed
-name: ghost-full-devcontainer
-services:
-  ghost:
-    image: ghost-full-devcontainer
-    build:
-      target: full-devcontainer
-    command: ["sleep", "infinity"]
-    environment:
-      - DEVCONTAINER=true
-      - DISPLAY=host.docker.internal:0
-    volumes:
-      - /tmp/.X11-unix:/tmp/.X11-unix
-    ports:
-      - 2368:2368
-      - 4200:4200
-      - 4173:4173
-      - 41730:41730
-      - 4175:4175
-      - 4176:4176
-      - 4177:4177
-      - 4178:4178
-      - 6174:6174
-      - 7173:7173
-      - 7174:7174
-      - 9174:9174

.devcontainer/README.md

@@ -3,22 +3,22 @@
 ## devcontainer.json
 This file contains the configuration for the dev container. It is used to define the setup of the container, including things like port bindings, environment variables, and other dev container specific features.
 
-It points to a docker compose file in the `.devcontainer/.docker` directory, which in turn relies on a Dockerfile in the same directory.
+There are three main components that the devcontainer.json file relies on:
+- The docker compose file (`.devcontainer/compose.yml`), which defines all the services that should be started when the dev container is launched, like MySQL and Redis.
+- The Dockerfile (`.devcontainer/Dockerfile`), which is used to build the dev container image.
+- The `onCreateCommand` script (`.devcontainer/onCreateCommand.js`), which is used to setup the dev container after it is created.
+
+The Dev Container setup is intended to be as simple as possible with a focus on a really simple setup experience. It is designed to use VSCode's "Clone Repository in Container" feature, which will automatically handle the setup of the dev container, and create a volume for the Ghost codebase that is managed by Docker. It is a great tool for quickly spinning up an isolated development environment, but it lacks some of the flexibility and direct control that a full docker compose setup can provide. Therefore, if you plan to do more "heavy lifting" on Ghost, we recommend using the docker compose setup instead.
 
 ## Dockerfile
-The Dockerfile in this directory uses a multi-stage build to allow for multiple types of builds without duplicating code and ensuring maximum consistency. The following targets are available:
+The Dockerfile used to build the Dev Container itself is located at `.devcontainer/Dockerfile`. This Dockerfile uses a multi-stage build to allow for multiple types of builds without duplicating code and ensuring maximum consistency. The following targets are available:
 - `base`: The bare minimum base image used to build and run Ghost. Includes the operating system, node, and some build dependencies, but does not include any Ghost code or dependencies.
 - `base-devcontainer`: everything from `base`, plus additional development dependencies like the stripe-cli and playwright. No code or node dependencies.
 - `full-devcontainer`: everything from `base-devcontainer`, plus Ghost's code and all node dependencies
 - `development`: an alternative to `full-devcontainer` intended for manual development e.g. with docker compose. Add Ghost's code and installs dependencies with some optimizations for the yarn cache
 
 ## Docker Compose
-Similarly, the docker compose configuration relies on merging compose files to create the final configuration. The `base.compose.yml` file contains the bare minimum configuration, and can be extended by specifying additional services or modifying the existing ones by supplying additional compose files. For example, to run the `development.compose.yml` file, you would use the following command:
+The docker compose setup for the dev container is located at `.devcontainer/compose.yml`. This compose file includes the MySQL database service and the Redis service, in addition to the Ghost dev container service. When running the Dev Container (i.e. via the "Clone Repository in Container" feature in VSCode), this compose file will be used to start the necessary services before starting the Ghost Dev Container itself.
 
-```
-docker compose -f .devcontainer/docker/base.compose.yml -f .devcontainer/docker/development.compose.yml up
-```
-
-There is an alias `yarn compose` script in the top level `package.json` which points to the appropriate `compose.yml` files for local development.
-
-This setup gives us the flexibility to create multiple different docker compose configurations, while ensuring a base level of consistency across configurations.
+## On Create Command
+The Dev Container spec allows developers to specify a command to run after the container is created. This is done by specifying an `onCreateCommand` in the devcontainer.json file. For Ghost's Dev Container, this command simply runs a JS script defined in `.devcontainer/onCreateCommand.js`. This script handles installing node dependencies, setting up the local configuration at `ghost/core/config.local.json`, and some other simple setup tasks to get the dev container ready for use.

.devcontainer/compose.yml

@@ -2,15 +2,18 @@
 ## Intended to be extended by another compose file
 ## e.g. docker compose -f base.compose.yml -f development.compose.yml up
 ## Does not include development dependencies, Ghost code, or any other dependencies
-name: ghost-base
+name: ghost-devcontainer
 services:
   ghost:
-    image: ghost-base
+    image: ghost-devcontainer
+    command: ["sleep", "infinity"]
     build:
-      context: ../../
-      dockerfile: .devcontainer/.docker/Dockerfile
-      target: base
+      context: ../
+      dockerfile: .devcontainer/Dockerfile
+      target: base-devcontainer
     pull_policy: never
+    environment:
+      - DEVCONTAINER=true
     tty: true
     depends_on:
       mysql:

.devcontainer/devcontainer.json

@@ -6,7 +6,7 @@
             "plugins": "git yarn gh"
         }
     },
-    "dockerComposeFile": ["./.docker/base.compose.yml", "./.docker/base-devcontainer.compose.yml"],
+    "dockerComposeFile": ["./compose.yml"],
     "service": "ghost",
     "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
     "shutdownAction": "stopCompose",