今回は無料でサイトをネット上に公開する方法を書いていきます。
Googleの提供しているFirebaseのHostingというサービスを使えば、サイトをネット上に公開することができます。
Firebaseには有料プランも色々とあるのですが、個人サイトなど小規模なサイトであれば無料プランの容量1GBで十分かと思います。
それでは書いていきます。Googleアカウントが必要なので注意してください。
Firebaseのプロジェクトの作成
まずは、GoogleにログインしてFirebaseのページにアクセスします。
トップページの右上から「コンソールへ移動」をクリックします。
移動したら、「プロジェクトを追加」というところをクリックしましょう。ここで、サイトの管理をしていきます。
こちらのプロジェクトは１つのサイトにつき１つ必要になってきます。
つまり２つサイトを公開したいのであれば２つプロジェクトを、３つサイトを公開したいのであれば３つプロジェクトを作成する必要があります。
では、Testという名前のプロジェクトを作ってみます。するとプロジェクトIDというものが作成されます。
今回はGoogleアナリティクスとの連携はオフにしていますが、設定する場合はアナリティクスの地域やロケーションを日本にしてあげましょう。
asia-northeast1というのが日本になります。
それではプロジェクトの作成ボタンをクリックしてあげます。
アナリティクスの設定項目などが出てきますが、今回は設定していないので全てチェックせずに作成します。
するとプロジェクトの作成が数秒で行われます。
完了したら下記の画面が出てきます。「次へ」をクリックしましょう。
下記のページに飛ぶはずです。
これで、サイトを公開するためのプロジェクトが作成されました。
アップロードするファイルの準備
それでは早速ローカルにあるサイトをネットにアップしていきたいのですが、こちらも色々と事前準備があります。
プロジェクトの中でサイトを読み込むフォルダーの名前はpublicと決まっているので、
まず、ローカルでpublicという名前のフォルダーを作成してあげて、その中に公開したいサイトのファイルや画像を入れてあげます。
次に、アップロードの準備をしていきましょう。
Node.jsでFirebase-toolsのインストール
アップロードの方法はNode.jsの中にある、Firebaseのツールを使ってコマンドでアップロードすることができます。
ではまず、npmを使ってFirebase-toolsをグローバルにインストールしてあげます。
npm install -g firebase-tools終わったら、きちんとインストールされたかバージョン確認のコマンドで確かめてあげましょう。
firebase -V次にfirebaseにログインする必要があるので、firebase loginとコマンド入力します。
firebase login?Allow Firebase to collect anonymous CLI usage and error reporting informaiton? (Y/h)
という文が出てきますが、これはFirebaseの使用状況の情報収集に協力してあげるかということなので、
どちらを選んでも問題はありません。そのままEnterを押すとYesとなります。
?Allow Firebase to collect anonymous CLI usage and error reporting informaiton? (Y/h)どちらかを選んであげると、Googleのログイン画面ページが開きますのでログインしてFrebaseとの設定を許可にしてあげましょう。
コマンドラインに戻ってあげて、Success! Logged in as あなたのアカウント
という文字が表示されていたら成功です。
Success! Logged in as あなたのアカウントコマンドでアップロードの準備
今度はアップロードするサイトのディレクトリまで移動します。
では、適当にデスクトップにフォルダを新規作成してあげて（今回はTestというプロジェクトを作成したのでフォルダ名をtestとします）
その中に先ほどつくってあげたpublicフォルダーを入れてあげます。
ここにコマンドラインのディレクトリを移動してあげて、現在地がtestとなるようにします。
C:¥Users¥Desktop¥test>こんな感じでtestのディレクトリまで移動できたらOKです。
そうしたら、firebase init –project=というコマンドを打ってあげます。
? Are you ready to proceed?(Y/n)（このディレクトリでFirebaseプロジェクトを続行しますか？）という文が出てきますので、Yを押して次に進みます。
FirebaseのどのCLIを使用しますか？と聞かれるので、方向キーでHostingまで移動してスペースキーを入力します。
するとこんな感じで括弧の中に米印が入って選択されたという意味になります。これでエンターキーを押して進みます。
次に?Select a default Firebase project for this directory?(このディレクトリをFirebaseのプロジェクトと紐づけるか)
と聞かれるので、移動キーで先ほどFirebaseで作ったプロジェクトを選択してエンターキーを押します。
さらに続けて、?What do you want to use as your public directory?(公開用のディレクトリとしてどんな名前のフォルダを使うか)と聞かれます。
これが公開されるフォルダーの名前になります。
デフォルトではpublicとなるのでこのままエンターキーを押して進みます。
そして次に、?configure as a single-page app(rewrite all urls to /index.html)?（シングルアプリケーションとして設定するか）と聞かれます。
これは、Yを押すとfirebase.jsonにリライト設定が追記され、Nを押すと404.htmlが作成されます。
Yesにすると、存在しないURLにアクセスしたときfilebase.jsonにリダイレクトさせるルールを書いて404ページを回避させたり設定することができますが、今回はそこまでの設定はしないのでNoにしていきます。
最後に、? File public/index.html already exists. OverWrite?(publicフォルダの中に既に存在するindex.htmlを上書きするか)聞かれるので、Noを押して進みます。
Firebase initialization complete!
と出たら、初期設定が完了したということで成功です。フォルダの中にいろんなファイルができていると思います。
基本的にはこれらのファイルはいじらないようにしてあげましょう。
また、publicの中にも404.htmlとエラーページ用のファイルが作成されていることも確認してください。
サイトをネット上にアップロードする
準備は整ったのでいよいよサイトをネット上にアップロードします。
firebase deployとコマンドを入力します。
暫く待って、Deploy complete!と出たらOKです。
これでサイトがネット上にアップロードされ、URL（下記画像の赤線部分）が発行されます。
コピペしてブラウザで見ることができます。
編集したい場合は、publicフォルダの中のファイルをいじったあとに、再びコマンドでdeployしてあげればOKです。
このように、一度設定してしまえば非常に簡単にアップロードできる上、無料でネット上に公開できるので是非とも活用していきましょう。
