フラミナル

考え方や調べたことを書き殴ります。IT技術系記事多め

FirebaseでWebチャットアプリをデプロイしてみた

こちらの手順を参考にGoogleのmBaasであるFirebaseでアプリをデプロイしたいと思います。

参考 FirebaseでWebチャットアプリをデプロイするまで(1時間コース) - Qiita

環境

GCPのVMインスタンス

root@instance-1:~# uname -a
Linux instance-1 4.9.0-3-amd64 #1 SMP Debian 4.9.30-2+deb9u3 (2017-08-06) x86_64 GNU/Linux

必要なものを入れる

root@instance-1:~# apt install git
root@instance-1:~# git clone https://github.com/firebase/friendlychat
Cloning into 'friendlychat'...

remote: Counting objects: 2818, done.
remote: Total 2818 (delta 0), reused 0 (delta 0), pack-reused 2818
Receiving objects: 100% (2818/2818), 1.40 MiB | 0 bytes/s, done.
Resolving deltas: 100% (1387/1387), done.
root@instance-1:~#

Firebaseプロジェクトの作成

f:id:lirlia:20170908161142p:plain

ここから https://console.firebase.google.com/u/0/

作ったら、これをクリック f:id:lirlia:20170908161244p:plain

貼り付け用のコード(API Key等を隠してます)

<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "xx",
    authDomain: "xx",
    databaseURL: "xx",
    projectId: "xx",
    storageBucket: "xx",
    messagingSenderId: "xxx"
  };
  firebase.initializeApp(config);
</script>

コピーした内容をfriendlychat/web-start/index.htmlに貼り付け。

その後firebaseのサイトから画面左のAuthenticarionをクリックしログイン方法を設定をクリック。

とりあえず匿名を有効化。

f:id:lirlia:20170908161735p:plain

Firebaseコマンドラインのインストール

firebaseのサイトから画面左のHostingをクリック

f:id:lirlia:20170908161915p:plain

npmのインストール

npm install -g firebase-toolsを実行する前にnpmがないのでインストールする。

node.jsのサイトにある。 * Download | Node.js

インストール方法はこちら * パッケージマネージャを利用した Node.js のインストール | Node.js

root@instance-1:~# curl -sL https://deb.nodesource.com/setup_6.x | bash -
root@instance-1:~# apt-get install nodejs
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following NEW packages will be installed:
  nodejs
0 upgraded, 1 newly installed, 0 to remove and 4 not upgraded.
Need to get 9,881 kB of archives.
After this operation, 44.4 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_6.x stretch/main amd64 nodejs amd64 6.11.3-1nodesource1 [9,881 kB]
Fetched 9,881 kB in 0s (29.1 MB/s)
Selecting previously unselected package nodejs.
(Reading database ... 37410 files and directories currently installed.)
Preparing to unpack .../nodejs_6.11.3-1nodesource1_amd64.deb ...
Unpacking nodejs (6.11.3-1nodesource1) ...
Setting up nodejs (6.11.3-1nodesource1) ...
Processing triggers for man-db (2.7.6.1-2) ...
root@instance-1:~#

firebase-toolsのインストール

root@instance-1:~# npm install -g firebase-tools

ちょっと時間かかります。

google認証

GCPなどリモート端末でやるときは以下の手順です。

root@instance-1:~/friendlychat# firebase login --no-localhost
? Allow Firebase to collect anonymous CLI usage information? Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/xxxxxxxxxx

ここででてきたURLへログインしGoogle認証をする。
その結果表示された文字列をコピーし↓に貼り付ける

? Paste authorization code here: xxxxxxx

✔  Success! Logged in as xxxxxx@gmail.com
root@instance-1:~/friendlychat#
root@instance-1:~/friendlychat/web-start# firebase init

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

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

  /root/friendlychat/web-start

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confir
m your choices. Hosting: Configure and deploy Firebase Hosting sites

=== 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.

? Select a default Firebase project for this directory: my-apps (my-apps-9b366)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? .

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

✔  Firebase initialization complete!
root@instance-1:~/friendlychat/web-start# firebase deploy

=== Deploying to 'my-apps-9b366'...

i  deploying database, hosting
✔  database: rules ready to deploy.
i  hosting: preparing public directory for upload...

✔  hosting: 2 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-apps-9b366/overview
Hosting URL: https://my-apps-9b366.firebaseapp.com
root@instance-1:~/friendlychat/web-start#

わーい、できたぞー。