Merge pull request #19 from jameel-institute/jidea-59-dockerise-web-app

jidea-59 Dockerise web app

.github/workflows/docker-e2e.yml

@@ -0,0 +1,52 @@
+name: Playwright tests and docker push
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - '*'
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+jobs:
+  test-and-push:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Login to GHCR (GitHub Packages)
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build docker images
+        run: ./docker/build && ./db/scripts/build
+      - name: Push SHA tags
+        run: ./docker/push && ./db/scripts/push
+      - name: Run service dependencies
+        run: scripts/run-dependencies --db-build-skip
+      - name: Run app in docker
+        run: ./docker/run
+      - name: Set up Node for Playwright
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install npm dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps && npx playwright install msedge
+      - name: Run Playwright tests
+        run: npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - name: Push branch tag on success
+        run: ./docker/push-branch-tag

.github/workflows/integration-tests.yml

@@ -27,10 +27,7 @@ jobs:
           port: 8001
       - name: Check mocked R API server is running
         run: curl -s http://localhost:8001/mock-smoke
-      - name: Set environment variables for app
-        run: scripts/ci/copy-env-vars-to-dot-env-file
-        env:
-          NUXT_R_API_BASE: ${{ vars.NUXT_R_API_BASE }}
-          # Note - non-secret variables are stored under the 'vars' context, while secrets will be stored under the 'secrets' context
+      - name: Set non-secret environment variables for app
+        run: mv .env.example .env
       - name: Test
         run: npm run test:integration

.github/workflows/unit-tests.yml

@@ -20,11 +20,8 @@ jobs:
           cache: npm
       - name: Install dependencies
         run: npm ci
-      - name: Set environment variables for app
-        run: scripts/ci/copy-env-vars-to-dot-env-file
-        env:
-          NUXT_R_API_BASE: ${{ vars.NUXT_R_API_BASE }}
-          # Note - non-secret variables are stored under the 'vars' context, while secrets will be stored under the 'secrets' context
+      - name: Set non-secret environment variables for app
+        run: mv .env.example .env
       - name: Test
         run: npm run test:unit:coverage
       - name: Upload coverage to codecov

README.md

@@ -85,6 +85,20 @@ The QR code shown will allow you to quickly access the app.
 
 See the 'production' section of this README for how to run the app in production mode.
 
+### Docker
+
+There are Dockerfiles for both the web app (in `/docker`) and the database (in `/db`).
+
+To run the app in docker:
+- `./scripts/run-dev-dependencies`
+- `./docker/build`
+- `./docker/run-dev`
+
+This will build and run the app container, exposing port 3000, so you should be able to access the web app at
+http://localhost:3000 as you can when running locally outside docker.
+
+To tear down, you'll need to Ctrl+C from the `/docker/run-dev` script before the `/scripts/run-dev-dependencies` script.
+
 # DB
 
 Our ORM is [Prisma](https://www.prisma.io/).

db/scripts/build

@@ -2,11 +2,11 @@
 set -euxo pipefail
 
 HERE=$(dirname $0)
-. $HERE/common
+. $HERE/../../docker/common
 
 PACKAGE_ROOT=$(realpath $HERE/..)
 
 docker build \
-       -t "$TAG_SHA" \
-       -t "$TAG_BRANCH" \
+       -t "$DB_TAG_SHA" \
+       -t "$DB_TAG_BRANCH" \
        $PACKAGE_ROOT

db/scripts/push

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+set -euxo pipefail
+HERE=$(dirname $0)
+. $HERE/../../docker/common
+
+docker push "$DB_TAG_SHA"

db/scripts/run

@@ -2,10 +2,9 @@
 set -euxo pipefail
 
 HERE=$(dirname $0)
-. $HERE/common
+. $HERE/../../docker/common
 
 docker run --rm -d \
- --network=bridge \
  --name daedalus-web-app-db \
  -p 5432:5432 \
- "$TAG_BRANCH"
+ "$DB_TAG_SHA"

docker/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20
+
+ARG PORT=3000
+
+ENV NODE_ENV=production
+
+WORKDIR /src
+
+COPY . .
+RUN npm ci
+
+# Generate the prisma client code
+RUN npm install [email protected]
+RUN npx prisma generate
+
+RUN npm run build
+
+ENV PORT=$PORT
+
+# migrate the db before running the server
+CMD ["/bin/bash", "-c", "npx prisma migrate deploy;node .output/server/index.mjs"]

docker/build

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+set -e
+HERE=$(dirname $0)
+. $HERE/common
+
+docker build \
+       --tag $APP_TAG_SHA \
+       -f docker/Dockerfile \
+       .

docker/common

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -euxo pipefail
+
+GIT_SHA=$(git rev-parse --short=7 HEAD)
+if [[ -v "BRANCH_NAME" ]]; then
+    GIT_BRANCH=${BRANCH_NAME}
+else
+    GIT_BRANCH=$(git symbolic-ref --short HEAD)
+fi
+
+REGISTRY=ghcr.io
+ORG=jameel-institute
+PREFIX="${REGISTRY}/${ORG}"
+
+DB_IMAGE_NAME=daedalus-web-app-db
+DB_TAG="${PREFIX}/${DB_IMAGE_NAME}"
+DB_TAG_SHA="${DB_TAG}:${GIT_SHA}"
+DB_TAG_BRANCH="${DB_TAG}:${GIT_BRANCH}"
+
+APP_IMAGE_NAME=daedalus-web-app
+APP_TAG="${PREFIX}/${APP_IMAGE_NAME}"
+APP_TAG_SHA="${APP_TAG}:${GIT_SHA}"
+APP_TAG_BRANCH="${APP_TAG}:${GIT_BRANCH}"

docker/push

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+set -e
+HERE=$(dirname $0)
+. $HERE/common
+
+docker push  "$APP_TAG_SHA"

docker/push-branch-tag

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+set -euxo pipefail
+HERE=$(dirname $0)
+. $HERE/common
+
+docker tag "$APP_TAG_SHA" "$APP_TAG_BRANCH"
+docker push "$APP_TAG_BRANCH"
+
+docker tag "$DB_TAG_SHA" "$DB_TAG_BRANCH"
+docker push "$DB_TAG_BRANCH"

docker/run

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+set -euxo pipefail
+HERE=$(dirname $0)
+. $HERE/common
+
+# NB SHA image must be built before running this script
+# run-dependencies should also have been run, to create network and db container (the web app container will apply
+# migrations to the db, so the db container must be running first).
+
+# Check for dependencies - fail if not found
+(docker container top daedalus-web-app-db && docker container top daedalus-api && docker network inspect daedalus) > /dev/null || \
+(echo "Not all dependencies are running." && exit 1)
+
+docker run  -d \
+ --name "$APP_IMAGE_NAME" \
+ --network=daedalus \
+ -p 3000:3000 \
+ --env-file env.docker \
+ "$APP_TAG_SHA"

docker/run-dev

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+set -ex
+
+# From now on, if the user presses Ctrl+C we should teardown gracefully
+function cleanup() {
+  set +e # allow teardown errors
+  docker container stop daedalus-web-app
+  docker container rm daedalus-web-app
+  set -e
+}
+cleanup
+trap cleanup EXIT
+
+HERE=$(realpath "$(dirname $0)")
+"$HERE"/run
+
+
+# Wait for Ctrl+C
+echo "Ready to use. Press Ctrl+C to teardown."
+sleep infinity

env.docker

@@ -0,0 +1,2 @@
+DATABASE_URL=postgresql://daedalus-web-app-user:changeme@daedalus-web-app-db:5432/daedalus-web-app
+NUXT_R_API_BASE=http://daedalus-api:8001/