LoginSignup
3
7

More than 5 years have passed since last update.

Nuxt.jsで作った静的サイトをFirebase Hostingを使ってホスティング

Posted at

lockup.png

静的サイトのホスティングとして色々な選択肢があると思いますが、今回は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

コマンドを打つと、コマンドライン上で設定が始まります。

スクリーンショット 2019-04-19 21.19.45.png
こんな感じに表示されるので、Hostingを選択します。
スペースキーを押せば、選択できます。

スクリーンショット 2019-04-19 21.22.20.png
Hostingを選択。

スクリーンショット 2019-04-19 21.22.52.png
Firebaseのどのプロジェクトと紐づけるか聞かれるので、事前に作成したプロジェクトを選択します。

スクリーンショット 2019-04-19 21.23.12.png
どのディレクトリを公開するか入力を求められるので、distと入力します。

最後にサイトをデプロイ

Nuxt.jsのプロジェクトのディレクトリで以下のコマンドを打つと、デプロイされます。

$ firebase deploy

ここまで進めると、firebase.json.firebasercというファイルが生成されます。

感想

今回はNuxt.jsのプロジェクトでしたが、他の静的サイトも簡単にホスティング出来そうですね。
個人的には、Firebaseのチュートリアルでチャットを作ったことしかなくて、ちゃんと使用したのははじめてした。まだまだ便利な機能がたくさんあるので、使っていきたいと思います。

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7