開発環境の準備
Dockerfile
FROM node:12-alpine
RUN apk update && \
apk add git && \
npm install -g npm && \
npm install -g firebase-tools
WORKDIR /app
docker-compose.yml
version: '3.7'
services:
app:
build: .
ports:
- 5000:5000
- 9005:9005
volumes:
- ./:/app
tty: true
portsの5000はserveしたとき、9005はFirebase CLIでログインするときに必要になる。
以下のコマンドでコンテナを起動できればOK。
$ docker-compose up -d --build
Firebaseの設定
起動したコンテナに入る。app はワークディレクトリ。
$ docker-compose exec app sh
Googleにログイン。
# firebase login
使用状況を送るか聞かれるので適当に選ぶ。
# firebase login i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you. ? Allow Firebase to collect CLI usage and error reporting information? (Y/n)
表示されたURLにアクセスして認証する。
# Visit this URL on this device to log in: https://accounts.google.com/o/oauth2/auth?......... Waiting for authentication...
認証に成功すると以下の画面が表示される。
Firebaseプロジェクトの作成
Firebaseプロジェクトを作成する。
# firebase init
Hostingを選択する。
# firebase init ######## #### ######## ######## ######## ### ###### ######## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ######## ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## You're about to initialize a Firebase project in this directory: /app Before we get started, keep in mind: * You are currently outside your home directory ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Database: Deploy Firebase Realtime Database Rules ◯ Firestore: Deploy rules and create indexes for Firestore ◯ Functions: Configure and deploy Cloud Functions ❯◉ Hosting: Configure and deploy Firebase Hosting sites ◯ Storage: Deploy Cloud Storage security rules
Firebaseプロジェクトの設定。状況に合わせて選択する。 今回はFirebaseコンソールでプロジェクトは作成済み。
=== 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. ? Please select an option: (Use arrow keys) ❯ Use an existing project Create a new project Add Firebase to an existing Google Cloud Platform project Don't set up a default project
Hostingの設定
publicディレクトリを設定する。今回はデフォルトのまま進める。
=== 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? (public)
SPAにするかどうか設定する。
? Configure as a single-page app (rewrite all urls to /index.html)?
設定が完了するとfirebase.jsonや.firebasercファイルが生成される。
ローカルで動作確認
Dockerコンテナで動かしているのでHostを指定する。
# firebase serve --host 0.0.0.0
http://localhost:5000にアクセスすると以下の画面が表示される。
デプロイ
ローカルで動作確認が取れたらデプロイする。
# firebase deploy === Deploying to 'shoueian-18de6'... i deploying hosting i hosting[shoueian-18de6]: beginning deploy... i hosting[shoueian-18de6]: found 2 files in public ✔ hosting[shoueian-18de6]: file upload complete i hosting[shoueian-18de6]: finalizing version... ✔ hosting[shoueian-18de6]: version finalized i hosting[shoueian-18de6]: releasing new version... ✔ hosting[shoueian-18de6]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/.... Hosting URL: https://xxxxxxxxxx.firebaseapp.com
Hosting URLにアクセスするとデプロイされていることが確認できる。
