dotenvを導入するとエラーが出る

kay-ws commented 4 years ago

たびたび失礼します。

①聞きたいことの一行まとめ dotenvを導入すると「This dependency was not found:* fs in ./node_modules/dotenv/lib/main.js」となって実行できなくなる。

②起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット）ことの発端は１通のメールです。（全文コピー）

[kay-ws/SlackCloneApp] Google apikey exposed on GitHub

Warning: GitGuardian detected an API key from Google
--
Hello @kay-wsGitGuardian detected an API key from Google in the following commit from kay-ws/SlackCloneApp pushed at 2020-01-08T13:43:29Z.GitGuardian, or "GG", is a "Good Guy" bot scanning in real time GitHub commits for sensitive information.Once you have pushed sensitive information to GitHub, this information is public and should be considered compromised. We just open sourced our GitHub repository to help developers take appropriate actions. Would love a star! :)Accidents happened to the best of us and will continue to happen. Sign up to our service to be notified if this happens again. We got a free tier for individual developers !Stay SafePrivacy matters a lot to us. When you sign up to our service, we require permissions affecting only your public repositories.GitGuardian needs you !Our Machine Learning algorithms can only get better with your feedback. Please help us improve our service by clicking on the blue button if we are correct and on the red button if we made a mistake.True Positive False Positive | Hello @kay-ws | GitGuardian detected an API key from Google in the following commit from kay-ws/SlackCloneApp pushed at 2020-01-08T13:43:29Z. | GitGuardian, or "GG", is a "Good Guy" bot scanning in real time GitHub commits for sensitive information. | Once you have pushed sensitive information to GitHub, this information is public and should be considered compromised. We just open sourced our GitHub repository to help developers take appropriate actions. Would love a star! :) | Accidents happened to the best of us and will continue to happen. Sign up to our service to be notified if this happens again. We got a free tier for individual developers ! | Stay Safe | Privacy matters a lot to us. When you sign up to our service, we require permissions affecting only your public repositories. | GitGuardian needs you ! | Our Machine Learning algorithms can only get better with your feedback. Please help us improve our service by clicking on the blue button if we are correct and on the red button if we made a mistake. | True Positive False Positive
Hello @kay-ws
GitGuardian detected an API key from Google in the following commit from kay-ws/SlackCloneApp pushed at 2020-01-08T13:43:29Z.
GitGuardian, or "GG", is a "Good Guy" bot scanning in real time GitHub commits for sensitive information.
Once you have pushed sensitive information to GitHub, this information is public and should be considered compromised. We just open sourced our GitHub repository to help developers take appropriate actions. Would love a star! :)
Accidents happened to the best of us and will continue to happen. Sign up to our service to be notified if this happens again. We got a free tier for individual developers !
Stay Safe
Privacy matters a lot to us. When you sign up to our service, we require permissions affecting only your public repositories.
GitGuardian needs you !
Our Machine Learning algorithms can only get better with your feedback. Please help us improve our service by clicking on the blue button if we are correct and on the red button if we made a mistake.
True Positive False Positive

GitGuardianというところからの警告で、Google APIキーをGithub上で世界中に晒しているということのようでした。

早速、firebaseのDatabaseを一度消し、再度作り直ししました。（これでapiKey類が変わったのでとりあえず良いかと思い）

次に、以下のコマンドでdotenvをインストールしました。 npm install --save dotenv そしてプロジェクトフォルダ直下に.devファイルを作り API類のデータをそこに記載しました。

そしてplugins/firebase.jsを以下のような記述に書き換えました。

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

require('dotenv').config();

if (!firebase.apps.length) {
  const config = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
  }
  firebase.initializeApp(config)
}

const db = firebase.firestore()
export {
  firebase,
  db
}

これで対策できたと思い、npm run devをしたところ

 ERROR  Failed to compile with 1 errors

This dependency was not found:

* fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs

とエラーが出てしまい動きません。 ③ソースコード（関連するソースコード/全ソースコード） https://github.com/kay-ws/SlackCloneApp.git

④問題解決するために試したこと（コードもあれば追記）エラーメッセージの指示通りに「npm install --save fs」をして再度「npm run dev」をしてみました。　→結果変わらず。 ⑤問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想）

そもそも、dotenvの入れ方が悪かった？
ライブラリの整合性が崩れた？

⑥当該コンテンツを購入したnoteのアカウント Note ID： kay_ws ニックネーム：けい

⑦noteのどのあたりまでやったのかメッセージの保存と表示の前まで。

※noteに章番号のほか、節（+項）番号を付けていただけると、どのあたりまでというのが提示しやすいのですが（例：1-2-1まで）。ご検討いただきたく。

cohki0305 commented 4 years ago

コード見た感じでは特に問題なさそうですね 🤔 念の為に確認させていただきたいのですが、dotenv のインストール後はサーバーの再起動はしてますかね？nuxt が nuxt.config.js を上手く読み込めていなければ、上のようなエラーが出るかもなーと思ったので。

https://github.com/kay-ws/SlackCloneApp/blob/master/nuxt.config.js

※noteに章番号のほか、節（+項）番号を付けていただけると、どのあたりまでというのが提示しやすいのですが（例：1-2-1まで）。ご検討いただきたく。

たしかにこれは不便ですね... 🙇 改善します！ご指摘ありがとうございます！

cohki0305 commented 4 years ago

ことの発端は１通のメールです。（全文コピー）

Firebase の場合、無料プランがあるので不正に利用されて高額請求が来るということはないので、基本大丈夫なのですが、これ心配になりますよね...

JavaScriptに記載されているので、基本公開されますしね... https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public

GitHub で公開する場合を想定して、dotenv 使うように note を変更しようかなとちょっと思いました。

kay-ws commented 4 years ago

・サーバの再起動というのが、「npm run dev」を止めて起動しなおすことであれば、実行しています。（Ctrl+Cでプロセスを止めて再度「npm run dev」）・nodeを入れなおすといいというサイトもあったので、「sudo yum remove nodejs」「sudo yum install nodejs」を実行しましたがエラーは消えず。・fsオブジェクトが無効なのか調べるために以下のコマンドを実行 a.js

var fs = require('fs');
var message = fs.readFileSync(__dirname + '/message.txt');
console.log(message);

message.txt message コマンド node a.js message.txtのファイルの中身が出力されれば有効。エラーなら無効。 <Buffer 6d 65 73 73 61 67 65> あれ、fsオブジェクト生きてますね。？？？

今日いっぱい調べてみてわからなかったら開発環境再構築してみます。

cohki0305 commented 4 years ago

サーバの再起動というのが、「npm run dev」を止めて起動しなおすことであれば、実行しています

なるほど！

fsオブジェクト生きてますね。

生きているっぽいですね。ということは nuxt 環境で build する際に上手く読み込めていないっぽいですね。ちょっと調べてみます。

cohki0305 commented 4 years ago

これ通りにやったら直ったりしないですかね？ https://github.com/nuxt-community/dotenv-module/issues/11#issuecomment-412322241

kay-ws commented 4 years ago

情報ありがとうございます。

// nuxt.config.js

export default {

    ...

    build: {

        ...

        extend: function (config, {isDev, isClient}) {

            config.node = {

                fs: "empty"
            };
        }
    },

    ...
};

これを実施したところエラーが出なくなり、「npm run dev」が実行できるようになりました。

どうもありがとうございました。

cohki0305 commented 4 years ago

おお、解決してよかったです！！！

cohki0305 / SlackCloneApp

dotenvを導入するとエラーが出る #15