ReactでビルドしたファイルをGoogle Cloud Storageで公開する

はじめに

先日Reactで作成したページをGoogle Cloud Storageに静的サイトとして公開する機会がありましたので、その設定手順をまとめてみました。

バケットの作成

GCPのコンソールからCloud Storageを表示し、バケットを作成します。

バケット作成の画面で、バケット名やデータ保存場所、ストレージクラスなどを指定します。

バケットは外部からアクセスできるようにしますので、公開アクセスの防止にある「このバケットに対する公開アクセス禁止を適用する」をOFFにします。

バケットの権限設定

作成したバケットを選択し、「権限」をクリックします。

「プリンシパルを追加」をクリックし、以下内容で保存します。

• 新しいプリンシパル：allUsers
• ロールを選択：Storage レガシー オブジェクト 読み取り

ロールに「Storage オブジェクト閲覧者」を付与しても公開は可能ですが、「Storage オブジェクト閲覧者」を付与すると、ルートURLへアクセスした場合にバケットのオブジェクト一覧が表示されてしまうので、ここでは「Storage レガシー オブジェクト 読み取り」を付与しています。

以下の確認メッセージが表示されるので、「一般公開アクセスを許可」をクリックします。

Reactのビルドファイル作成

今回はcreate-react-appで生成されたページを公開してみますので、ターミナルから以下コマンドでプロジェクトを作成します。

npx create-react-app {プロジェクト名} --template typescript

プロジェクトの作成が完了したら、package.jsonを開いてhomepageプロパティを追加します。

package.json

{
  "name": "gcs-website",
  "version": "0.1.0",
  "private": true,
+ "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",

create-react-appでは、jsやcssを絶対パスで読み込むようにビルドされるため、homepageプロパティを追加し、相対パスで読み込むようにする必要があります。
homepageプロパティを追加しないと、Cloud Storageに公開したページにアクセスしてもjsやcssが読み込めずに画面が表示されません。

ターミナルから以下コマンドを実行してビルドします。
ビルドが完了すると、プロジェクト直下にbuildフォルダが生成されます。

npm run build

ビルドファイルのアップロード

buildフォルダ内のファイルをGCSで作成したバケットへアップロードします。

公開ページへアクセス

index.htmlの公開アクセスから「URLをコピー」をクリックします。

コピーしたURLへアクセスすると、お馴染みのreactのページが表示されます。

まとめ

今回初めてGCPを触ったのですが、なかなかUIに慣れず戸惑いましたが、なんとか公開までできました！
ただhomepageプロパティの存在を知らずに、ローカルでは表示されるのにGCSだとなぜ何も表示されないんだ。。と少し嵌りました😂

これからGCPを触る方の参考になれば幸いです✨