【Next.js】ローカル環境をSSL化してみる

ホーム
BLOG
【Next.js】
【Next.js】ローカル環境をSSL化してみる

【Next.js】
2024.08.10

【Next.js】ローカル環境をSSL化してみる

概要
前提
オレオレ証明書を作成
Docker環境に配置
コンテナを起動、閲覧確認
最後に
参考

こんにちは。今年も暑いですね🌞

自分は食欲がなくなって最近はキュウリとトマトと素麺ばかり食べていますが、バテている感じもなく元気です。

せっかくのお盆休みなのに、初日から予定がなく、初めてのNext.jsをさわっていましたｗ

そこで学んだことを記事にします。

1. 概要

Dockerで構築したWEBアプリケーションのローカル環境をSSL化したかったので挑戦してみました。

外部のAPIを使いたいとき、『httpはダメ。ゼッタイ。』と言われることがあるので、ローカル環境もSSL化してみます。

2. 前提

WSL2 + Docker
Next.jsアプリを作成済み

3. オレオレ証明書を作成

# key.pemとcert.pemを作成
$ openssl req -nodes -new -x509 -keyout key.pem -out cert.pem -days 365

4. Docker環境に配置

4-1. ファイル構造

# tree
.
├── docker
│   ├── Dockerfile
│   ├── cert.pem
│   ├── docker-compose.yml
│   └── key.pem
├── html
|   ├──(Next.jsアプリケーションのソースコード)
|   ├──server.js

4-2. ./docker/docker-compose.yml

version: '3.8'

services:
  app:
    build: .
    volumes:
      - ../html:/html
    environment:
      - WATCHPACK_POLLING=true
    ports:
      - "443:443" # httpsのポートは443
      # - "3000:3000"
    tty: true

4-3. ./docker/Dockerfile

FROM node

# SSL証明書を適用
WORKDIR /html
COPY ./key.pem /etc/ssl
COPY ./cert.pem /etc/ssl
CMD ["node", "server.js"]

4-4. ./html/server.js

const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

// DockerfileでCOPYしたパス
const httpsOptions = {
  key: fs.readFileSync('/etc/ssl/key.pem'),
  cert: fs.readFileSync('/etc/ssl/cert.pem'),
};

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(443, (err) => {
    if (err) throw err;
    console.log('> Ready on https://localhost:443');
  });
});

5. コンテナを起動、閲覧確認

# コンテナをビルドして起動
$ docker compose up -d -build
# コンテナへ入る
$ docker compose app bash
# サーバーを起動
$ npm run dev

# PCの場合
# https://localhost:443
# スマホの場合（自分の環境の場合）
# https://192.168.3.2:443