<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Firebase  |  Sleeping Monster</title>
	<atom:link href="http://localhost/category/allcategories/system/firebase/feed" rel="self" type="application/rss+xml" />
	<link>https://www.sleepingmonster.dev/</link>
	<description>make or share something</description>
	<lastBuildDate>Sat, 20 Aug 2022 05:07:46 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1</generator>
	<item>
		<title>Node.jsを使ってFirebase StorageをEmulatorで動かそうとしたら困った話</title>
		<link>https://www.sleepingmonster.dev/2022/08/154.html</link>
		
		<dc:creator><![CDATA[masa_xd]]></dc:creator>
		<pubDate>Fri, 19 Aug 2022 13:30:57 +0000</pubDate>
				<category><![CDATA[Firebase]]></category>
		<category><![CDATA[全て]]></category>
		<category><![CDATA[firebase]]></category>
		<guid isPermaLink="false">https://www.sleepingmonster.dev/?p=154</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[
<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>突然だが、私は雰囲気でFlutterやFirebaseを触っている</p>



<p>そんな私が先日かなり困ってしまった事について説明する</p>
</div></div>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box has-border-color has-pink-border-color">
<p>ソースコード内の&lt;YOUR_KEY_FILENAME_PATH>や&lt;PROJECT_ID>等は適宜、環境に合わせて書き換えてください</p>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>よろしくお願いします</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>csvファイルをFirebase storageにアップロードするスクリプトを</p>



<p>Node.jsで書いていた</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>そうなんですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>次の図の通り、一つのスクリプトでEmulatorと本番環境の両方へアップロードできるかを検証していた。今回詰まったポイントは下のStorage Emulatorに送信する部分だ</p>
</div></div>



<figure class="wp-block-image size-full is-resized"><img decoding="async" loading="lazy" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/setsumei.png" alt="一つのスクリプトでEmulatorと本番環境の両方へアップロードできるようなスクリプトの図" class="wp-image-162" width="840" height="630" srcset="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/setsumei.png 960w, https://www.sleepingmonster.dev/wp-content/uploads/2022/08/setsumei-300x225.png 300w, https://www.sleepingmonster.dev/wp-content/uploads/2022/08/setsumei-768x576.png 768w" sizes="(max-width: 840px) 100vw, 840px" /></figure>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>できそうですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>Storage Emulatorのインストールや起動は簡単だった</p>



<p>公式のドキュメントを参考にして欲しい</p>
</div></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://firebase.google.com/docs/emulator-suite/install_and_configure?hl=ja" title="Local Emulator Suite のインストール、構成、統合  |  Firebase Local Emulator Suite" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ffirebase.google.com%2Fdocs%2Femulator-suite%2Finstall_and_configure%3Fhl%3Dja?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Local Emulator Suite のインストール、構成、統合  |  Firebase Local Emulator Suite</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://firebase.google.com/docs/emulator-suite/install_and_configure?hl=ja" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">firebase.google.com</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>簡単そうですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>問題は読むドキュメントにあった</p>



<p>今回実装したかった機能は主に管理用の機能だ。</p>



<p>しかし気がつけばクライアント向けのドキュメントを見ており非常に混乱してしまった</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>気をつけないといけないですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>備忘録として、管理者用の機能を実装する為のドキュメントと</p>



<p>クライアント用の機能を実装する為のドキュメントを紹介したいと思う</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>ありがとうございます</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>管理者用の機能を実装する時に参考になったドキュメントはちら</p>
</div></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://firebase.google.com/docs/storage/admin/start?hl=ja" title="Admin Cloud Storage API の概要  |  Firebase Storage" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fstorage%2Fadmin%2Fstart%3Fhl%3Dja?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Admin Cloud Storage API の概要  |  Firebase Storage</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://firebase.google.com/docs/storage/admin/start?hl=ja" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">firebase.google.com</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://googleapis.dev/nodejs/storage/latest/" title="
      Home - Documentation
  " class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Fgoogleapis.dev%2Fnodejs%2Fstorage%2Flatest%2F?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">
      Home - Documentation
  </div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://googleapis.dev/nodejs/storage/latest/" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">googleapis.dev</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>ありがとうございます</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>管理者として、ファイルをアップロードする為のサンプルコードはこちら</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const { initializeApp, cert } = require("firebase-admin/app");

const { getStorage } = require("firebase-admin/storage");

const KEY_FILENAME_PATH = "&lt;KEY_FILENAME_PATH>";
const BUCKET_NAME = "&lt;BUCKET_NAME>";
const LOCAL_FILE = "./storage/test.csv";

const serviceAccount = require(KEY_FILENAME_PATH);

process.env["FIREBASE_STORAGE_EMULATOR_HOST"] = "localhost:9199";

initializeApp({
  credential: cert(serviceAccount),
  storageBucket: BUCKET_NAME,
});

const bucket = getStorage().bucket();

bucket.upload(LOCAL_FILE, {}, async function (err, callback) {
  if (err) {
    console.log(err);
  } else {
    console.log(`uploaded!!!`);
  }
});</pre>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>ありがとうございます</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>11行目の処理があればEmulatorに繋がるし、無ければ本番へ繋がるぞ</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>お疲れ様でした</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>クライアント用の機能を実装する時に参考になったドキュメントはこちら</p>
</div></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://firebase.google.com/docs/reference/node?hl=ja&#038;authuser=0" title="JavaScript SDK  |  Node.js (client) API reference  |  Firebase" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ffirebase.google.com%2Fdocs%2Freference%2Fnode%3Fhl%3Dja%26authuser%3D0?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">JavaScript SDK  |  Node.js (client) API reference  |  Firebase</div><div class="blogcard-snippet external-blogcard-snippet">Reference for JavaScript SDK</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://firebase.google.com/docs/reference/node" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">firebase.google.com</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://firebase.google.com/docs/reference/node/firebase.storage?hl=ja&#038;authuser=0" title="storage | JavaScript SDK  |  Node.js (client) API reference  |  Firebase" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ffirebase.google.com%2Fdocs%2Freference%2Fnode%2Ffirebase.storage%3Fhl%3Dja%26authuser%3D0?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">storage | JavaScript SDK  |  Node.js (client) API reference  |  Firebase</div><div class="blogcard-snippet external-blogcard-snippet">Reference for storage</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://firebase.google.com/docs/reference/node/firebase.storage" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">firebase.google.com</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>ありがとうございます</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>クライアントとして、ファイルをアップロードする為のサンプルコードはこちら</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">const { initializeApp } = require("firebase/app");
const {
  getStorage,
  connectStorageEmulator,
  ref,
  uploadBytes,
} = require("firebase/storage");
const { readFileSync } = require("fs");

const API_KEY_STR = "&lt;API_KEY_STR>";
const PROJECT_ID = "&lt;PROJECT_ID>";
const LOCAL_FILE = "./storage/test.csv";

const firebaseConfig = {
  apiKey: API_KEY_STR,
  authDomain: PROJECT_ID + ".firebaseapp.com",
  databaseURL: "https://asia-northeast1.firebaseio.com/",
  projectId: PROJECT_ID,
  storageBucket: PROJECT_ID + ".appspot.com",
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
connectStorageEmulator(storage, "localhost", 9199);

const storageRef = ref(storage, "test.csv");

const metadata = {
  contentType: "text/csv",
};

const localFile = readFileSync(LOCAL_FILE);
uploadBytes(storageRef, localFile, metadata);</pre>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>ありがとうございます</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>24行目の処理があればEmulatorに繋がるし、無ければ本番へ繋がるぞ</p>



<p>firebaseConfigの設定については公式のドキュメントも分かりやすい</p>
</div></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-official">
<a rel="noopener" href="https://firebase.google.com/docs/web/learn-more#config-object" title="Learn more about Web and Firebase" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fweb%2Flearn-more%23config-object?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Learn more about Web and Firebase</div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=https://firebase.google.com/docs/web/learn-more" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">firebase.google.com</div></div></div></div></a>
</div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>すばらしいですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>このようなエラーが出ると思うが</p>



<p>その時はstorage.rulesを更新するか認証用の機能を実装しよう</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="bash" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">[StorageError [FirebaseError]: Firebase Storage: User does not have permission to access 'test.csv'. (storage/unauthorized)] {
  code: 'storage/unauthorized',
  customData: { serverResponse: '' },
  _baseMessage: "Firebase Storage: User does not have permission to access 'test.csv'. (storage/unauthorized)"
}</pre>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>認証関係のエラーですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>Emulatorで使ってみたいだけなら、このよう書き換えても良いだろう</p>



<p>ただし、本番へデプロイしないよう注意すること</p>
</div></div>



<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}</pre>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>デプロイすると危険ですね</p>
</div></div>
</div></div>



<div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container">
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_hakase.webp" alt="hakase" class="speech-icon-image"/></figure><div class="speech-name">hakase</div></div><div class="speech-balloon">
<p>この記事を書くのにも4時間程かかったように思う</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-stn sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://www.sleepingmonster.dev/wp-content/uploads/2022/08/fukidasi_neko.webp" alt="neko" class="speech-icon-image"/></figure><div class="speech-name">neko</div></div><div class="speech-balloon">
<p>お疲れ様でした</p>
</div></div>
</div></div>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
