search

cohki0305 / SlackCloneApp

10 stars 5 forks source link

dotenvを導入するとチャンネルが取得できない #56

Open ghost opened 3 years ago

ghost commented 3 years ago

①聞きたいことの一行まとめ firebase.jsのapikeyなどの値をgithubにあげたくないのでdotenvをインストールして ルート直下に.envファイルを作成したらfirebaseと接続できなくなった。 ②起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット） エラーメッセージ : FirebaseError: projectId must be a string in FirebaseApp.options

上記のエラーなので環境変数の設定が読み込まれていないのが原因だとおもい、 恐らくnuxt.config.jsに誤りがあるのかと思うのですが、それを発見できない次第です。 ③ソースコード（関連するソースコード/全ソースコード） ■nuxt.config.js

require("dotenv").config();
const { APIKEY, AUTHDOMAIN, PROJECTID, STORAGEBUCKET, MESSAGINGSENDERID, APPID, MEASUREMENTID } = process.env;

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'ChatApp',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      〜中略〜

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    "@nuxtjs/dotenv"
  ],

  env: {
    APIKEY,
    AUTHDOMAIN,
    PROJECTID,
    STORAGEBUCKET,
    MESSAGINGSENDERID,
    APPID,
    MEASUREMENTID
  },
〜中略〜

■firebase.js

if (!firebase.apps.length) {
  const config = {
    apiKey: process.env.APIKEY,
    authDomain: process.env.AUTHDOMAIN,
    projectId: process.env.PROJECTID,
    storageBucket: process.env.STORAGEBUCKET,
    messagingSenderId: process.env.MESSAGINGSENDERID,
    appId: process.env.APPID,
    measurementId: process.env.MEASUREMENTID
  }
  firebase.initializeApp(config)
}

■.env

APIKEY='XXXXXXXXXXXXX'
AUTHDOMAIN='XXXXXXXXXXXXX'
PROJECTID＝'XXXXXXXXXXXXX'
STORAGEBUCKET='XXXXXXXXXXXXX'
MESSAGINGSENDERID='XXXXXXXXXXXXX'
APPID='XXXXXXXXXXXXX'
MEASUREMENTID='XXXXXXXXXXXXX'

④問題解決するために試したこと（コードもあれば追記） https://www.kalium.net/image/2020/06/27/nuxt-js%E3%81%A7%E9%96%8B%E7%99%BA%E3%83%BB%E6%9C%AC%E7%95%AA%E3%81%AE%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B%E6%96%B9%E6%B3%95%EF%BC%88vercel/ 上記の記事を参照して.envファイルを作成してapikeyなどをgithubに上がらないようにした。

⑤問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想） FirebaseError: projectId must be a string in FirebaseApp.options

上記のエラーなので環境変数の設定が読み込まれていないのが原因だとおもい、 恐らくnuxt.config.jsに誤りがあるのかと思うのですが、それを発見できない次第です。

⑥当該コンテンツを購入したnoteのアカウント nyama

⑦noteのどのあたりまでやったのか 5-2. ElementUI でログインモーダルを作ろう

cohki0305 commented 3 years ago

上記のエラーなので環境変数の設定が読み込まれていないのが原因だとおもい、恐らくnuxt.config.jsに誤りがあるのかと思うのですが、それを発見できない次第です。

おそらくそこに原因があると思いますね！ Nuxt のバージョによって環境変数の読み込み方が変わったことがあったのでそれが原因かもしれないなーと思いましたが、コードは特に問題なさそうな気がしますね。

サーバーの再起動とかしても状況良くならないですかね？？

ghost commented 3 years ago

はい。サーバー再構築いたしましたが、状況が変わらないです。 package.jsonを確認したらdotenvやnuxtのバージョンが確認できたので dotenvはちゃんとインストールしている様子です。

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/dotenv": "^1.4.1",
    "core-js": "^3.6.5",
    "dotenv": "^8.2.0",
    "element-ui": "^2.14.1",
    "firebase": "^8.2.1",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {}
}
cohki0305 commented 3 years ago

コード的には問題なさそうなんですけどね 🤔 ちなみに記事だと yarn でインストールしてますが、npm install でインストールしましたかね？

ghost commented 3 years ago

npm install でインストールしております。

cohki0305 commented 3 years ago

@chihiro-nemoto 一度GitHubですべてのコード共有してもらえないでしょうか？ ちょっとこちらで動かしてみないと分からなさそうです...すみません、時間かかってしまっていて。

ghost commented 3 years ago

お手数をお掛けしてしまい申し訳ございません。 https://github.com/chihiro-nemoto/ChatApp こちらをご確認お願い致します。

ghost commented 3 years ago

描画はされるのですが、チャンネルが取得できなくなります。 https://gyazo.com/374b876bb4eed1afac31a5b0301b1e13

cohki0305 commented 3 years ago

まだ原因調査中です...すみません

cohki0305 commented 3 years ago

nuxt.config.js に '@nuxtjs/dotenv' と追加したら直ったりしますかね？？

  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/dotenv'
  ],
ghost commented 3 years ago

ご返信ありがとうございます。 上記対応しました。しかしチャンネル一覧が取得できない状態です。 https://gyazo.com/74282485d071312c1ff6682bfd309c63

また、データベースが見つからないエラーが出ております。 https://gyazo.com/8bd26227d889d3129cb3fd92ba258bad

エラーメッセージ 

 @firebase/firestore: Firestore (8.2.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=not-found]: The project undefined does not exist or it does not contain an active Cloud Datastore or Cloud Firestore database. Please visit http://console.cloud.google.com to create a project or https://console.cloud.google.com/datastore/setup?project=undefined to add a Cloud Datastore or Cloud Firestore database. Note that Cloud Datastore or Cloud Firestore always have an associated App Engine app and this app must not be disabled.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

お手数をお掛けしてすみません。とださんの手元では環境変数は使用可能でしょうか？ フロントエンドでは環境変数が使用不可という記事も見て手詰まりしております🤔

ghost commented 3 years ago

すみません、解決しました！ .envファイルの

PROJECTID＝'XXXXXXXXXXXXX'

このイコールが大文字でした。見ていただいてありがとうございました。

cohki0305 commented 3 years ago

おお、解決してよかったです！！ あーなるほど！！！これはなかなか気づきにくいですね。すみません、気づけず...