Как я могу предоставить сертификат SSL с помощью приложения create-react-app?

Ответ 1

Ваш сервер, который обслуживает файлы с этого порта, должен быть настроен на использование вашего сертификата SSL. Я предполагаю, что вы используете webpack-dev-server на этом порту (то, что npm start делает в create-реагировать-app), и, возможно, другой сервер (apache, nginx и т.д.) На порту 80?

Вы можете либо обслуживать свои скомпилированные файлы, используя уже настроенный сервер, либо настроить webpack-dev-server для использования вашего сертификата SSL.

Для этого вы можете использовать опцию webpack-dev-server --cert. См. Https://webpack.github.io/docs/webpack-dev-server.html.

Если вы хотите сделать это с помощью npm start, который вызывает собственный стартовый скрипт, вам придется отредактировать этот стартовый скрипт. Возможно, вам сначала потребуется использовать команду eject, которая сбрасывает весь конфигурационный код в репозиторий, чтобы вы могли его изменить.

Вот исходный код стартового скрипта: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L230

Следует также отметить, что webpack-dev-server не предназначен для использования в производственной среде.

Повеселись!

Ответ 2

Извлечение create-react-app не рекомендуется, так как вы не сможете легко обновить его. Кроме того, вы можете легко получить действительный сертификат SSL без извлечения.
Вам нужно будет скопировать ваш сертификат в node_modules/webpack-dev-server/ssl/server.pem. Недостатком является то, что вам нужно вручную скопировать файл. Однако один из способов добиться этого - добавить скрипт postinstall который создает символическую ссылку. Вот скрипт, который я создал:

#!/bin/bash
# With create-react-app, a self signed (therefore invalid) certificate is generated.
# 1. Create some folder in the root of your project
# 2. Copy your valid development certificate to this folder
# 3. Copy this file to the same folder
# 4. In you package.json, under 'scripts', add 'postinstall' script that runs this file.
# Every time a user runs npm install this script will make sure to copy the certificate to the 
# correct location

TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/$(dirname "./local-certificate/server.pem")/server.pem

echo Linking ${TARGET_LOCATION} TO ${SOURCE_LOCATION}
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION} # after 30 days create-react-app tries to generate a new certificate and overwrites the existing one. 
echo "Created server.pem symlink"

Ваш package.json должен выглядеть примерно так:

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}

• Мое решение основано на этой теме

Ответ 3

Подробнее о Elad:

• 1. Создайте самозаверяющий сертификат, следуя инструкциям из https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
• 2. Сохраните файл pem (содержащий как сертификат, так и закрытый ключ) где-нибудь в вашем проекте (например, /cert/server.pem)
• 3. Измените ваши сценарии package.json:

     "start": "HTTPS=true react-scripts start",
     "prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",
     

Ответ 4

Вот что я сделал:

bash <(wget -qO- https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh)

Затем я дважды щелкнул и импортировал: rootCA.pem и server.pem

Затем я изменил package.json:

"start": "HTTPS=true react-scripts start",
"prestart": "cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl",

Очень важные источники:

• https://serverfault.com/questions/226386/wget-a-script-and-run-it
• https://gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177

Ответ 5

Может ли кто-нибудь предоставить пример для последующего использования сертификата в React?

Я добавил .pem в указанный каталог, но как мне ссылаться на него в моем вызове API?

Я попробовал следующее различными способами, но не смог заставить его работать:

axios
      .post(loginApi, body,
        {
          httpsAgent: new https.Agent({
            ca: "test_certificate.pem"
          })
        }
      )
      .then(response => {
        ...
      })
      .catch(error => {
        ...
      });

Как передать сертификат https-агенту? Нужно ли импортировать сертификат по его пути?

Я действительно новичок в этой теме, поэтому прошу прощения за отсутствие знаний.