From 65dede9c29664e4f2fa35a4954f0c82465074dbb Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 01:54:46 +0800 Subject: [PATCH 01/11] fix: nextjs hydration running in container, #53 * for windows wsl2 --- docker-compose.dev.yml | 1 - docker-compose.prod.yml | 1 - docs/next.config.js | 10 ++++++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 7568bac4..90a78d4e 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -1,4 +1,3 @@ -version: "3" services: # NextJS v13 app running on development mode acaptutorials.github.io-dev: diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index e43183c1..eb365112 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -1,4 +1,3 @@ -version: "3" services: # NextJS exported app running on an nginx webserver acaptutorials.github.io-prod: diff --git a/docs/next.config.js b/docs/next.config.js index 8309f04a..9e752c24 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -4,6 +4,16 @@ const withNextra = require('nextra')({ }) module.exports = withNextra({ + // Hydration fix: WATCHPACK_POLLING + config if running in Docker and Windows WSL2 + ...(process.env.WATCHPACK_POLLING && { + webpackDevMiddleware: config => { + config.watchOptions = { + poll: 1000, + aggregateTimeout: 300, + } + return config + } + }), reactStrictMode: true, trailingSlash: true, output: 'export', From e311f3b4727fb14d995572485afe199a4548350e Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 02:58:46 +0800 Subject: [PATCH 02/11] feat: deploy development image to docker hub, #54 --- .github/workflows/deploy-dockerhub.yml | 37 ++++++++++++++++++ README.md | 52 ++++++++++++++++++++++---- 2 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 .github/workflows/deploy-dockerhub.yml diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml new file mode 100644 index 00000000..833cc714 --- /dev/null +++ b/.github/workflows/deploy-dockerhub.yml @@ -0,0 +1,37 @@ +# Deploy the development image to Docker Hub +name: Push to Docker Hub + +on: + release: + types: [published] + push: + branches: + - feat/acaptutorials-54 + +jobs: + docker-build-push: + name: Development Image to Dockerhub + if: | + github.event.release.target_commitish == 'master' && + secrets.DOCKERHUB_USERNAME != '' + 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 docs/.env.example docs/.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 9d17d8da..02494740 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,16 @@ The app depends these libraries and frameworks. - React v18.3.1 - TailwindCSS v3.4.7 +### Table of Contents + +- [Requirements](#requirements) +- [Installation](#installation) +- [Usage](#usage) +- [Available Scripts](#available-scripts) +- [Usage with Docker](#usage-with-docker) +- [Usage with GitHub Actions](#usage-with-gitHub-actions) +- [Deployment to Docker Hub](#deployment-to-docker-hub) + ## Installation 1. Clone this repository.
@@ -68,14 +78,6 @@ The app depends these libraries and frameworks. 3. Add or edit MDX files in the `/pages` directory, or add React components in the `/components` directory. - View the [**nextra**](https://nextra.site/docs) (docs-theme) documentation for more information on using nextra to add content. -## Usage with GitHub Actions - -1. Add the environment variables described in the [Installation - step # 2](#installation) section to GitHub Secrets. -2. Create a Release to deploy the site to the production environment (GitHub Pages). -3. To update the banner content while there are no code or content updates: - - Update the GitHub Secrets: `RELEASE_VERSION`, `COMMIT_ID` and `RELEASE_PAGE` - - Re-deploy the latest production environment workflow from the GitHub Actions tab. - ## Available Scripts @@ -95,5 +97,39 @@ Checks lint errors. Fixes lint errors. +## Usage with Docker + +Usage with Docker is an alternate option to using Node directly from the [Usage](#usage) section. + +1. Pull the development Docker image from Docker Hub using one of the options.
+ - `docker pull acaptutorials/acaptutorials.github.io:dev` + - `docker compose -f docker-compose.dev.yml pull` (using Docker compose from the root project directory) + +2. Navigate to the project directory using the command line. Create a `.env` file inside the **/docs** directory with reference to the `.env.example` file. + - See [Usage](#usage) - **step # 2** for more information. + +3. Run the development Docker image.
+`docker compose -f docker-compose.dev.yml up` + +4. (Optional) Run the development Docker image (from other directories).
+`docker run -it --rm -p 3000:3000 acaptutorials.github.io:dev` + +## Usage with GitHub Actions + +1. Add the environment variables described in the [Installation - step # 2](#installation) section to GitHub Secrets. +2. Create a Release to deploy the site to the production environment (GitHub Pages). +3. To update the banner content while there are no code or content updates: + - Update the GitHub Secrets: `RELEASE_VERSION`, `COMMIT_ID` and `RELEASE_PAGE` + - Re-deploy the latest production environment workflow from the GitHub Actions tab. + +### Deployment to Docker Hub + +This repository deploys the latest development Docker image `acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets to enable deployment to Docker Hub. It requires a Docker Hub account. + +| GitHub Secret | Description | +| --- | --- | +| DOCKERHUB_USERNAME | Docker Hub username | +| DOCKERHUB_TOKEN | Deploy token for the Docker Hub account | + @acaptutorials
20240806 From 755d94af2df1cdbbbf0423e662d73f2a1367b495 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:04:28 +0800 Subject: [PATCH 03/11] fix: gh secrets in condition --- .github/workflows/deploy-dockerhub.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index 833cc714..7956b04d 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -13,7 +13,7 @@ jobs: name: Development Image to Dockerhub if: | github.event.release.target_commitish == 'master' && - secrets.DOCKERHUB_USERNAME != '' + ${{ secrets.DOCKERHUB_USERNAME }} != '' runs-on: ubuntu-latest steps: - name: Login to Docker Hub From 37e21ec89e807c2d6f283f16ee116f706488da08 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:05:44 +0800 Subject: [PATCH 04/11] fix: if condition in one line --- .github/workflows/deploy-dockerhub.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index 7956b04d..22b26046 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -11,9 +11,7 @@ on: jobs: docker-build-push: name: Development Image to Dockerhub - if: | - github.event.release.target_commitish == 'master' && - ${{ secrets.DOCKERHUB_USERNAME }} != '' + if: github.event.release.target_commitish == 'master' && secrets.DOCKERHUB_USERNAME != '' runs-on: ubuntu-latest steps: - name: Login to Docker Hub From dba7d932e832ac14500e2b84bcd4ea1288ab5959 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:09:21 +0800 Subject: [PATCH 05/11] fix: secret to env --- .github/workflows/deploy-dockerhub.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index 22b26046..17b5746e 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -8,10 +8,13 @@ on: branches: - feat/acaptutorials-54 +env: + DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }} + jobs: docker-build-push: name: Development Image to Dockerhub - if: github.event.release.target_commitish == 'master' && secrets.DOCKERHUB_USERNAME != '' + if: github.event.release.target_commitish == 'master' && env.DOCKERHUB_USERNAME != '' runs-on: ubuntu-latest steps: - name: Login to Docker Hub From 62ca9e07231192a14978b7d2ea2ff6aacb5899f6 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:12:54 +0800 Subject: [PATCH 06/11] fix: use github variable --- .github/workflows/deploy-dockerhub.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index 17b5746e..13749ece 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -8,13 +8,10 @@ on: branches: - feat/acaptutorials-54 -env: - DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }} - jobs: docker-build-push: name: Development Image to Dockerhub - if: github.event.release.target_commitish == 'master' && env.DOCKERHUB_USERNAME != '' + if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' runs-on: ubuntu-latest steps: - name: Login to Docker Hub From 33c3a10b6a77f8c103b004d7ac7337205c3bae14 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:14:26 +0800 Subject: [PATCH 07/11] chore: test deployment to dockerhub --- .github/workflows/deploy-dockerhub.yml | 3 ++- README.md | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index 13749ece..fc5c7785 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -11,7 +11,8 @@ on: jobs: docker-build-push: name: Development Image to Dockerhub - if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' + # if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' + if: vars.DOCKERHUB_USERNAME != '' runs-on: ubuntu-latest steps: - name: Login to Docker Hub diff --git a/README.md b/README.md index 02494740..cb9afdd7 100644 --- a/README.md +++ b/README.md @@ -124,12 +124,16 @@ Usage with Docker is an alternate option to using Node directly from the [Usage] ### Deployment to Docker Hub -This repository deploys the latest development Docker image `acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets to enable deployment to Docker Hub. It requires a Docker Hub account. +This repository deploys the latest development Docker image `acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets and Variable to enable deployment to Docker Hub. It requires a Docker Hub account. | GitHub Secret | Description | | --- | --- | | DOCKERHUB_USERNAME | Docker Hub username | | DOCKERHUB_TOKEN | Deploy token for the Docker Hub account | +| GitHub Variable | Description | +| --- | --- | +| DOCKERHUB_USERNAME | Docker Hub username | + @acaptutorials
20240806 From b36cfc3331912d407698583c331c63f2ca14130a Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 03:52:37 +0800 Subject: [PATCH 08/11] chore: update image name --- .github/workflows/deploy-dockerhub.yml | 4 ++-- README.md | 4 ++-- docker-compose.dev.yml | 4 ++-- docker-compose.prod.yml | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml index fc5c7785..aaaf2a39 100644 --- a/.github/workflows/deploy-dockerhub.yml +++ b/.github/workflows/deploy-dockerhub.yml @@ -23,8 +23,8 @@ jobs: - name: Checkout the repository uses: actions/checkout@v3 - with: - ref: ${{ github.event.release.tag_name }} + # with: + # ref: ${{ github.event.release.tag_name }} - name: Create env variables run: cp docs/.env.example docs/.env diff --git a/README.md b/README.md index cb9afdd7..17041c6d 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ Usage with Docker is an alternate option to using Node directly from the [Usage] `docker compose -f docker-compose.dev.yml up` 4. (Optional) Run the development Docker image (from other directories).
-`docker run -it --rm -p 3000:3000 acaptutorials.github.io:dev` +`docker run -it --rm -p 3000:3000 acaptutorials/acaptutorials.github.io:dev` ## Usage with GitHub Actions @@ -124,7 +124,7 @@ Usage with Docker is an alternate option to using Node directly from the [Usage] ### Deployment to Docker Hub -This repository deploys the latest development Docker image `acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets and Variable to enable deployment to Docker Hub. It requires a Docker Hub account. +This repository deploys the latest development Docker image `acaptutorials/acaptutorials.github.io:dev` to Docker Hub on the creation of new Tags/Releases with GitHub Actions. Supply the following GitHub Secrets and Variable to enable deployment to Docker Hub. It requires a Docker Hub account. | GitHub Secret | Description | | --- | --- | diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 90a78d4e..834af6ed 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -1,8 +1,8 @@ services: # NextJS v13 app running on development mode acaptutorials.github.io-dev: - container_name: acaptutorials.github.io-dev - image: acaptutorials.github.io:dev + container_name: acaptutorials-docs-dev + image: acaptutorials/acaptutorials.github.io:dev env_file: - ./docs/.env build: diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index eb365112..53c1831e 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -1,8 +1,8 @@ services: # NextJS exported app running on an nginx webserver acaptutorials.github.io-prod: - container_name: acaptutorials.github.io-prod - image: acaptutorials.github.io:prod + container_name: acaptutorials-docs-prod + image: acaptutorials/acaptutorials.github.io:prod restart: always env_file: - ./docs/.env From cab4ff10a706a6258d1a67a4d09028dc7ed27e48 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 04:04:20 +0800 Subject: [PATCH 09/11] chore: run prod deploy on releases/tag from master --- .github/workflows/deploy-prod.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml index 4614caa7..61591d92 100644 --- a/.github/workflows/deploy-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -9,6 +9,7 @@ on: jobs: lint-export-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 }} @@ -51,6 +52,7 @@ jobs: deploy-client: name: Deploy client to Github Pages + if: github.event.release.target_commitish == 'master' needs: lint-export-client runs-on: ubuntu-latest steps: From ed10ce281a22c5dca804409e8f259b5d4b82085e Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 04:09:59 +0800 Subject: [PATCH 10/11] feat: push to docker hub on prod workflow, #54 --- .github/workflows/deploy-dockerhub.yml | 36 -------------------------- .github/workflows/deploy-prod.yml | 26 +++++++++++++++++++ README.md | 13 ++++++++++ 3 files changed, 39 insertions(+), 36 deletions(-) delete mode 100644 .github/workflows/deploy-dockerhub.yml diff --git a/.github/workflows/deploy-dockerhub.yml b/.github/workflows/deploy-dockerhub.yml deleted file mode 100644 index aaaf2a39..00000000 --- a/.github/workflows/deploy-dockerhub.yml +++ /dev/null @@ -1,36 +0,0 @@ -# Deploy the development image to Docker Hub -name: Push to Docker Hub - -on: - release: - types: [published] - push: - branches: - - feat/acaptutorials-54 - -jobs: - docker-build-push: - name: Development Image to Dockerhub - # if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' - if: vars.DOCKERHUB_USERNAME != '' - 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 docs/.env.example docs/.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/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml index 61591d92..60bd61d2 100644 --- a/.github/workflows/deploy-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -68,3 +68,29 @@ jobs: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./ publish_branch: gh-pages + + docker-build-push: + name: Development Image to Dockerhub + if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' + needs: deploy-client + 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 docs/.env.example docs/.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 17041c6d..c9406634 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,8 @@ Fixes lint errors. Usage with Docker is an alternate option to using Node directly from the [Usage](#usage) section. +### Use Pre-Built Development Docker Image + 1. Pull the development Docker image from Docker Hub using one of the options.
- `docker pull acaptutorials/acaptutorials.github.io:dev` - `docker compose -f docker-compose.dev.yml pull` (using Docker compose from the root project directory) @@ -114,6 +116,17 @@ Usage with Docker is an alternate option to using Node directly from the [Usage] 4. (Optional) Run the development Docker image (from other directories).
`docker run -it --rm -p 3000:3000 acaptutorials/acaptutorials.github.io:dev` +### Build the Development Docker Image + +1. Build the development Docker image on your machine.
+`docker compose -f docker-compose.dev.yml build` + +2. Navigate to the project directory using the command line. Create a `.env` file inside the **/docs** directory with reference to the `.env.example` file. + - See [Usage](#usage) - **step # 2** for more information. + +3. Run the development Docker image.
+`docker compose -f docker-compose.dev.yml up` + ## Usage with GitHub Actions 1. Add the environment variables described in the [Installation - step # 2](#installation) section to GitHub Secrets. From b1cd4b7163796e48eaedbc9a9f69dedfd662fe45 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Tue, 1 Oct 2024 04:17:12 +0800 Subject: [PATCH 11/11] fix: change target_commitish to 'main' --- .github/workflows/deploy-prod.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml index 60bd61d2..59f282ec 100644 --- a/.github/workflows/deploy-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -9,7 +9,7 @@ on: jobs: lint-export-client: name: Lint and Export client - if: github.event.release.target_commitish == 'master' + if: github.event.release.target_commitish == 'main' runs-on: ubuntu-latest env: NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }} @@ -52,7 +52,7 @@ jobs: deploy-client: name: Deploy client to Github Pages - if: github.event.release.target_commitish == 'master' + if: github.event.release.target_commitish == 'main' needs: lint-export-client runs-on: ubuntu-latest steps: @@ -71,7 +71,7 @@ jobs: docker-build-push: name: Development Image to Dockerhub - if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' + if: github.event.release.target_commitish == 'main' && vars.DOCKERHUB_USERNAME != '' needs: deploy-client runs-on: ubuntu-latest steps: