Merge pull request #292 from xwp/working-local-ssl

Add support for working SSL certificate using mkcert

Author: Nikschavan

.gitignore

@@ -24,3 +24,6 @@
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+# Ignore Jetbrains IDE files
+.idea/

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:

local/certs/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

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-*",

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 [email protected] composer node@18 mkcert
+	brew install git [email protected] 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 [email protected]:wpcomvip/devgo-vip.git
+		git clone [email protected]: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
+
+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.
 
-5. Install the local WordPress multisite environment:
+6. Install 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`.
+7. Visit [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.
+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.
 
@@ -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 🚀