概要
この記事はFirebase Hostingを使用して静的サイトをデプロイする手順を確認したメモです。
記事の前半はシンプルなデモサイト(index.htmlファイル1つだけ)をデプロイする手順、後半はVue.jsアプリケーションのひな型をデプロイする手順になります。
Hostingを利用するにはFirebaseにプロジェクトを作成する必要がありますが、プロジェクトの作成手順は省略し作成済みの前提で進めます。
環境
- Windows 10 Professional
- Node.js 6.11.5
- Firabase CLI 3.18.4
参考
- [Firebase Hosting] (https://firebase.google.com/docs/hosting/)
Hostingを利用するための事前準備
firebase-toolsのインストール
プロジェクトの初期化やデプロイに使用するfirebase-toolsというコマンドラインツールをインストールします。
> npm install firebase-tools --global
バージョンの確認
> firebase -V
3.18.4
認証
Googleアカウントで認証します。途中でブラウザが立ち上がり認証画面が表示されるので認証するGoogleアカウントを選択（または入力）します。
> firebase login
デモサイトをデプロイする
デモサイトを作成しデプロイするまでの一連の操作を確認しました。
プロジェクトディレクトリの作成と初期化
プロジェクトのディレクトリを作成し、
> mkdir hosting-memo
> cd hosting-memo
init hostingコマンドでディレクトリを初期化します。途中でいくつか選択肢がありますがこの後で補足します。
> firebase init hosting
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
D:\dev\firebase-workspace\hosting-demo
? Are you ready to proceed? Yes
=== 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: project********* (project*********)
=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
選択肢について
作成するプロジェクトディレクトリをFirebaseのプロジェクトに関連付けます。
この例では、既存のFirebaseプロジェクトを選択肢から選んでいます。なお、ここで関連付けなくても後からfirebase useコマンドで設定することもできます。
? Select a default Firebase project for this directory:
[don't setup a default project]
> project********* (project*********)
[create a new project]
index.htmlファイルが存在する公開するディレクトリを指定します。ここではデフォルトのpublicをそのまま利用しました。指定したディレクトリにindex.htmlファイルが存在しない場合は、自動的にデモ用のファイルが生成されます。
? What do you want to use as your public directory? (public)
プロジェクトディレクトリの構成
初期化直後のディレクトリは下記のようになっています。publicディレクトリのindex.htmlファイルがデプロイの対象になります。
/hosting-memo
|
+--- /public
| |
| +--- index.html
|
+--- .firebaserc
|
+--- firebase.json
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
ローカルでテスト
プロジェクトディレクトリでserveコマンドを実行すると、ローカルサーバーが起動し、ローカル上でアプリケーションの動作確認ができます。
> firebase serve
=== Serving from 'D:\dev\firebase-workspace\hosting-demo'...
i hosting: Serving hosting files from: public
+ hosting: Local server: http://localhost:5000
// ...アクセスログが出力されます
デプロイ
プロジェクトディレクトリでdeployコマンドを実行してデプロイします。
> firebase deploy
=== Deploying to 'project********'...
i deploying hosting
i hosting: preparing public directory for upload...
+ hosting: 1 files uploaded successfully
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/project********/overview
Hosting URL: https://project********.firebaseapp.com
コンソールに表示されているHosting URLにアクセスします。下図のページはinit hostingで自動的に生成されたデモページです。
Hostingダッシュボードでデプロイされたこと（履歴）が確認できます。
サイトを停止させる
デプロイしたサイトを停止するにはhosting:disableコマンドを実行します。（2018/05現在、ダッシュボード上では出来ないようです。）
> firebase hosting:disable
? Are you sure you want to disable Firebase Hosting?
This will immediately make your site inaccessible! Yes
+ Hosting has been disabled for project********. Deploy a new version to re-enable.
停止後にアクセスするとNot Foundが表示されます。
Hostingダッシュボードでも停止していること（履歴）が確認できます。
Vue.jsアプリケーションをデプロイする
vue-cliで生成したVue.jsアプリケーションのひな型をデプロイします。
> vue init webpack hosting-vue-demo
ビルド
distディレクトリにビルド結果が出力されます。これらのファイルがデプロイするときにhostingにアップロードされます。
> npm run build
/hosting-vue-demo
|
+--- /dist
|
+--- /static
| |
| +--- /css
| | |
| | +--- app.cca059254702f9ed953b7df749673cf4.css
| | +--- app.cca059254702f9ed953b7df749673cf4.css.map
| |
| +--- /js
| |
| +--- app.f16ac5c624284d30f5af.js
| +--- app.f16ac5c624284d30f5af.js.map
| +--- manifest.2ae2e69a05c33dfc65f8.js
| +--- manifest.2ae2e69a05c33dfc65f8.js.map
| +--- vendor.7fed9fa7b7ba482410b7.js
| +--- vendor.7fed9fa7b7ba482410b7.js.map
|
+--- index.html
ディレクトリを初期化
init hostingコマンドでVue.jsアプリケーションのプロジェクトディレクトリを初期化します。
> firebase init hosting
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
D:\dev\firebase-workspace\hosting-vue-demo
? Are you ready to proceed? Yes
=== 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: project********* (project*********)
=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
選択肢について
公開するディレクトリをdistにするようにします。
? What do you want to use as your public directory? dist
index.htmlファイルを上書きしないようにします。
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
ローカルでテスト
ビルドしてdistディレクトリに出力したファイルでテストします。
> firebase serve
=== Serving from 'D:\dev\firebase-workspace\hosting-vue-demo'...
i hosting: Serving hosting files from: dist
+ hosting: Local server: http://localhost:5000
デプロイ
ローカルサーバーで動作確認して問題がなければdeployコマンドでhostingへデプロイします。
> firebase deploy
=== Deploying to 'project*********'...
i deploying hosting
i hosting: preparing dist directory for upload...
+ hosting: 9 files uploaded successfully
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/project*********/overview
Hosting URL: https://project*********.firebaseapp.com
コンソールに出力されたHosting URLにアクセスして確認します。
