こんにちは、オノユウ(@yumaonodera_)です。
ウェブサイトを公開したい人「プログラミング学習で作ったウェブサイトを無料で公開できる方法ないかなぁ。」
こういった方向けの記事。
本記事では、ウェブサイト公開サービス「Firebase（ファイアベース）」の使い方について解説します。
Firebaseとは
モバイルアプリの開発を支援するツールです。
Firebaseには豊富な機能があり、それらの機能を用いることで、アプリ開発が楽になります。
Firebaseの機能の一つに「Hosting（ホスティング）」という機能があります。
Hosting機能を用いることで、ウェブサイトを公開、管理することができます。
Firebaseの使い方
まずは、Firebaseにアクセスしましょう。
プロジェクトの作成
次に「ログイン」をクリックして、グーグルアカウントでログインしましょう。
グーグルアカウントをまだ作っていない方は、この際に作っておきましょう。
ログインしたらコンソールへ移動をクリックしましょう。
「プロジェクトを追加」をクリックします。
プロジェクト名を入力します。プロジェクト名はなんでもOKです。
下の3つのチェックボックスにチェックします。
スクロールすると「プロジェクトを作成」ボタンがあるので、クリックします。
「次へ」をクリックします。
公開フォルダの準備
いったんデスクトップに戻り、新規フォルダを作成します。
フォルダ名は先ほどFirebase上で作成したプロジェクト名に合わせると分かりやすいです。
先ほど作ったプロジェクトフォルダに公開したいサイトを入れます。
公開するフォルダは「public」とすることになっているので、フォルダ名は「public」に変更しましょう。
Node.jsのインストール
FirebaseはNode.jsというツールを使って操作するので、Node.jsをまだインストールしていない方はインストールしましょう。
推奨版をダウンロードすればOKです。
ダウンロードができたら、ダウンロードされたフォルダを開き、指示に従い、インストールしてください。
なお、途中でパスワードを聞かれますが、パソコンにログインする際のパスワードを入力すればOKです。
Spotlight検索で「ターミナル」を検索し、起動しましょう。
Windowsの場合は、「PowerShell」を使います。
「node -v」と入力します。
このようにバージョンが表示されればインストールされているということなのでOKです。
また、node.jsをインストールすると、「npm（ノード・パッケージ・マネージャー）」というツールもインストールされているはずなので、それも確認しましょう。
「npm -v」と入力します。
先ほどと同じように、バージョンが表示されればOKです。
Firebaseのインストール
管理者権限でFirebaseをインストールするので「sudo npm install -g firebase-tools」と入力します。
※Windowsの場合は「sudo」の部分は不要です。
パスワードを聞かれますが、パソコンにログインする際のパスワードを入力すればOKです。
「sudo firebase -V」と入力し、Firebaseがインストールされているか確認します。
※「-V」は大文字です。
Firebaseのログイン
「sudo firebase login」と入力します。
「匿名の情報を収集していいか？」と聞いてくるので、好みでY/nしましょう。
次にブラウザが開いて、Googleアカウントでログイン＆権限の承認を求められるので、承認しましょう。
プロジェクトフォルダの初期化
デスクトップにプロジェクトフォルダを作った場合は、「cd desktop/プロジェクト名」を入力してください。
このコマンドを打つことで、指定したフォルダの操作が可能になります。
※保存した場所によって「cd 保存場所名/プロジェクト名」というように打つコマンドが変わるので、注意してください。
「sudo firebase list」と入力します。
すると、Firebass上で作成したプロジェクトの一覧が表示されます。
表示された「Project ID」をコピーしてください。
「sudo firebase init –project=コピーしたProject ID」を入力します。
上下キーでカーソルを移動し、「Hostiong」にカーソルを合わせます。
「Hosting」にカーソルを合わせたら、スペースキーを押して選択します。
「Hosting」の場所に緑の印がついたら、return/Enterキーを押しましょう。
その後の設定は、基本的に全てreturn/Enterで問題ありません。
- What do you want to use as your public directory?（公開用フォルダとして何を指定するか）
→公開したいのでYes - Configure as a single-page app (rewrite all urls to /index.html)?（シングルページアプリケーションとして設定するか）
→一般的なウェブサイトであればNo - File public/index.html already exists. Overwrite? （public / index.htmlは既に存在します。上書きしますか？ ）
→上書きされては困るのでNo
プロジェクトフォルダが初期化されているか確認してみましょう。
「firebase.json」という設定ファイルが追加されているはずです。
「404.html」というエラーページ用のファイルが追加されているはずです。
サイトの公開
サイトの公開はターミナルで行います。
プロジェクトフォルダが指定されていることを確認し、「sudo firebase deploy」と入力します。
これで、サイトの公開は完了です。
ファイルを編集した際も、「sudo firebase deploy」コマンドを打つことで、サイトが更新されます。
「Hosting URL」が表示されるので、URLにアクセスし、確認してみましょう。
正しく表示されていればOKです。
まとめ
これまでの内容をまとめると、サイト公開までの流れは下記の通りです。
- プロジェクトの作成
- 公開フォルダの準備
- Node.jsのインストール（一度インストールしたら飛ばしてOK）
- Firebaseのインストール（一度インストールしたら飛ばしてOK）
- Firebaseのログイン（一度ログインしたら飛ばしてOK）
- プロジェクトフォルダの初期化
- サイトの公開
Firebaseでのサイト公開は、プログラミングの勉強で作ったものなど、ちょっとしたサイトを公開するのに便利です。
ぜひ活用してみてください。
コメント