静的サイトのホスティングとして色々な選択肢があると思いますが、今回はFirebase Hostingを利用してみました。
個人的にはAWS S3とGithub Pagesの使用経験はあるのですが、新しいことにチャレンジするという意味も込めてFirebaseを使ってみました。
5分後にホスティングできるまでの手順
Firebaseプロジェクトを作成
ブラウザからFirebase consoleにアクセスして、プロジェクトを作成してください。
Nuxt.jsでファイル群を生成
Nuxt.jsのプロジェクトに移動して、以下のコマンドを打つと/distというディレクトリに公開用ファイルが生成されます。
$ npm run generate
Firebase CLIのインストール
Firebase CLIのインストールが済んでいない場合はインストールします。
CLIのインストールにはNode 5.10.0以降が必要とのことです。(2019.04現在)
$ npm install -g firebase-tools
Firebaseプロジェクトにログイン
ローカルマシンをFirebaseプロジェクトに紐づけます。
$ firebase login
NuxtプロジェクトとFirebaseを紐づける
NuxtプロジェクトとFirebaseを紐づける為に、
Nuxt.jsのプロジェクトのディレクトリに移動して、以下のコメント打ちます。
$ firebase init
コマンドを打つと、コマンドライン上で設定が始まります。
こんな感じに表示されるので、Hostingを選択します。
スペースキーを押せば、選択できます。
Firebaseのどのプロジェクトと紐づけるか聞かれるので、事前に作成したプロジェクトを選択します。
どのディレクトリを公開するか入力を求められるので、dist
と入力します。
最後にサイトをデプロイ
Nuxt.jsのプロジェクトのディレクトリで以下のコマンドを打つと、デプロイされます。
$ firebase deploy
ここまで進めると、firebase.json
と.firebaserc
というファイルが生成されます。
感想
今回はNuxt.jsのプロジェクトでしたが、他の静的サイトも簡単にホスティング出来そうですね。
個人的には、Firebaseのチュートリアルでチャットを作ったことしかなくて、ちゃんと使用したのははじめてした。まだまだ便利な機能がたくさんあるので、使っていきたいと思います。