HUGOで構築したブログをFirebase Hostingにデプロイする
概要
HUGOで構築したブログをホスティングサービスのFirebase Hostingにデプロイしてブログを外部公開します。
FirebaseはGoogleの提供する包括的なアプリ開発プラットフォームです。 Firebase HostingはFirebaseが提供するホスティングサービス機能になります。
前回までに作成したブログをFirebase Hostingにデプロイして外部公開します。
環境
- Macbook Pro 13inch, 2016
- macOS Catalina version 10.15.6
- Hugo 0.74.3
- npm 6.14.8
- firebase-tools 8.7.0
Firebase CLIのインストール
npmを使用してFirebaseのCLIをインストールします。
npmがない場合はまずnpmをインストールしてください。
$ npm i -g firebase-tools
インストールされたものを確認します。
$ which firebase
/usr/local/bin/firebase
$ firebase --version
8.7.0
Googleアカウントにログイン
Googleアカウントにログインします。
$ 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? No
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/...
Waiting for authentication...
✔ Success! Logged in as xxx@gmail.com
Firebase CLIがエラーレポートの収集について質問されますので、Y/Nで回答します。
今回はNoを選択しました。
そのあとに既定のブラウザが起動し、Googleアカウントのログインが要求されます。
ログインすると、Firebase CLIのアクセスを許可するかどうか質問されますので、これを許可してください。
ブラウザ上にFirebase CLIのログインが成功したメッセージが表示されます。
端末に戻るとログインに成功したメッセージがこちらにも表示されています。
Firebaseにログインできているか確認します。
$ firebase projects:list
✔ Preparing the list of your Firebase projects
No projects found.
結果が取得できていたら成功です。
Firebase Projectの作成
CLIから実行→失敗
Firebase Projectを作成します。
対話形式でプロジェクトを作成していきます。
Hostingまで移動して、スペースキーで選択し、エンターで次に進みます。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/nkmlab/src/github.com/nkmlab/blog
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
◯ 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
◯ Emulators: Set up local emulators for Firebase features
プロジェクトのセットアップを行います。
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
6~30文字でプロジェクト名を入力します。
S3と同様で恐らくFirebase上で一意である必要があるので、安直な名前だと名前の重複でエラーになります。
nkmlab-blogでいけました。
i If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
() nkmlab-blog
プロジェクトIDはそのままEnterします。
What would you like to call your project? (defaults to your project ID) ()
エラーになって終わりました。
firebase-debug.logを見ろと書いてます。
? What would you like to call your project? (defaults to your project ID)
✖ Creating Google Cloud Platform project
Error: Failed to create project. See firebase-debug.log for more info.
firebase-debug.logを確認すると、利用規約の同意がされていないと怒られていました。
エラーメッセージでググります。
stack overflowで同じ現象でのチケット（解決済み）がありました。
解決方法は、Webコンソールを使ってプロジェクトを作成する、です。
コマンドでプロジェクトを作成することはできないようです。
Webコンソールでプロジェクト作成→成功
大人しくWebコンソールからプロジェクトを作成します。
ブラウザでFirebaseにアクセスし、プロジェクトを作成します。
先ほどと同じ名前を入力します。
Googleアナリティクスを有効にします。
「Googleアナリティクスデータの共有にデフォルト設定を使用します」にチェックを入れ、利用規約に同意します。
プロジェクトの作成ボタンを押せば出来上がりです。
CLIからリトライ→成功
プロジェクトが作成できたら再度コマンドを実行します。
今度はUse an existing projectを選択して進めます。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ nkmlab-blog (nkmlab-blog)
先ほど作ったプロジェクトが表示されるのでEnterで進めます。
公開領域はpublicなのでそのままEnterします。
URLのリライトはNoを選択します。
i Using project nkmlab-blog (nkmlab-blog)
=== 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)? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
i Writing gitignore file to .gitignore...
✔ Firebase initialization complete!
無事にFirebase Hostingが作成されました。
Firebase Hostingへのデプロイ
Firebase Hostingへデプロイします。
hugoをビルドして、Firebaseにデプロイするのですが、コマンドを繋げてワンラインで実行できます。
$ hugo && firebase deploy
| JA
-------------------+-----
Pages | 15
Paginator pages | 0
Non-page files | 0
Static files | 9
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Total in 425 ms
=== Deploying to 'nkmlab-blog'...
i deploying hosting
i hosting[nkmlab-blog]: beginning deploy...
i hosting[nkmlab-blog]: found 26 files in public
✔ hosting[nkmlab-blog]: file upload complete
i hosting[nkmlab-blog]: finalizing version...
✔ hosting[nkmlab-blog]: version finalized
i hosting[nkmlab-blog]: releasing new version...
✔ hosting[nkmlab-blog]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/nkmlab-blog/overview
Hosting URL: https://nkmlab-blog.web.app
Hosting URLにブラウザでアクセスするとローカルサーバと同じものが表示されます。
まとめ
HUGOで構築したブログをホスティングサービスのFirebase Hostingにデプロイしました。
これでブログを外部公開できます。
一部でブラウザを使用する場面がありますが、概ねエディタとコマンドで完結できたことがすばらしいです。
デプロイコマンドを実行するだけで、新しい記事を公開できるようになりました。
次回はFirebaseにカスタムドメインを設定します。