From 12711562749c846115b4ec524b1346a0d14b6cbb Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 01:38:59 +0800 Subject: [PATCH 1/8] chore: rename dev images to client/server, #62 --- docker-compose.dev.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 9fe2361..6b7de1f 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -2,7 +2,7 @@ services: # NextJS v13 app running on development mode todo-client-dev: container_name: todo-client-dev - image: weaponsforge/todo-client:dev + image: weaponsforge/todo-next:client depends_on: - todo-server-dev env_file: @@ -23,7 +23,7 @@ services: # Express server running in development mode todo-server-dev: container_name: todo-server-dev - image: weaponsforge/todo-server:dev + image: weaponsforge/todo-next:server env_file: - ./server/.env build: From 23d63697a72968f90bf0c3a96be677b72855276f Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 01:40:15 +0800 Subject: [PATCH 2/8] chore: use mongo container service by default --- server/.env.example | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/.env.example b/server/.env.example index 0959044..8d6fc0a 100644 --- a/server/.env.example +++ b/server/.env.example @@ -5,10 +5,10 @@ API_WINDOW_MS_MINUTES=15 DEPLOYMENT_PLATFORM=regular # Use this mongo URI without user/pass in local host's mongo -MONGO_URI=mongodb://localhost/todo-next +# MONGO_URI=mongodb://localhost/todo-next # Use this mongo URI when using user/pass in the docker-compose.dev YML -# MONGO_URI=mongodb://admin:secret@mongo:27017/todo-next?authSource=admin +MONGO_URI=mongodb://admin:secret@mongo:27017/todo-next?authSource=admin # Uncomment these 2 CHOKIDAR lines if using Docker Desktop and WSL2 on Windows OS # CHOKIDAR_USEPOLLING=true From 605f1960498bfe18e0b7db7abe935e8076aae104 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 01:40:57 +0800 Subject: [PATCH 3/8] chore: update comment --- docker-compose.prod.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index b142c3d..1019a05 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -15,6 +15,7 @@ services: - "3000:3000" # Express web server app running in production mode + # Connects to remote MongoDB i.e., MongoDB Atlas todo-server-prod: container_name: todo-server-prod image: weaponsforge/todo-server:latest From 6eb5de43e037984dc85d82c2e9a312dfa5f5327d Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 02:15:25 +0800 Subject: [PATCH 4/8] feat: deploy development images to docker hub, #62 --- .github/workflows/deploy-vercel.yml | 30 +++++++++++ README.md | 77 +++++++++++++++++++++++++---- 2 files changed, 98 insertions(+), 9 deletions(-) diff --git a/.github/workflows/deploy-vercel.yml b/.github/workflows/deploy-vercel.yml index 8867d9c..2e7b652 100644 --- a/.github/workflows/deploy-vercel.yml +++ b/.github/workflows/deploy-vercel.yml @@ -115,3 +115,33 @@ jobs: run: | cd server rm -r -f .vercel + + docker-build-push: + name: Push Image to Docker Hub + if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' + needs: + - lint-client + - lint-server + runs-on: ubuntu-latest + steps: + - name: Login to Docker Hub + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + - name: Checkout the repository + uses: actions/checkout@v3 + with: + ref: ${{ github.event.release.tag_name }} + + - name: Create env variables + run: | + cp client/.env.example client/.env + cp server/.env.example server/.env + + - name: Build Image + run: docker compose -f docker-compose.dev.yml build + + - name: Push Image to Docker Hub + run: docker compose -f docker-compose.dev.yml push diff --git a/README.md b/README.md index 43b28be..d529d24 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,8 @@ The following dependencies are used to build and run the image. Please feel feel ### Docker for Localhost Development +#### Build Local Images + 1. Set up the environment variables for the `/client` and `/server` directories. - Visit the `client/README.md` and `server/README.md` files for more information. - Take note of the `.env` variables setup for Windows and Linux to enable hot reload. @@ -55,15 +57,41 @@ The following dependencies are used to build and run the image. Please feel feel # 5.3. Stop and remove the development containers, networks, images and volumes docker compose -f docker-compose.dev.yml down ``` -6. (Optional) To seed the container mongodb with default data: - - Create a `"/data/dump"` directory in the root project directory. - - Put binary data in the dump directory (data from `mongodump`) - - Start the development client and server containers (**# 5**) - - Run this script in another terminal (use GitBash if on Windows OS):
- ```bash - chmod u+x scripts/docker-mongo-seed.sh - ./scripts/docker-mongo-seed.sh - ``` + +#### Use Pre-Built Development Images + +This project deploys the latest **client** and **server** development Docker images to Docker Hub on the creation of new Release/Tags. They are available at: + +https://hub.docker.com/r/weaponsforge/todo-next + +1. Pull the pre-built development Docker image using any of the two (2) options: + - Open a terminal and run: + ``` + docker pull weaponsforge/todo-next:client + docker pull weaponsforge/todo-next:server + ``` + - Navigate to the gsites-components root project directory, then run: + `docker compose -f docker-compose.dev.yml pull` + +2. Set up the environment variables for the `/client` and `/server` directories. + - Visit the `client/README.md` and `server/README.md` files for more information. + - Take note of the `.env` variables setup for Windows and Linux to enable hot reload. + +3. Run the development images.
+`docker compose -f docker-compose.dev.yml up` + +#### Seed MongoDB with Default Data + +(Optional) To seed the container mongodb with default data: + +1. Create a `"/data/dump"` directory in the root project directory. +2. Put binary data in the dump directory (data from `mongodump`) +3. Start the development client and server containers (**# 5**) +4. Run this script in another terminal (use GitBash if on Windows OS):
+ ```bash + chmod u+x scripts/docker-mongo-seed.sh + ./scripts/docker-mongo-seed.sh + ``` ### Docker for Production Deployment @@ -102,6 +130,37 @@ The following docker-compose commands build a small client image targeted for cr - `docker exec -it mongorestore --host :27017 -d -u -p --authenticationDatabase /data/dump` - `docker exec -it mongodb mongorestore --host mongo:27017 -d todo-next -u admin -p secret --authenticationDatabase admin /data/dump` +## Deployment With GitHub Actions + +This project deploys the production live demo to GitHub Pages (front end) and Vercel (server). It uses MongoDB Atlas for MongoDB. The following requirements are optional. They are only required if there is a need to deploy the web application for live demonstration purposes. + +### Requirements + +1. GitHub Pages setup +2. Vercel account + - pre-configured with a [stand-alone Express server](https://vercel.com/guides/using-express-with-vercel) of the repository's **server** component +3. MongoDB Atlas database +4. Docker Hub account + - (Optional) required to push the development images to Docker Hub + +#### GitHub Secrets + +| GitHub Secrets | Description | +| --- | --- | +| NEXT_PUBLIC_BASE_PATH | Root directory path name that NextJS uses for assets, media and client-side routing for the app.

Set its value to blank `''` when working on development mode in localhost.

Set its value to the sub-directory name where the exported NextJS app is to be deployed, i.e. `/` when
deploying on a repository (sub-directory) of a root GitHub Pages site, i.e, on `https://.github.io/` | +| BASE_API_URL | Base URL of the Todo CRUD API from the `/server` directory. | +| VERCEL_ORG_ID | Vercel app's organization ID | +| VERCEL_PROJECT_ID | Vercel app's project ID | +| VERCEL_TOKEN | Vercel app's project ID | +| DOCKERHUB_USERNAME | (Optional) Docker Hub username. Required to enable pushing the development image to Docker Hub. | +| DOCKERHUB_TOKEN | (Optional) Deploy token for the Docker Hub account. Required to enable pushing the development image to the Docker Hub. | + +#### GitHub Variables + +| GitHub Variable | Description | +| --- | --- | +| DOCKERHUB_USERNAME | (Optional) Docker Hub username. Required to enable pushing the development image to Docker Hub. | + @weaponsforge
20220820
20240714 \ No newline at end of file From 6211bdbf89465e34187bfaf4184ed5c07170fda8 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 02:20:29 +0800 Subject: [PATCH 5/8] docs: update READM * add toc --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index d529d24..aec60ad 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,17 @@ todo-next is a regular TO-DO notes listing app aimed for testing using NextJS and Redux Toolkit for front-end.
It also features a simple Todo CRUD API running on an express backend and uses mongodb for storing data. +### Table of Contents + +- [Installation](#installation) +- [Installation Using Docker](#installation-using-docker) +- [Docker for Localhost Development](#docker-for-localhost-development) + - [Build Local Images](#build-local-images) + - [Use Pre-Built Development Images](#use-pre-built-development-images) + - [Seed MongoDB with Default Data](#seed-mongodb-with-default-data) + - [Docker Commands](#docker-commands) +- [Deployment With GitHub Actions](#deployment-with-gitHub-actions) + ## Installation 1. Clone this repository.
From 0779819efb8e5c1de605ddbe027c53308a7428b8 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 02:23:22 +0800 Subject: [PATCH 6/8] docs: update README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index aec60ad..3589354 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,8 @@ The following docker-compose commands build a small client image targeted for cr - `docker ps -a` - **bash into the development mongodb container**
- `docker exec -it /bin/sh` +- **inspect the contents of an image**
+ - `docker run -it --rm /bin/sh` - **bash into the development mongodb shell**
- `docker exec -it mongo -u -p :27017/ --authenticationDatabase ` - i.e. (see the .env.example and docker-compose.dev.yml files)
`docker exec -it mongodb mongo -u admin -p secret mongo:27017/todo-next --authenticationDatabase admin` @@ -174,4 +176,4 @@ This project deploys the production live demo to GitHub Pages (front end) and Ve @weaponsforge
20220820
-20240714 \ No newline at end of file +20241004 From a0410bc79d85822d8ce8ca5bc84b07e9e65fae17 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 02:27:45 +0800 Subject: [PATCH 7/8] Feat: pull the development images every 2 months --- .github/workflows/pull-images.yml | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 .github/workflows/pull-images.yml diff --git a/.github/workflows/pull-images.yml b/.github/workflows/pull-images.yml new file mode 100644 index 0000000..3b009a4 --- /dev/null +++ b/.github/workflows/pull-images.yml @@ -0,0 +1,26 @@ +# Pull the Docker images from Docker Hub on schedule +name: Pull Docker Images + +on: + schedule: + # Runs "At 00:00 on day-of-month 1 in every 2nd month." + - cron: '0 0 1 */2 *' + +jobs: + pull-images: + name: Pull Development Image + runs-on: ubuntu-latest + steps: + - name: Checkout the repository + uses: actions/checkout@v3 + + - name: Fetch and check out latest tag + run: | + git fetch --tags + LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`) + echo "Checking out latest tag: $LATEST_TAG" + git checkout $LATEST_TAG + echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_ENV + + - name: Pull Development Image + run: docker compose -f docker-compose.dev.yml pull From 7c73bcad74b4739ef410a8cdad5b879e3cce6062 Mon Sep 17 00:00:00 2001 From: weaponsforge Date: Fri, 4 Oct 2024 02:29:05 +0800 Subject: [PATCH 8/8] chore: run prod workflows only on release/tags from master branch --- .github/workflows/deploy-vercel.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/deploy-vercel.yml b/.github/workflows/deploy-vercel.yml index 2e7b652..292ffa6 100644 --- a/.github/workflows/deploy-vercel.yml +++ b/.github/workflows/deploy-vercel.yml @@ -13,6 +13,7 @@ on: jobs: lint-client: name: Lint and Export client + if: github.event.release.target_commitish == 'master' runs-on: ubuntu-latest env: NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }} @@ -50,6 +51,7 @@ jobs: lint-server: name: Lint Server + if: github.event.release.target_commitish == 'master' runs-on: ubuntu-latest steps: - name: Checkout the repository @@ -66,6 +68,7 @@ jobs: deploy-client: name: Deploy client to Github Pages + if: github.event.release.target_commitish == 'master' needs: lint-client runs-on: ubuntu-latest steps: @@ -84,6 +87,7 @@ jobs: deploy-server: name: Deploy Server to Vercel + if: github.event.release.target_commitish == 'master' needs: lint-server runs-on: ubuntu-latest env: