Astro の開発サーバーで HTTPS を利用する#

Astro の設定ファイル（基本）#

Astro の公式ドキュメント「設定方法」: https://docs.astro.build/ja/reference/configuration-reference/ も参照。

プロジェクトのルートディレクトリに astro.config.mjs を配置する。ファイルの書き方は、

import { defineConfig } from 'astro/config'

export default defineConfig({
    // 設定項目をここに追加します
})

のようにする。

HTTPS サーバーのための準備#

まず、openssl コマンドで

• 秘密鍵ファイル（key.pem）

• 証明書ファイル（cert.pem）

の２つを作成します。

ターミナルで、

openssl req -newkey rsa:4096 -new -nodes -x509 -days 365 -keyout key.pem -out cert.pem

を実行して、各ファイルを生成します。この例では、証明書の有効期限は発行から 365 日間です。

（注意）Astro プロジェクトを Git のリモートリポジトリで管理している場合#

GitHub 等でプロジェクトを管理している場合、プロジェクトの .gitignore に key.pem と cert.pem を追加して、これらのファイルがリモートで共有されるのを防止するのをおすすめします。

key.pem
cert.pem

必要な設定項目#

Astro は Vite を利用しているため、astro.config.mjs に Vite の設定を含めることができます。

以下の設定を追加することで、 Astro の開発サーバーで HTTPS を使うことができます。

import fs from 'node:fs'

...

{
    vite: {
        https: {
            key: fs.readFileSync('key.pem'),
            cert: fs.readFileSync('cert.pem')
        }
    }
}

Vite の公式ドキュメント「サーバーオプション」: https://ja.vitejs.dev/config/server-options.html も参照。

astro dev で開発サーバーを立ち上げた後、https://localhost:4321/ にアクセスして確認してください。

（おまけ）外部に IP アドレスを公開する#

以下の設定を追加することで、 Astro の開発サーバーに外部からアクセスできます。

{
    server: { host: true }
}

（おまけ）カスタムの HTTP ヘッダーを設定する#

以下のような設定を追加することで、 Astro の開発サーバーにカスタムの HTTP ヘッダーを設定できます。

{
    server: {
        header: {
            "Access-Control-Allow-Origin": "*",
            // "Cross-Origin-Opener-Policy": "same-origin",
            // "Cross-Origin-Embedder-Policy": "require-corp"
        }
    }
}

Astro の設定ファイル（最終）#

最終的な astro.config.mjs は以下のようになります:

import fs from 'node:fs'
import { defineConfig } from 'astro/config'

export default defineConfig({
    vite: {
        https: {
            key: fs.readFileSync('key.pem'),
            cert: fs.readFileSync('cert.pem')
        }
    },
    server: {
        host: true,
        header: {
            "Access-Control-Allow-Origin": "*",
            // "Cross-Origin-Opener-Policy": "same-origin",
            // "Cross-Origin-Embedder-Policy": "require-corp"
        }
    }
})

参考文献#

• Astro の公式ドキュメント: https://docs.astro.build/ja/getting-started/

• Vite の公式ドキュメント: https://ja.vitejs.dev/config/