Overview
Nuxt + Firebase でポートフォリオサイトを作って公開するまでの過程で行なったことをまとめます。
(まだまだやらないといけないことはありますが、とりあえず最初の一歩でやったことをまとめるところまで）
なお作成したポートフォリオサイトはこちら -> emahiro.dev
やったこと
SNS の icon を手に入れる
自分へのコンタクト方法に SNS アイコンを使うケースが多いと思います。
流石にインターネットからアイコンを拾ってきて、画像として表示するみたいな過去の自分がやっていたような道は通りなくなかったので、アイコンを無償で使える何かがないかを探して、今回は Font Awesome というサービスの無償プランを使いました。
ブランドのアイコン一覧 を軽く眺めたところ、欲しいサービスのアイコンは網羅されてそうだったので、今の所無償プランで問題なさそうです。
今回は無償プランで使える Solid と Brands をインストールしました。
Nuxt に Font Awesome を導入する
Nuxt(Vue) への導入方法については こちら を参照してください。Font Awesome 専用のツールのインストールが必要です。
インストール手順は こちら
npm i --save @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons
Nuxt での使用手順は こちら
ハマったところ
Font Awesome を使えるようにするには plugins 配下に fontawesome.js というファイルを作成し、Nuxt での導入方法に記載してある Component の設定を追記する必要がありました。
fontawesome.js で Font Awesome のコンポーネントをグローバルに設定したので、使いたいコンポーネントで FontAwesomeIcon を指定することで <font-awesome-icon :icon="['fab', 'twitter-square']" /> で Font Awesome のアイコンが使えるようになります。
favicon を変える
Nuxt のアイコンがそのまま使われてなのでとりあえず適当な顔文字に変更しました。
そのうちちゃんとしたやつ作りたいです。
Figma とか使って。
Cloud Functions を使ってはてなブログの RSS を取得する
はてなブログの RSS を表示させようと考えましたので、Cloud Functions でそのエンドポイントを実装してみます。
Firebase Functions Emulator を使う
公式ドキュメント にローカルのエミュレーターの起動方法について記載してあります。
firebase emulators:start emulators: Starting emulators: functions, firestore, database, hosting, pubsub ⚠ Your requested "node" version "8" doesn't match your global version "10" ✔ functions: Emulator started at http://localhost:5001 i firestore: Serving ALL traffic (including WebChannel) on http://localhost:8080 ...
起動した状態で local で curl を叩くと結果が返ってきます。
curl -i localhost:5001/emahiro-dev/us-central1/helloWorld HTTP/1.1 200 OK x-powered-by: Express content-type: text/html; charset=utf-8 content-length: 20 etag: W/"14-z3iZXchEt5DVWZKsMncy8Wl4KSQ" date: Sun, 12 Jan 2020 14:15:14 GMT connection: close Hello from Firebase!
Functions の設定の変更
ランタイムを Node 10 に変更し、標準で us-central が指定されてしまう Functions のリージョンを日本リージョンを使用するように設定を変更します。
diff --git a/functions/package.json b/functions/package.json index 02a2f48..61f7b66 100644 --- a/functions/package.json +++ b/functions/package.json @@ -10,7 +10,7 @@ "logs": "firebase functions:log" }, "engines": { - "node": "8" + "node": "10" }, "main": "lib/index.js", "dependencies": {
diff --git a/functions/src/index.ts b/functions/src/index.ts index e6e0bb8..fa15f33 100644 --- a/functions/src/index.ts +++ b/functions/src/index.ts @@ -3,6 +3,10 @@ import * as functions from "firebase-functions"; // // Start writing Firebase Functions // // https://firebase.google.com/docs/functions/typescript -export const helloWorld = functions.https.onRequest((request, response) => { - response.send("Hello from Firebase!"); -}); +const jp = "asia-northeast1"; + +export const helloWorld = functions + .region(jp) // 追加 + .https.onRequest((request, response) => { + response.send("Hello from Firebase!"); + });
新しい Functions を定義する
functions/index.ts に新しい関数を定義したら npm run build をします。
( functions/package.json 内に定義されてる build スクリプトの中身は tsc ですが )
Functions の動作確認には上述した Firebase Functions のエミュレーターを使用します。
まとめ
一旦自分が Nuxt + Firebase でポートフォリオサイトを作成するところまでやったことをまとめました。
今後、機能やコンテンツを増やしたときにはその内容を公開していきたいと思います。
