質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

Google App Engine

Google App Engineは、Googleの管理するデータセンター上でウェブアプリケーションの開発が可能なクラウドコンピュータ技術です。Java、Python、Go用にSDKが用意されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

CI(継続的インテグレーション)

CI(継続的インテグレーション)は、アプリ開発においてビルドとテストを繰り返すことで品質改善と納期短縮を図る手法です。JenkinsやTravis CIなどの専用ツールを利用してプロセスを自動化・半自動化して効率的に実施します。

Q&A

0回答

1123閲覧

App Engineに自動デプロイしても画面が真っ白

kobaryo04ysh

総合スコア29

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Google Cloud Platform

Google Cloud Platformは、Google社がクラウド上で提供しているサービス郡の総称です。エンドユーザー向けサービスと同様のインフラストラクチャーで運営されており、Webサイト開発から複雑なアプリ開発まで対応可能です。

Google App Engine

Google App Engineは、Googleの管理するデータセンター上でウェブアプリケーションの開発が可能なクラウドコンピュータ技術です。Java、Python、Go用にSDKが用意されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

CI(継続的インテグレーション)

CI(継続的インテグレーション)は、アプリ開発においてビルドとテストを繰り返すことで品質改善と納期短縮を図る手法です。JenkinsやTravis CIなどの専用ツールを利用してプロセスを自動化・半自動化して効率的に実施します。

0グッド

0クリップ

投稿2021/01/06 13:19

編集2022/01/12 10:55

Github actionsを使って、Reactのアプリの自動テスト自動デプロイ環境を構築しています。
デプロイ先はGCPのApp Engineで、dbにはfirestoreを使っています。

自動テストもデプロイもうまく行っていたのですが、デプロイされたURLにアクセスしてみると、画面が真っ白で何も表示されませんでした。
そこで、デベロッパーツールのconsoleを見てみたところ、以下のようなエラーが発生していました。

console

1Uncaught FirebaseError: projectId must be a string in FirebaseApp.options

ソース

以下はgithub actionsのテスト、デプロイ用のコードです。

deploy用のコード

deploy.yml

1#deploy用のyml 2name: CI 3 4on: 5 pull_request: 6 types: [closed] 7 8sequentially or in parallel 9jobs: 10 build: 11 runs-on: ubuntu-latest 12 if: github.event.pull_request.merged == true 13 14 steps: 15 - uses: actions/checkout@v2 16 - uses: google-github-actions/setup-gcloud@master 17 with: 18 project_id: ${{ secrets.GCP_PROJECT_ID }} 19 service_account_key: ${{ secrets.GCP_SA_KEY }} 20 export_default_credentials: true 21 22 - run: rm package-lock.json 23 - run: rm -rf node_modules 24 - name: npm install, build 25 run: | 26 npm install 27 CI=false npm run build 28 env: 29 FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} 30 31 - name: GAE deploy 32 run: | 33 echo 'github-actions@<projectidです>.iam.gserviceaccount.com' | 34 gcloud app deploy --quiet 35

test用のコード

test.yml

1#test用のyml 2name: Node.js CI 3 4on: pull_request 5 6jobs: 7 test: 8 runs-on: ubuntu-latest 9 10 strategy: 11 matrix: 12 node-version: [15.x] 13 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 14 15 steps: 16 - uses: actions/checkout@v2 17 - name: Cache Node.js modules 18 uses: actions/cache@v2 19 with: 20 path: ~/.npm 21 key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }} 22 restore-keys: | 23 ${{ runner.OS }}-node- 24 ${{ runner.OS }}- 25 - name: docker-compose up 26 run: docker-compose up -d firestore 27 - run: sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} 28 - run: npm install -g npm@latest 29 - run: rm package-lock.json 30 - run: rm -rf node_modules 31 - run: sed -i 's/babel-jest//g' package.json 32 - run: npm install 33 - run: CI=false npm run build 34 - run: npm test 35

試したこと

まず、github actionsのデプロイ用のコードのnpm run buildを行っている部分にenvとしてgithubのsecretsに登録したFIREBASE_TOKEN を指定しました。しかし、これではうまくいきませんでした。

また、手動でデプロイしていたときは普通に想定通り、作成したアプリが公開できていたので、もう一度手動で以下のコマンドを実行してデプロイしました。

console

1$ npm run build

console

1$ gcloud app deploy

すると、特にエラーなどの異常はなく普通にアプリが公開できました。

原因はFirebaseの認証周りの不具合だと思っているのですが、そもそもGithub ActionsでApp Engineにデプロイするときに- uses: google-github-actions/setup-gcloud@masterの部分でGCPの認証はできているのではないかなというのもあり、困惑しています。

GCPのプロジェクトを認証すること=Firebaseの認証をすることではない、ということなのでしょうか?

それとも、そもそも自分の認識(このエラーがfirebaseの認証周りによるもの)が間違っているのでしょうか?

小さなことでも何かわかることがあれば教えていただきたいです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問