From d3e7b1a413bb8fbd2063b3437ba84dae335fe55e Mon Sep 17 00:00:00 2001 From: Nikhil Date: Wed, 17 Jul 2024 00:09:06 +0530 Subject: [PATCH 1/2] Add support for working SSL certificate using mkcert --- .gitignore | 3 +++ docker-compose.yml | 6 +++--- local/certs/.gitignore | 2 ++ package.json | 1 + readme.md | 18 ++++++++++++------ 5 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 local/certs/.gitignore diff --git a/.gitignore b/.gitignore index aef81690..8ac03d49 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,6 @@ .Trashes ehthumbs.db Thumbs.db + +# Ignore Jetbrains IDE files +.idea/ diff --git a/docker-compose.yml b/docker-compose.yml index c442d2b9..494da6d5 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -11,7 +11,7 @@ services: - "80:80" - "443:443" volumes: - - cert_data:/etc/nginx/certs + - ./local/certs:/etc/nginx/certs - /var/run/docker.sock:/tmp/docker.sock:ro - ./local/docker/nginx-proxy/conf.d/custom.conf:/etc/nginx/conf.d/custom.conf @@ -31,9 +31,10 @@ services: image: ghcr.io/xwp/vip-site-template--mkcert:1.0.0 build: ./local/docker/mkcert volumes: - - cert_data:/root/.local/share/mkcert + - ./local/certs:/root/.local/share/mkcert command: sh -c 'test -f "${DEV_URL:-local.wpenv.net}.crt" || mkcert -cert-file "${DEV_URL:-local.wpenv.net}.crt" -key-file "${DEV_URL:-local.wpenv.net}.key" "${DEV_URL:-local.wpenv.net}" "*.${DEV_URL:-local.wpenv.net}"' + # Sync VIP MySQL container and it's configurations - https://github.com/Automattic/vip-cli/blob/549a45a37bc254a39dba9ed23ac88174a35aa1da/assets/dev-env.lando.template.yml.ejs#L74-L75 db: image: mysql:8.0 @@ -112,6 +113,5 @@ services: volumes: db_data: - cert_data: webgrind_data: elasticsearch_data: diff --git a/local/certs/.gitignore b/local/certs/.gitignore new file mode 100644 index 00000000..d6b7ef32 --- /dev/null +++ b/local/certs/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore diff --git a/package.json b/package.json index 66396786..5a03436f 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "node": "^18" }, "scripts": { + "install-cert": "CAROOT=./local/certs mkcert -install", "preinstall": "composer install", "prepare": "git config core.hooksPath ./local/git-hooks", "lint": "npm-run-all lint-*", diff --git a/readme.md b/readme.md index cc66f6ca..83d84761 100644 --- a/readme.md +++ b/readme.md @@ -32,7 +32,7 @@ Site setup, development environment and deploy tooling for [WordPress VIP](https We suggest using [Homebrew](https://brew.sh) on macOS or [Chocolatey](https://chocolatey.org) for Windows to install the project dependencies. - brew install git php@8.2 composer node@18 mkcert + brew install git php@8.2 composer node@18 mkcert nss brew install --cask docker @@ -99,7 +99,7 @@ Consider using a dedicated GitHub [machine user](https://docs.github.com/en/get- 1. Clone this repository: - git clone git@github.com:wpcomvip/devgo-vip.git + git clone git@github.com:xwp/vip-site-template.git devgo-vip 2. Move into the project directory: @@ -109,21 +109,25 @@ Consider using a dedicated GitHub [machine user](https://docs.github.com/en/get- npm install -4. Start the development environment using Docker: +4. Install ssl certificate to add the certificate authority of the development environment [`local/data/mkcert/rootCA.pem`](local/data/mkcert/rootCA.pem) to the trusted list on your computer. Alternatively, [configure it manually](https://support.apple.com/guide/keychain-access/add-certificates-to-a-keychain-kyca2431/mac). + + npm run install-cert + +5Start the development environment using Docker: npm run start and `npm run stop` to stop the virtual environment at any time. Run `npm run start-debug` to start the environment in debug mode where all output from containers is displayed. Run `npm run stop-all` to stop all active Docker containers in case you're running into port conflicts. -5. Install the local WordPress multisite environment: +6Install the local WordPress multisite environment: npm run setup with the configuration from `local/public/wp-cli.yml`. -6. Visit [local.wpenv.net](https://local.wpenv.net) to view the development environment. WordPress username `devgo` and password `devgo`. +7Visit [local.wpenv.net](https://local.wpenv.net) to view the development environment. WordPress username `devgo` and password `devgo`. -7. Visit [mail.local.wpenv.net](https://mail.local.wpenv.net) to view all emails sent by WordPress. +8Visit [mail.local.wpenv.net](https://mail.local.wpenv.net) to view all emails sent by WordPress. The local development environment uses a self-signed SSL sertificate for HTTPS so the "Your connection is not private" error can be ignored to visit the site. @@ -199,6 +203,8 @@ We use `npm` as the canonical task runner for things like linting files and crea - `npm run vip` to run [VIP CLI](https://wpvip.com/documentation/vip-go/vip-cli/) commands on staging and production environments. +- `npm run install-cert` to mark the self-signed SSL certificate authority (under [`local/certs/rootCA.pem`](local/certs/rootCA.pem)) for the local development environment as trusted. Make sure [`mkcert` is installed on your computer](#install-dependencies). This command is required to avoid the "Your connection is not private" error when visiting the site. Stop the local environment before running this command and restart the browser/tab after installing the certificate and starting the environment again. + ## Deployments 🚀 From ab65390680df7ebed4efa05b3b077c69ba83b245 Mon Sep 17 00:00:00 2001 From: Nikhil Date: Wed, 17 Jul 2024 00:11:22 +0530 Subject: [PATCH 2/2] Update readme --- readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 83d84761..72a0af25 100644 --- a/readme.md +++ b/readme.md @@ -113,21 +113,21 @@ Consider using a dedicated GitHub [machine user](https://docs.github.com/en/get- npm run install-cert -5Start the development environment using Docker: +5. Start the development environment using Docker: npm run start and `npm run stop` to stop the virtual environment at any time. Run `npm run start-debug` to start the environment in debug mode where all output from containers is displayed. Run `npm run stop-all` to stop all active Docker containers in case you're running into port conflicts. -6Install the local WordPress multisite environment: +6. Install the local WordPress multisite environment: npm run setup with the configuration from `local/public/wp-cli.yml`. -7Visit [local.wpenv.net](https://local.wpenv.net) to view the development environment. WordPress username `devgo` and password `devgo`. +7. Visit [local.wpenv.net](https://local.wpenv.net) to view the development environment. WordPress username `devgo` and password `devgo`. -8Visit [mail.local.wpenv.net](https://mail.local.wpenv.net) to view all emails sent by WordPress. +8. Visit [mail.local.wpenv.net](https://mail.local.wpenv.net) to view all emails sent by WordPress. The local development environment uses a self-signed SSL sertificate for HTTPS so the "Your connection is not private" error can be ignored to visit the site.