HTML,CSSでWEBサイトを作って無料で公開してみよう -google FireBaseで公開する4つの手順-初心者でも簡単 

firebase
[adsense]

HTML,CSSでWEBサイトを作って無料で公開する方法 -google FireBaseで公開してみよう-

今回は、前回のHTML,CSSを使ってwebサイトを作る方法の続編にあたります。

前回作成したHTML,CSSのファイルをサーバーと呼ばれるところに、

アップロードして全世界に公開してみよう

 

サーバーについては、こちらで詳しく書いてますので興味のある方は読んでみてください

 

今回はgoogle が運営するFireBaseと呼ばれるクラウドで公開します。

FIreBaseは本来企業などが利用するには有料です。

ただ今回のように個人利用でなおかつデータ通信量が

少ない場合においては無料で利用できます。

  

とりあえずアップロードを体験してみたい人

初めてwebサイトを作ってみたい人

・試しにどんな感じになるのかやってみたい人

   

という人にはおすすめです!

 

FireBaseとは

FIre Baseとはgoogle が運営するクラウドサービスです。

webアプリやwebサービスを簡単に世界中に公開することができ、現在の

サーバーの複雑なシステムをより簡単にできる様に開発されています

このFireBaseの開発が進めば、将来的にサーバーサイドのエンジニアの仕事が

必要なくなるとか、ならないとか。それほど画期的なサービスなのです。

 

今回はwebサイトをアップロードする方法を解説します。

webサイトもアップロードもほんとに簡単にできてしまいます。

では一つずつみていきましょう。

 

[adsense]

FireBaseにログインしよう

まずはgoogleアカウントにログインし、FireBaseでのプロジェクト作成していきます。

まずFirebaseと検索すれば、一番上に出てきますのでFirebaseを開いて

使ってみるをクリックしましょう。

 

 そしてプロジェクトを追加をクリック。

   

プロジェクト名を入力します。

  

アナリティクスは、webサイトの来訪ユーザーのデータの統計情報を得ることが

できる、googleのサービスです。

今回はとりあえずwebサイトをアップロードする、ということが目的なので

オフで良いでしょう。

 

続行をクリックすると

作成が始まります。

 

 

作成が完了すると、ダッシュボードに移動します。

 

 

それではサイドバーのhostingをクリックしてみましょう。

ここからサーバーへのアップロードしていきます。

 

[adsense]

FIreBaseに作ったファイルをアップロードしよう

サイドバーのhostingをクリックすると、この様な画面になるので、

始めるをクリックします。

 

そうするとこの様な画面になります。

ちょっとよくわからない単語がいっぱい、、、となる方もいるかと思いますが、

心配はありません。

 

一つずつ解説していきます。

  

[adsense]

terminalを使ってみよう

とりあえずmacをお使いの方向けになります。

terminalというものをご存知でしょうか。

いわゆるプログラマーさんたちがよく見ているあれです。

 

普段使っているPCの画面での操作をグラフィックユーザーインターフェース(GUI)

というのに対し、コマンドラインユーザーインターフェース(CUI)と呼ばれます。

画面で画像をクリックしてPCを動かすかコマンドのみで動かすかの違いです。

Macの場合は普段の操作がGUI、ターミナルでの操作がCUIとなります。  

  

  

macの場合は、画面右上にある虫眼鏡のアイコンをクリックして

terminalと入力すれば出てきます。

そして先ほどの画面にあった灰色の背景の部分

npm install -g firebase-tools

を貼り付けてenterをします。

インストールが始まりますので、完了したら

Firebaseのダッシュボードに戻って、次へをクリック

  

そうするとまた、次の指示が出るので実行していきます。

 

プロジェクトの初期化

ターミナル ウィンドウを開き、ウェブアプリのルート ディレクトリに移動するか、ルート ディレクトリを作成します

とあります。

初めて読む方は何が書いてあるのかわからないと思いますが、ここも心配ありません。

ウェブアプリのルート ディレクトリとは、自分がアップロードしたいwebサイトのフォルダの場所ということです。

terminalを使い慣れていない方には、少し操作が難しいかもしれませんが、

大丈夫です。一つずつ進みましょう!

 

まずはwebサイトのフォルダをデスクトップに置きましょう。

(場所はどこでも構いません、今回はわかりやすくするため)

そしてterminalに 、

cd desktop と入力します。そしてエンターを押します。

これはデスクトップに移動します。という意味です。

次に、フォルダの名前が TEST だとすると、

cd TEST と入力します。そしてエンターを押します。

これで完了です。

ウェブアプリのルート ディレクトリにたどり着きました。

  

少しずつ慣れてきたのではないでしょうか、どんどんいきましょう

  

まずは firebase login と入力します。

すでにダッシュボードにログインしているとAlready logged in

と表示されます。

  

もしまだログインされていなければ、ログイン画面が新しく表示されるので

ログインすれば完了です。

 

次に firebase init と入力します。

そうすると、terminalにこの様なFIREBASEの文字が現れます。

時のよって表示形態は変わるかもしれません。

そして下にこの様な表示があると思います。

 

今回はこのHostingを選択します。

矢印キーで選択し、スペースで決定、エンターで次へ となります。

そして次にこの様な画面になります。先ほどと同じ様に選択します。

ここでは一番上のuse an exsiting projectを選択します。

 

そうすると一番初めに作成したFirebaseのプロジェクト名が表示されます。

testという名前でプロジェクトを作っていたので、今回はこのtest を選択します。

次に、また質問されます。

What do you want to use as your public directory? にはとりあえず何も

入力せずに、エンターを押します。

次の質問で、とりあえずは y を入力しエンターです。(どちらでも大丈夫です)

 

 

これで準備完了です。webサイトのフォルダを確認すると、

firebaseのファイルが自動的に作成されているのがわかります。

このpublicのところに、webサイトのファイルであるhtmlとcssのファイルを入れます。

そしてホームのHTMLファイルの名前をindex.htmlにしているか確認しましょう。

この様な感じです。

そして次で最後です!

 

 再びfirebaseのダッシュボードに戻って、次へをクリックすると

この様な画面になります。

デプロイって何? って感じだと思いますが、、

簡単にいうと公開することです。

そしてこの firebase deploy をterminalで入力します。

そうするとこの様な画面になると思います。これで完了です!

hostingURLのURLをコピーして、ブラウザのURLに貼り付ければ、、

 

 

出ました!

皆様はうまくできましたでしょうか!?

  

これでwebサイト公開できれば幸いです!

 

今回のhtml,cssのファイルは”html,cssでwebサイトを作ろう”で作ったファイルです。

よければこちらもお読みください。

 

後悔したwebサイトを更新するには

まずは上で書いた、初めて公開する手順と同じ様に、設置してあるwebアプリのフォルダの場所まで、terminalで移動します。

フォルダ名がデスクトップにある”test”の場合は、cd desktop, cd testですね。

そこで、firebase loginを入力します。

これで準備完了。

 

その状態で、firebase deployをコマンドて打つと更新できます。

このログイン状態が長期間続くと、次回deployする時にエラーになることがあるので、その際は一度firebase logoutして、再びfirebase loginすると通常通りfirebase deployがエラーなくできる様になります。 

sasurai

旅と写真を愛する人。 web制作の仕事をしています。 写真も撮ります。お仕事のお問い合わせはお気軽に。

シェアする

Translate »