まずはGoogleCloudPlattformに登録するにょ〜

まあ、この辺参照しながら頑張ってみてください。

サービスアカウントを作るにょ〜

登録できたら、プロジェクトを作成します。
作成が終わったら、サービスアカウントを作成していきます。

この画面で認証情報をクリックします。

画面上部の認証情報の作成→サービスアカウントの作成をクリックします。

この辺は任意でつけられます。

そしたらこのサービスアカウントに対してGCSにアクセス可能なロールを与えてあげます。
まあ、難しいことは考えずにストレージ管理者でいいでしょう！！！！知らんけど！！！！

あとは適当にすっ飛ばしてサービスアカウント作成完了です🙌

認証情報を管理するにょ〜

作成できたサービスアカウントをクリックして画面上部のキーを選択します。

JSONを選択します。
鍵がダウンロードされるので、それをリポジトリの一番上におきます。（正確には一番上っていうかDockerfileやら.envがあるあたり）

注意してね！！！！
その鍵はとても大切なものなので絶tっっっっっっっっっっっっっっっっっっ対に人に教えてはいけません。
もちろんgitにPushするのもNGです。
gitignoreに入れましょう。

ここまでできた自分を褒めよう！！！！讃えよう！！！！

ここまできたら富士山で言うところの8号目を突破したと言っても過言じゃないです（過言）
自分に大きな拍手！！！！！🎉

バケットを作るにょ〜

上記画像のGCSをクリック

こんな画面が来るので、バケットを作成

グローバルで一意な誰とも被らない素敵な名前をつけてあげましょう

保存場所はまあ、どこでもいいんだけどなんとなくデータと近くにいたいから東京で！
ロケーションタイプはお財布と相談しながら決めるにょ〜
（個人開発程度ならResionでいいかな）

これもautoclassでいいかな。あの天下のGoogleさんだしよしなにやってくれるだろ。知らんけど！

ここら辺は、まあよくわからん！なので適当にスルー

ここまできたら作成ボタンをクリック！！！！！

バケットの完成🎉

コードを書いていくにょ〜

lib/image.ts

import {v4 as uuidv4} from 'uuid'

export const uploadImg = async (file:File) => {
  const fileName = uuidv4()
  const res = await fetch(`/api/uploadImage?file=${fileName}`) //　①
  const { url, fields } = await res.json();
  const body = new FormData();
  Object.entries({ ...fields, file }).forEach(([key, value]) => {
    body.append(key, value as string | Blob );
  });
  const upload = await fetch(url, {method:"POST", body})

  if (!upload.ok) {
    console.log('upload failed')
    return ''
  }
  return fileName
}

jsとかtsに慣れてる人は説明しなくてもわかるわ！！！って感じだと思うけど、①のURLの中にいる?fileってやつはquery parameterとか言ったりするにょ〜

よくわからんぞ🤔って人はこの辺参考にしてみてね

①のAPIはここで用意する

pages/api/uploadImage.ts

import { Storage } from "@google-cloud/storage";

export default async function handler(req: any, res: any) {
  const storage = new Storage({
    projectId: process.env.PROJECT_ID,
    keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS,
  });
  const bucketName = process.env.BUCKET_NAME ?? ''
  const bucket = storage.bucket(bucketName)
  const file = bucket.file(req.query.file)
  const options = {
    expires: Date.now() + 1 * 60 * 1000,
    fields: { "x-goog-meta-test": "data" }
  }
  const [response] = await file.generateSignedPostPolicyV4(options)
  res.status(200).json(response)
}

envは.env.localというファイルを用意してそこに書こう！

.env.local（sample）

PROJECT_ID="hogehoge"
GOOGLE_APPLICATION_CREDENTIALS="hugahuga"
BUCKET_NAME="hshs"

ここで注意することは
@google-cloud/storage
はNode.jsのライブラリなのでフロントからは叩けないと言うこと。
自分はこれで試行錯誤しましたが、、、無念、、、

やっと叩くぞ〜！

ここからはフロントエンドから叩く方法をご紹介

pages/index.tsx

export const HomePage: NextPage = () => {
　　const [file, setFile] = useState<File | null>(null)
　　// 以下でfileの変更を検知してデータを取得
　　const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    const selectedFile = event.target.files && event.target.files[0]
    if (!selectedFile) return
    setFile(selectedFile)
}
---
　　const handleSubmit = async(file: File) => {
　　　　const imageIDinGcs = await uploadImg(file)
　　　　if (!imageIDinGcs) return alert('画像のアップロードに失敗しました。')
  // ここから先はまあ、データベースに登録するなり好きにやってください
　　}
}

おめでとう！！これでuploadが完了したはず！
consoleを見るなり、バケットを見にいくなりしてください

やっと叩くぞ〜！

ほんほん、なるほど。と。
URLを登録するのではなく、名前（idと言った方がしっくり来るかも？）を登録するのかと。
これじゃあ、Imageとして読めないじゃないかと。
思った

そこのあなた！！！！！！！

鋭いですねえええ

はい。その通りです。なので、gcsで検索をかける処理を書かなければなりません。
そりゃPostがあればGetもあって然るべきですよね。

/pages/api/getImage.ts

export default async function handler(req: any, res: any) {

  const storage = new Storage({
    projectId: process.env.PROJECT_ID,
    keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS,
  })

  const bucketName = process.env.BUCKET_NAME ?? ''
  const fileName = req.query.file ?? ''

  if (fileName === '') {
    res.status(400).json('file name is empty')
    return
  }

  const bucket = storage.bucket(bucketName)
  const file = bucket.file(fileName)

  // 有効期間を指定してSigned URLを生成する
  const options = {
    version: 'v4' as const,
    action: "read" as const,
    expires: Date.now() + 5 * 60 * 1000, // 5分間有効
  }

  const [url] = await file.getSignedUrl(options)
  return res.status(200).json({url})
}

とまあこんな感じ。
handlerの型が気になる人は適当にhttpからRequestとかResponseとか引っ張ってくればいいかと

フロントから叩く時はこんな感じ

/pages/users/[id].tsx

const [image, setImage] = React.useState<string | null>(null)
  useEffect(() => {
    if (user) {
      fetchData(String(user.image))
    }
  }, [user])
  const fetchData = async (fileName: string) => {
    const res = await fetch(`/api/getProfImage?file=${fileName}`)
    const JSONRes = await res.json()
    setImage(JSONRes.url)
  }

こんな感じにするといい感じに表示されるにょ🎉
useEffectを使用する理由は、userが取得できていない段階で叩いてしまうとエラーになるので、取得してから発火するため

最後に

ここまでお疲れ様でした〜〜〜！！
クラウド系覚えること多い（特にロールがめんどい）けど、頑張って一つずつ使えるようになってクラウドマスター目指していきましょ〜〜〜！！！

参考文献

著者