さぁ、Vue.jsで個人アプリを作り終えて次は何作ろうかな〜と。

そうだ、サイトにはお問い合わせ機能ぐらいあるよな。よし。

ってことでお問い合わせ機能を作る事に。

目次

1. 参考にしたもの
2. 実装の順番
3. 詰まったとこ
4. 気をつける事
5. 感想

参考にしたもの

Vue.js + Firebase functionsでお問い合わせフォームを作成する – QiitaFirebase hosting + Vue.jsでコーポレートサイトを作成する際に困るのが、お問い合わせフォームをどうすqiita.com

これを参考に進めました。わかりやすいです。感謝です。

実装の順番

vue create 名前　でアプリ作成。

firebaseに行ってプロジェクト作成。アプリを選択してfirebaseConfigみたいなのを取ってくる。

npm install -g firebase-toolsこれ実行

そしたら、ターミナルでfirebase initで色々設定。ここの設定は大事だからちゃんとやっといて損はなし。

今回大事なのは、以下の２つを選択する事。

 ◉ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites

Functionsはメール送信時に大事になってくる設定。

Firebase Hostingは、まぁ普通にデプロイするよねって事。

それが出来たら次は、firebase use –addでfirebaseに作ったプロジェクトを選択。

nodemailerの追加

npm install nodemailer –saveをfunctionsディレクトリで実行。

大事なものを環境変数設定する

firebase functions:config:set gmail.email="メールサーバーとして使うgmailのログインID" gmail.password="メールサーバーとして使うgmailのパスワード" admin.email="問い合わせメールの送信先となるページ管理者のアドレス"

確認で、firebase functions:config:getを打って値が出てきたら出来てる。

あとはfirebaseをインストールして、その設定を行う。これは参考にしたサイトを見ればわかりやすいかと。

あとはview作ってformを作る感じ。

最後は、npm run buildからのfirebase deployでいけます！

グーグルで安全性の低いアプリからのアクセスを許可するのも忘れずに！！

詰まったとこ

ビギナーズの僕が詰まったとこは

firebase deploy –only functions(もしくはfirebase deploy)これでひっかかった事。

とりあえず、firebase-debug.logこのログファイルを見に行ってエラーの内容確認。

今回は下記の人と全く同じエラーだった。entry name must be a non-empty string valueってなんか空だからそれで怒られてそう。Exception append: entry name must be a non-empty string value while deploying a function 揃 Issue #4437 揃 serverless/serverlessHI there!, I am receiving a append: entry name must be a non-github.com

この人たちがいうには、なんか不要な空のファイルが邪魔してるんじゃ無い？って言ってる。

で、探してみるとあった。functionsディレクトリの中に要らない空のヤツラがいた。

全部削除して再びnpm run buildからのfirebase deploy!!!!!

通ったああああああああああああ！！！！！！！

で、サイトにアクセスして送信してみると出来た！！！！

気をつける事

最初の方の設定関係はちゃんと順番通りにやっとこ。

自分は適当にやりすぎてめっちゃ遠回りした。

あとはエラーが出たら、エラーログ見て、ググったらなんとかいけた。(今回はw)

感想

コマンド順番大事、エラーログ大事、先人たちに感謝。

以上！