0

HTTPS を使用し、React アプリをサーバーする ExpressJS でサーバーをセットアップしようとしています。HTTP リクエストを HTTPS を使用してリダイレクトする必要があります。

追加の制約: React ルーターを使用しているため、サーバーはそれを処理できる必要があります。たとえば、 をリクエストした場合localhost:3000/profile、React Router にそれを処理してもらいたいのですがindex.html、localhost:3000.

問題: HTTPS をセットアップできたと思います (Chrome は文句を言いますが、今のところ気にしません) が、リダイレクトを機能させることができません。

比較のために、これは開発用に HTTP 専用サーバーをセットアップする方法のコードです (HTTPS をセットアップしようとする前に)。

const express = require('express');
const http = require('http');
const path = require('path');
const app = express();

const DIST_DIR = path.resolve('./dist');
app.use(express.static(DIST_DIR));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(DIST_DIR, './index.html'));
});

const devServer = http.createServer(app);
devServer.listen(3000);

次に、このガイドから始めました。自己署名 SSL 証明書を作成し、アプリケーションをセットアップしました。次に、この質問など、リダイレクト方法の例をいくつか見ました。

ただし、機能していないようです。

現在の私のコードは次のとおりです。

app.use(express.static(DIST_DIR));

app.use((req, res, next) => {
    if (req.secure) {
        next();
    } else {
        res.redirect(`https://${req.headers.host}${req.url}`);
    }
});

app.get('*', (req, res) => {
    res.sendFile(path.resolve(DIST_DIR, './index.html'));
});

const httpServer = http.createServer(app);
httpServer.listen(3080);

const privateKey = // uses FS to get my key
const certificate = // uses FS to get my cert
const credentials = { key: privateKey, cert: certificate };
const httpsServer = https.createServer(credentials, app);
httpsServer.listen(3443);

https://localhost:3443期待どおりにアプリにアクセスしてナビゲートでき、Express は のようなページの更新を適切に処理します/profile。偉大な。Chrome は「CA ルート証明書が信頼されていません。この証明書を信頼されたルート証明機関ストアにインストールしてください」と不平を言いますが、実際の運用環境では証明書とキーが提供されるため、それを解決する作業は行っていません。信頼できるソースから。

しかし、 に行くとhttp://localhost:3080に行き着くだけhttp://localhost:3080です。Chrome devtools は、HTTPS を使用していないことを示しています。/profileさらに、 Chrome で「このサイトは安全な接続を提供できません」というエラーが表示されるため、直接 にアクセスできません。

リンクしたstackoverflowの質問にリストされている他の方法を試しましたが、同じ動作をするか、まっすぐに機能しません。私はここで自分の要素から少し外れており、学ぼうとしていますが、なぜこれが機能しないのかわかりません. どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1