Skip to content

Commit

Permalink
Add support for working SSL certificate using mkcert
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikschavan committed Jul 16, 2024
1 parent a5bdc3c commit d3e7b1a
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 9 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@
.Trashes
ehthumbs.db
Thumbs.db

# Ignore Jetbrains IDE files
.idea/
6 changes: 3 additions & 3 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -112,6 +113,5 @@ services:

volumes:
db_data:
cert_data:
webgrind_data:
elasticsearch_data:
2 changes: 2 additions & 0 deletions local/certs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
*
!.gitignore
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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-*",
Expand Down
18 changes: 12 additions & 6 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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


Expand Down Expand Up @@ -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:

Expand All @@ -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.

Expand Down Expand Up @@ -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 🚀

Expand Down

0 comments on commit d3e7b1a

Please sign in to comment.