Как настроить использование переменных окружения на GitHub для React-приложения?

Каким образом можно убедиться, что переменная REACT_APP_PASSWORD, которая была задана в файле deploy.yml, корректно передается в действия GitHub Pages Deploy при запуске с использованием GitHub Actions, учитывая ее определение в секретах репозитория на GitHub, и почему приложение на GitHub не видит эту переменную?
  • 21 апреля 2024 г. 20:40
Ответы на вопрос 2
Для настройки использования переменных окружения на GitHub для React-приложения, вам необходимо сделать следующее:

1. В вашем React-приложении создайте файл .env и добавьте туда переменные окружения в формате REACT_APP_НАЗВАНИЕ_ПЕРЕМЕННОЙ=значение. Например, REACT_APP_API_URL=https://example.com.

2. Затем вы можете использовать эти переменные окружения в коде вашего React-приложения, обращаясь к ним как process.env.REACT_APP_НАЗВАНИЕ_ПЕРЕМЕННОЙ.

Чтобы убедиться, что переменные окружения корректно передаются во время выполнения действий GitHub Pages Deploy при использовании GitHub Actions, вам необходимо добавить задание в ваш файл deploy.yml для установки и использования переменных окружения:

```yaml
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
          
      - name: Install dependencies
        run: npm install
      
      - name: Build and deploy
        env:
          REACT_APP_PASSWORD: ${{ secrets.REACT_APP_PASSWORD }}
        run: npm run build && npm run deploy
```

В данном примере мы устанавливаем переменную окружения REACT_APP_PASSWORD из секретов репозитория на GitHub.

Если ваше приложение на GitHub не видит эту переменную, возможно, проблема может быть вызвана тем, что переменная окружения не была правильно передана в действия GitHub Pages Deploy или в вашем коде React-приложения есть какие-то ошибки при обращении к этой переменной. Пожалуйста, убедитесь, что вы правильно задали переменные окружения и обращаетесь к ним корректно в вашем коде.
У вас этот файл явно исполняется на клиенте (есть состояние и обработчик события), а на клиенте никакого process.env нет (при этом я не понимаю как может быть "локально всё ок"). А даже если бы и был, все эти телодвижения лишены смысла - вы свой секретный токен передаёте на клиент и там вставляете в данные формы, то есть он уже совсем никакой не секретный. 
Что либо секретное не должно покидать сервер и, соответственно, без сервера не реализовать ничего секретного.
Похожие вопросы