How to apply SSL certificates to local environment with webpack

One of the subtle annoyances in serverless development is CORS issues. Even if the cookie is properly returned from API Gateway, it might not be reflected in the browser, but there are no problems after deploying to AWS. This happens quite often.

The cause is usually CORS. Since I want to develop serverless smoothly, here’s a note on how to apply SSL certificates to your local environment.

I’ll use mkcert.

Environment

node.js
- v12.15.0
macOS Catalina
- 10.15.5

Install

% brew install mkcert

Issue SSL certificate

It seems you can also use wildcards, but for AWS deployments, you can set the domain per environment, so I won’t set anything special here.

Run the following command to generate the certificate in your current directory.

The key point is the domain name. If you use something other than localhost (like test.com), you might run into errors with webpack-dev-server settings, so for development, just use localhost.

% mkcert localhost

Set up SSL certificate

webpack-dev-server

If you’re building with webpack, you probably already have environment-specific settings, so I’ll proceed on that assumption.

If you don’t know how, refer to this: How to create a static site layout with webpack

First, add the certificate settings to your webpack.development.js file, which should already have your local development environment settings.

devServer: {
	host: 'localhost',
	port: 8080,
	https: {
		https: true,
		key: fs.readFileSync('./localhost-key.pem'),
		cert: fs.readFileSync('./localhost.pem'),
		ca: fs.readFileSync('/Users/username/Library/Application Support/mkcert/rootCA.pem'),
	}
}

That’s all. Now just access https://localhost and it should be SSL certified.

Serverless Local Development is Still Evolving

Serverless local development is still evolving. While it’s relatively easy to set up HTTPS for a local development environment, whether it’s actually useful is another question.

This is because most serverless applications are structured with static sites hosted on S3 that then use API Gateway, so CORS issues often don’t occur in production environments.

It’s inefficient to write code that handles CORS issues locally when these problems don’t exist in production.

After looking at various online resources and talking to people at AWS, the current best practice seems to be giving developers AWS accounts with minimal permissions, allowing them to develop in an environment that’s very close to production.

Developers typically verify their code responses locally using tools like POSTMAN, then deploy to confirm everything works in the production environment as well, repeating this process throughout development.

In practice, while serverless development is initially much slower than using frameworks like Rails, once you get used to it, serverless development becomes faster, and the biggest advantage is not having to manage servers afterward.

I guess this is how AWS keeps us locked in…