Как принудительно установить https для приложения React, развернутого в гибкой среде Google App Engine node.js?

Question

Я хочу принудительно установить https-подключения для своего приложения React, развернутого в гибкой среде Google App Engine node.js. Мое приложение React было создано с

npx create-react-app my-cool-app  

И у меня есть app.yaml, помещенный в каталог проекта root. App.yaml содержит следующее:

env: flex
runtime: nodejs
service: frontend-staging

Я видел другие вопросы / ответы, упомянутые здесь, используя библиотеку шлемов npm. Но я не понимаю, как это относится к моему делу. Разве Google App Engine не обслуживает stati c каталог сборки, используя nginx? Здесь нет Express сервера - только код переднего плана. Как я могу установить заголовки безопасности http, используя эту библиотеку, если у меня есть только код переднего плана? Нужно ли размещать сервер приложений Express между nginx и моим React?

Также я обратился в службу поддержки Google по поводу изменения файла nginx .conf. Но, по их словам, мне пришлось бы S SH в экземпляр и таким образом изменить файл. Что произойдет, если нагрузка на экземпляр увеличится, а GAE автоматически запустит другой экземпляр? Теперь я должен как-то обнаружить это и вручную S SH в этот экземпляр, чтобы исправить файл nginx .conf? Я видел это упомянутое как потенциальное решение здесь, но это кажется плохим вариантом.

Примечание: я не думаю, что это дубликат. Я специально спрашиваю, как реализовать библиотеку шлемов с nginx + Express + React + примерами кода для гибкой среды GAE node.js, а не вопросом стратегии более высокого уровня.

Answer 1

Я наконец понял это самостоятельно. Вам необходимо создать сервер express, запустить «сборку пряжи» и обслуживать те файлы * stati c, которые генерируются скриптом «сборки пряжи» с сервера express. Итак, я рекомендую настроить вашу структуру каталогов следующим образом:

appRoot 
    ->client
        ->create-react-app contents here 
    app.yaml 
    app.js 
    package.json 

Обратите внимание, что есть два пакета. json в этой конфигурации. Один из них находится внутри папки клиента и создается как часть установки при запуске «create-реагировать-приложение». Другой предназначен для вашего nodejs серверного приложения и находится в каталоге приложения Root. Внутри приложения. js файл - это место, куда вы поместите код для обслуживания ваших стати c React-файлы:

const express = require('express');
const helmet = require('helmet')
const app = express();
const port = process.env.PORT || 3000;

const sixtyDaysInSeconds = 5184000
app.use(helmet.hsts({
   maxAge: sixtyDaysInSeconds
}))

//Serve up all of our static assets 
app.use( express.static('client/build') );

//Make all incoming GET requests return the index.html in order to take advantage of the client side router
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/client/build/index.html', function(err) {
    if (err) {
        res.status(500).send(err);
    }
   })
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

Убедитесь, что вы добавили библиотеку "шлем" в ваши зависимости, запустив

yarn add helmet 

И, конечно, добавьте express, запустив

yarn add express 

Все, что нужно для вашего app.yaml:

env: flex
runtime: nodejs
service: frontend-staging

Теперь разверните приложение в GAE и вы должны обслуживать заголовки HSTS вместе с каждым запросом. Обратите внимание, что обслуживание заголовков HSTS не сразу перенаправляет пользователя на https. Из Mozilla Developer Network: «При первом обращении к вашему сайту с использованием HTTPS, и он возвращает заголовок Strict-Transport-Security, браузер записывает эту информацию, так что в будущем при попытке загрузки сайта с использованием HTTP вместо этого будет автоматически использоваться HTTPS».

Другими словами, ваш пользователь должен попытаться получить доступ к сайту хотя бы один раз, используя https, для отправки заголовка HSTS.