search

MaximizedOwl / among-status

Helping tool playing for Among Us.
https://among-status.web.app/
1 stars 0 forks source link

Firebaseプレビューチャンネルを試してみる。 #44

Closed MaximizedOwl closed 3 years ago

MaximizedOwl commented 3 years ago

調査したいこと

ステージング環境として使えるかを念頭に置いた調査。

背景・経緯

開発の品質保証。

開始時の状況

マスターに直接プッシュして、それが本番環境にデプロイされている。

タスクリスト

障壁

とくになし

その他

MaximizedOwl commented 3 years ago

プレビューチャンネルを作成してみたときのメモ

=== Deploying to 'among-status'...

i deploying hosting i hosting[among-status]: beginning deploy... i hosting[among-status]: found 32 files in build ✔ hosting[among-status]: file upload complete i hosting[among-status]: finalizing version... ✔ hosting[among-status]: version finalized i hosting[among-status]: releasing new version... ✔ hosting[among-status]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/among-status/overview Hosting URL: https://among-status.web.app

⚠ hosting:channel: Unable to add channel domain to Firebase Auth. Visit the Firebase Console at https://console.firebase.google.com/project/among-status/authentication/providers

⚠ hosting:channel: Unable to sync Firebase Auth state. ✔ hosting:channel: Channel URL (among-status): https://among-status--test-preview-odu9ly9i.web.app [expires 2021-06-21 18:30:22] MyMacBookAir:among-status hoge$ 


- その他
下記のプレビュー先URLを見てみたが、初期のindex.htmlが表示されただけだった。
https://among-status--test-preview-odu9ly9i.web.app/
おそらくプレビューチャネルでは'/build/'以下のファイルではなく、public内が表示されているのだと思う。

![スクリーンショット 2021-06-14 19 55 21](https://user-images.githubusercontent.com/78365103/121884316-c10d9200-cd4d-11eb-8578-dbee0a365509.png)
MaximizedOwl commented 3 years ago

npm run buildを実行してから再度プレビューチャネルの作成を試みる。

MyMacBookAir:among-status makiokarasawa$ npm run build

> among-status@4.0.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  130.28 KB (+12.99 KB)  build/static/js/2.1ec75739.chunk.js
  10.68 KB (+3.73 KB)    build/static/js/main.5d95c3f5.chunk.js
  778 B (-9 B)           build/static/js/runtime-main.839d749a.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment
MaximizedOwl commented 3 years ago

同じチャネルIDでやってみた結果、先程のチャネルに上書きされた模様。

MyMacBookAir:among-status makiokarasawa$ firebase hosting:channel:deploy test_preview

=== Deploying to 'among-status'...

i deploying hosting i hosting[among-status]: beginning deploy... i hosting[among-status]: found 33 files in build ✔ hosting[among-status]: file upload complete i hosting[among-status]: finalizing version... ✔ hosting[among-status]: version finalized i hosting[among-status]: releasing new version... ✔ hosting[among-status]: release complete

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/among-status/overview Hosting URL: https://among-status.web.app

⚠ hosting:channel: Unable to add channel domain to Firebase Auth. Visit the Firebase Console at https://console.firebase.google.com/project/among-status/authentication/providers

⚠ hosting:channel: Unable to sync Firebase Auth state. ✔ hosting:channel: Channel URL (among-status): https://among-status--test-preview-odu9ly9i.web.app [expires 2021-06-21 20:14:14]

╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │ │ Update available 9.10.0 → 9.12.1 │ │ To update to the latest version using npm, run npm install -g firebase-tools │ │ For other CLI management options, visit the CLI documentation (https://firebase.google.com/docs/cli#update-cli) │ │ │ │ │ │ │ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

スクリーンショット 2021-06-14 20 16 31

今度は表示された。

MaximizedOwl commented 3 years ago

DBに本番用データなどがあるならまだしも、今回の仕様上プレビューチャネルをステージング環境として運用してもいいのではないかと思う。 つまり、featureブランチでのプレビューチャンネルへのデプロイ≒ステージング環境へのデプロイ+master(プロダクション環境)へのプルリクとすればいいと思う。 プレビューチャンネルの動作で以上がなければ、プルリクを許可して本番環境にマージされる。そしてmasterにマージされたソースコードがプロダクション環境にデプロイされる流れ。これで良さそう。

MaximizedOwl commented 3 years ago

Firebase FunctionsのBasic認証を使ってアクセス制限を試みる。

MaximizedOwl commented 3 years ago

流れでFirestoreも使うことになったがやってみる。

npm install firebase-admin --saveの実行。

npm関係で脆弱性があったみたいなのでnpm audit fixの実行。

MyMacBookAir:among-status makiokarasawa$ npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: type-fest@0.11.0
npm ERR! node_modules/type-fest
npm ERR!   type-fest@"^0.11.0" from ansi-escapes@4.3.1
npm ERR!   node_modules/ansi-escapes
npm ERR!     ansi-escapes@"^4.2.1" from @jest/core@26.6.3
npm ERR!     node_modules/@jest/core
npm ERR!       @jest/core@"^26.6.0" from jest@26.6.0
npm ERR!       node_modules/jest
npm ERR!         peer jest@"^26.0.0" from jest-watch-typeahead@0.6.1
npm ERR!         node_modules/jest-watch-typeahead
npm ERR!         1 more (react-scripts)
npm ERR!       1 more (jest-cli)
npm ERR!     ansi-escapes@"^4.3.1" from jest-watch-typeahead@0.6.1
npm ERR!     node_modules/jest-watch-typeahead
npm ERR!       jest-watch-typeahead@"0.6.1" from react-scripts@4.0.3
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"latest" from the root project
npm ERR!     2 more (jest-watcher, terminal-link)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional type-fest@"^0.13.1" from @pmmmwh/react-refresh-webpack-plugin@0.4.3
npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin
npm ERR!   @pmmmwh/react-refresh-webpack-plugin@"0.4.3" from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"latest" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/makiokarasawa/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/makiokarasawa/.npm/_logs/2021-06-14T13_33_40_283Z-debug.log

めちゃくちゃエラーを吐かれた…。 が、いらなかったぽいので一旦アンインストール。 npm uninstall firebase-adminを実行。

firebase init firestoreを実行。

マニュアルに沿って、そのままデフォルト値を選択。

MyMacBookAir:among-status makiokarasawa$ firebase init firestore

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/makiokarasawa/Documents/Sandbox/among-status

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using among-status.

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
MaximizedOwl commented 3 years ago

firebase init functionsを実行。

MyMacBookAir:among-status makiokarasawa$ firebase init functions

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/makiokarasawa/Documents/Sandbox/among-status

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using among-status.

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

added 227 packages, and audited 228 packages in 17s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

なおドキュメントには

初期化時に作成された package.json ファイルには、重要なキー "engines": {"node": "10"} が格納されています。

とあるが、現在のバージョンは14。

MaximizedOwl commented 3 years ago

index.jsを編集する。 firebase-adminはfuncitonsディレクトリにすでに入っている。

MaximizedOwl commented 3 years ago

タスクリストの「プレビューチャネル表示制限設定」は #52 に譲り、プレビューチャネルの基礎的な設定は完了としてIssueも完了とする。