LoginSignup
8
5

More than 5 years have passed since last update.

Firebaseを使ってWebサイトをデプロイするまで

Posted at

楽にサイトをデプロイする方法について調べていて、そのひとつであるFirebase Hostingを試してみたら思いのほかスピーディで感動したので、メモがてら記事にします。

前提

nodeがインストール済みであり、npmコマンドが使用できること

準備

  • Googleアカウントにログインします。
  • Firebaseの公式サイトを開きます。
  • プロジェクトを追加 という項目があるので選択し、任意の名前でプロジェクトを作成します。
  • コンソールが開いたら、Hostingを選択してダッシュボードを開きます。

5YSMhPQUX.png

Firebaseプロジェクトのセットアップ

この作業はローカルで行います。
ターミナル等を立ち上げて実行してください。

# Firebase CLI を利用できるようにします。
npm install firebase-tools --global

# デプロイしたいプロジェクトがあれば、そのディレクトリに移動してください。
cd /projectName

# Firebase にログインします。
firebase login

# 現在のディレクトリを、Firebaseプロジェクトとします。
firebase init

firebase initではすでにプロジェクトが作成されていた場合、それを選択できるようになっています。
もし作ってなかったゆえに「don't setup a default project」を選択していたとしても、後々以下のコマンドで設定できます。

# プロジェクト作成時に作られる、プロジェクト名を元にしたID
firebase use --add firebaseProjectID

Firebaseへのデプロイ

# Firebaseへのデプロイを行う
firebase deploy

console.png

うまくいけば、上記のような感じになります。
HostingURLから、実際にデプロイしたページを見ることができます。

感想

Webサイトを公開といったら、FC2ホームページみたいなサービスを使うか、ConohaのようなVPSを使ってサーバー環境を整えた上でアップロードするなど手間のかかるイメージがありました。

Firebase Hostingや GitHub Pagesを使えば手間いらずでデプロイできるので、より開発に専念することができるようになり、時間当たりの開発速度(生産性)も向上して素晴らしいと思います。

今後も、こういった楽をできるサービスや手間を減らすツールについては調べていきたいですね。

おまけ

とりあえず静的Webページをアップして遊んでいます。
https://portfolio-256ac.firebaseapp.com/

8
5
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
8
5