Next.jsで制作したアプリケーションをデプロイし、カスタムドメイン設定を行ったところ少々躓いたのでメモを残しておきます。
何を実現したかったのか
Google App EngineにNext.jsでビルドしたアプリケーションをデプロイしてカスタムドメインを設定したかった。Cloudflareを用いてSSL化を実現したかった。
例： https://exmaple.com/ を叩くとGoogle App Engineにデプロイされたアプリケーションが動くようにしたかった。
何が起こったのか。
GAE側のカスタムドメインで指定されたDNSレコードをCloudflareで設定して、 https://example.com/ にアクセスしたところ、上記のような表示がされました。
Error 525
SSL handshake failed
これを解決するためには、Cloudflare側で発行元専用（今回はGAE用）にSSL証明書を発行する必要がありました。
Cloudflareで配信元証明書を発行する
Cloudflareのサイトにアクセスをして、
「SSL/TLS」→「配信元サーバー」→「証明書を作成」
をクリックします。
「配信元証明書のインストール」というモーダルが出現します。
「CloudflareにプライベートキーとCSRを作成させます」を選択し、「RSA」をプライベートキーの種類として指定します。
「次へ」をクリックします。
「配信元証明書のインストール」という画面に切り替わります。
※「キーフォーマット」は変更せず、「PEM」のままにしておきましょう。
発行された「配信元証明書」と「プライベートキー」を使用するために、先の作業に進みましょう。
秘密鍵をGAEで使えるようにする
Cloudflareから発行された「プライベートキー」はそのまま使用することができません。
（上記のように「選択した秘密鍵は有効ではないようです。」と注意書きが表示されてしまいます...）
これを回避するためには、OpenSSLのコマンドを使用して変換する必要があります。
秘密鍵を変換する
Cloudflareから発行された「プライベートキー」を秀丸等で新規ファイルを作成します。保存名は何でも良いですが、今回は「example.com.key」としました。
そして、OpenSSLコマンドを実行しましょう。
openssl rsa -in example.com.key -out example.com.nopass.key
実行すると「example.com.nopass.key」というキーファイルが出現します。
ここまで来れば準備は完了です。
GAEに証明書を設定する
Google App Engineのページへアクセスし、「設定」→「SSL証明書」→「新しい証明書をアップロード」をクリックします。
「PEM でエンコードされた X.509 公開鍵証明書」にはCloudflareから発行された「配信元証明書」を貼り付けします。
「復号化された PEM でエンコードされた RSA 秘密鍵」にはOpenSSLで変換したキーの中身（秀丸等で開けます）を貼り付けします。
「アップロード」を押して証明書を追加します。
証明書を適用する
対象のカスタムドメインを選択して「保存」をクリックします。
確認して完了！
それではサイトにアクセスしてみましょう。
正しく設定できていれば、5分以内には表示されるはずです。
※いつになっても問題解決できなければ、一度シークレットウィンドウでアクセスしてみると良いかもしれません。キャッシュが原因かも？