Почему мой ключ API виден при использовании next. js с переменными среды? - PullRequest
Новая
       34

Почему мой ключ API виден при использовании next. js с переменными среды?

3 голосов
/ 19 марта 2020

Я следовал следующей. js документации и добавил пользовательский ключ API на сервере сейчас.

Проблема в том, что когда я запускаю now dev и go на вкладке источников, я вижу ключ API там.

enter image description here

Ключ API сохраняется в файле .env.build, вот мой код:

index. js

import { useState, useEffect } from 'react';
const axios = require('axios');

import Nav from '../src/components/Nav';
import Head from '../src/components/Head';
import Movies from '../src/components/movies';

const key = process.env.API_KEY;

const index = () => {
  const [currentMovies, setCurrentMovies] = useState([]);

  const getTopMovies = async url => {
    const fetchData = await axios.get(url).then(response => {
      const [...data] = response.data.results;
      setCurrentMovies({ data: data });
    });
  };

  useEffect(() => {
    getTopMovies(
      `https://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2019-12-12&primary_release_date.lte=2020-02-22&api_key=${key}`
    );
  }, []);

  if (currentMovies.data === undefined) {
    console.log('Loading...');
  } else {
    console.log(currentMovies.data);
  }

next.config. js

module.exports = {
  env: {
    API_KEY: process.env.API_KEY
  }
};

now.config. json

{
  "build": {
    "env": {
      "API_KEY": "@api-key-moviedb"
    }
  }
}

1 Ответ

5 голосов
/ 19 марта 2020

Далее JS реализует переменные окружения с помощью DefinePlugin из Webpack. Все переменные, используемые с process.env, заменяются переменными в .env во время компиляции. Из документов:

Далее. js заменит process.env.customKey на 'my-value' в build time.

В отличие от серверной части, Next JS по-прежнему является клиентской средой для запуска JavaScript в браузере, и в настоящее время нет способов скрыть эти ключи от браузера.

Если вам нужно спрятать ключ, вам придется добавить сервер (или функцию без сервера).

Вы можете добавить конечную точку API и вызвать ее из внешнего интерфейса, что подключитесь к сторонней службе и верните извлеченные данные.

Один из способов сделать это - добавить .env и загрузить его в процесс Node с помощью dotenv .

* 1023. * .env 
API_KEY=@api-key-moviedb

next.config. js

require('dotenv').config();

module.exports = {
  /* config options here */
};

Использование 

process.env.API_KEY

Таким образом, ваш ключ API не будет открыт.

Next. js с примером dotenv

API-маршруты в Next . js

...