23
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Cloud9からFirebase Hostingを使って無料で静的サイトを公開

Last updated at Posted at 2016-09-04

Cloud9でサイトを開発していてめちゃめちゃ簡単にデプロイできたので紹介します。
Googleに買収された
Firebase
をつかっていきます。
サインアップは済ましておいてください。

これで開発環境(Clooud9)、プロダクト環境(Firebase)も全部準備いらずでしかも無料!クラウドサービスは便利ですね。

#Firebase CLIをインストール

Cloud9ですでにnpmが使えるはずなので

$ npm install -g firebase-tools

でグローバル環境にfirebase CLIをインストール。

#ログイン

公式サイト通りだとローカル環境用の説明だったのでCloud9やオンライン開発環境用にコマンドを入力します。

$ firebase login --no-localhost

するとターミナルにURLが表示されグーグルへログイン、ターミナルでトークンを聞かれるのでそこへ行ってコピペします。

#初期化

$ firebase init

でいろいろ聞かれるんで答えていってください。
(CLIの使用情報を送っていいかとか、参照するディレクトリ名はどれにするだとか)

そうすると

firebase.jsonという設定ファイルが生成されるので、詳しいことはCustomize Hosting Behavior

を読んでください。

database.rules.jsonとかもあるんですがデータベース使わないならきにしないでください。
(本当はドメイン名さえわかれば簡単にアクセスできるのでちゃんと設定したほうがいいんですが、、、)

#デプロイ

デフォルトだとpublicディレクトリなんですがそこにindex.htmlがあり、それが最初に読み込まれる形になるので,
public以下にイメージファイルだのjavascriptだのcssだのをすべて置いてください。

あとは

$ firebase deploy

でサイトを公開することができます。ターミナルにサイトURL(.firebaseapp.com)が表示されます。
FirebaseのコンソールのHostingページで履歴を確認することができます。
URLもそこからかわかります。ロールバックもできます。

1GBまでのファイルなら無料アカウントでいけるそうなので、ぜひ使ってみてください。

23
18
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
23
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?