fix: hosting/functionsの接続、他プロジェクトへの依存

Makefile

@@ -1,17 +1,13 @@
-PROJECT_ID := "united-storm-223507"
 SITE_ENDPOINT := "https://photo.phoooutty.com"
-CLOUD_FUNCTIONS_ENDPOINT := https://asia-northeast1-united-storm-223507.cloudfunctions.net
 
 .PHONY: build
 build/dev:
 	yarn build
 build/prd:
-	REACT_APP_BV_ENDPOINT=$(SITE_ENDPOINT) \
-		REACT_APP_CLOUD_FUNCTIONS_ENDPOINT=$(CLOUD_FUNCTIONS_ENDPOINT) \
-		yarn build
+	REACT_APP_BV_ENDPOINT=$(SITE_ENDPOINT) yarn build
 serve: build/dev
-	firebase serve --project $(PROJECT_ID)
+	firebase serve
 deploy: build/prd
-	firebase deploy --project $(PROJECT_ID)
+	firebase deploy
 deploy/functions:
-	firebase deploy --project $(PROJECT_ID) --only functions
+	firebase deploy --only functions

firebase.json

@@ -7,6 +7,18 @@
       "**/node_modules/**"
     ],
     "rewrites": [
+      {
+        "source": "/cf-api/folders",
+        "function": "listFolders"
+      },
+      {
+        "source": "/cf-api/images/tag",
+        "function": "listImagesByTag"
+      },
+      {
+        "source": "/cf-api/images/folder",
+        "function": "listImagesInFolder"
+      },
       {
         "source": "**",
         "destination": "/index.html"

functions/src/index.ts

@@ -7,23 +7,21 @@ const cors = CORS({
   origin: "https://photo.phoooutty.com"
 });
 
-const tokyoFunctions = functions.region('asia-northeast1');
-
-export const listFolders = tokyoFunctions.https.onRequest( (req, res) => {
+export const listFolders = functions.https.onRequest( (req, res) => {
   cors(req, res, async () => {
     const cloudinaryRes = await listFolderHandler();
     res.status(cloudinaryRes.status).send(cloudinaryRes.data);
   });
 });
 
-export const listImagesByTag = tokyoFunctions.https.onRequest( (req, res) => {
+export const listImagesByTag = functions.https.onRequest( (req, res) => {
   cors(req, res, async () => {
     const cloudinaryRes = await listImagesByTagHandler(req.query.tag);
     res.status(cloudinaryRes.status).send(cloudinaryRes.data);
   });
 });
 
-export const listImagesInFolder = tokyoFunctions.https.onRequest( (req, res) => {
+export const listImagesInFolder = functions.https.onRequest( (req, res) => {
   cors(req, res, async () => {
     const cloudinaryRes = await listImagesInFolderHandler(req.query.folder_name);
     res.status(cloudinaryRes.status).send(cloudinaryRes.data);

src/env.ts

@@ -1,2 +1 @@
 export const bvEndpoint = process.env.REACT_APP_BV_ENDPOINT || "http://localhost:5000";
-export const cloudFunctionEndpoint = process.env.REACT_APP_CLOUD_FUNCTIONS_ENDPOINT || "http://localhost:5001/united-storm-223507/us-central1";

src/services/cloudFunctions.ts

@@ -3,7 +3,7 @@ import env = require('../env');
 import {Image} from '../models/image'
 
 const cloudFunctions = axios.default.create({
-  baseURL: env.cloudFunctionEndpoint
+  baseURL: env.bvEndpoint
 });
 
 const getCaption = (context?: { [key: string]: any }) => {
@@ -25,7 +25,7 @@ const toImagesArray = (resources: Array<{ [key: string]: any }>) => {
 
 export const listImagesByTag = async (tag: string) => {
   const res = await cloudFunctions.get(
-    "/listImagesByTag",
+    "/cf-api/images/tag",
     { params: { "tag": tag } }
     );
   return toImagesArray(res.data.resources);
@@ -41,7 +41,7 @@ export const listFolders = async () => {
 
 export const listImagesInFolder = async (folderName: string) => {
   const res = await cloudFunctions.get(
-    "/listImagesInFolder",
+    "/cf-api/images/folder",
     {params: {"folder_name": folderName}}
     );
   return toImagesArray(res.data.resources);