shou2017.com
JP / EN

webpack、ローカル環境にSSL証明書を適用させる方法

Tue Aug 4, 2020
Sat Aug 10, 2024
JavaScript

サーバーレスの開発で地味に面倒なのがCORSの問題。api gatewayからちゃんとヘッダーにcookieが返ってきているのにブラウザに反映されてなくて、AWS環境にデプロイしたら問題ない。なんていうこともしばしば発生します。

原因はだいたい、このCORSのせい。せっかくのサーバーレス開発、スムーズに開発したいので、ローカル環境にssl証明書を適用する方法のメモです。

使用するのはmkcertです。

環境

  • node.js
    • v12.15.0
  • macOS Catalina
    • 10.15.5

インストール

% brew install mkcert

SSL証明書を発行

ワイルドカードもいけるみたいですが、awsのデブロイは環境別にドメインを設定できたりするので特に設定しません。

以下のコマンドを実行し、証明書をカレントディレクトリに生成します。

肝心なドメイン名ですがlocalhost以外の例えばtest.comなどにした場合、webpack-dev-serverでの設定方法が不明でエラーに遭遇したので、まぁ、開発環境だしということで大人しくlocalhostしました。

% mkcert localhost

SSL証明書を設置

webpack-dev-server

webpackで構築している場合は、環境別にすでに設定してあると思うので、そのつもりで進めます。

わからない場合は、こちらwebpackで静的サイトのレイアウトをつくる

まず、ローカルの開発環境設定が書かれているwebpack.development.jsに証明書の設定を以下のようにします。

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

これで終わりです。あとはhttps://localhostにアクセスすればssl証明されたやつになっているはずです。

サーバーレスのローカル環境開発はまだ発展途上

サーバーレスのローカル環境開発はまだ発展途上です。ローカル開発環境をhttps化することはわりかし簡単ですけど、これが役にたつかと言うをあまり役に立たない。

なぜなら、だいたいのサーバーレスのアプリの構成は静的サイトをs3にセットして、そこからapi gatewayを使うみたいなのが多いので、そもそもCORSの問題が本番の環境では発生しない。

本番ではcrosの問題が発生しないのにわざわざローカルでcros対応でコードを書くのはムダ。

いろいろネットの情報をみたり、awsの中の人にも聞いたりしたが今現在では、開発者にawsの権限を最小にしたアカウントを発行して、もうほぼ本番に近い形で開発してもらうのが今のところのベストな方法。

開発者は作ったコードをPOSTMANなりを使ってローカルでレスポンスを確認して、確認したら、実際にデプロイして本番環境でも確認するみたいな作業を繰り返す感じ。

実際、サーバーレスで開発してますが、初期はrailsなどのフレームワークを使うより圧倒的に開発速度は遅いですが、慣れてしまえばサーバーレスの方が開発は早くなるし、何よりその後のサーバー管理をしなくていいのは魅力的です。

まぁ、こうやってawsから抜けられなくなるんでしょうね。。。

Tags
Webpack
See Also