Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

Firebaseでウェブサイトを公開しよう

スポンサーリンク

firebase

 

「30DAYSトライアル 1st ポートフォリオ編」で作った作品をWeb上に公開する際に「Firebase」のホスティング機能を使いWeb上にアップロードしたので、その方法をまとめした。

 

Firebaseにログイン

「使ってみる」のボタンを押して、Googleアカウントでログインします。

 

firebase login

 

プロジェクトを作成

ログインが完了するとトップ画面にある「プロジェクトを追加」のタイルをクリックします。

 

firebase project

 

「プロジェクトを追加」をクリックするとプロジェクト作成手順①としてプロジェクトに名前をつけます。

この時プロジェクトIDも分かりやすい名前に変更します。(ピンクのラインで囲った部分をクリックすると変更画面が出ます)

 

プロジェクトIDはサイトのドメインにも反映されるので、自動的に付与されるランダムな英数字より分かりやすい名前に変えるのがオススメです。

 

firebase project id

firebase project id

 

プロジェクト作成手順②③ではアナリティクスの導入に関しての設定です。

私は特にこだわりがないので、推奨とデフォルトを選び先に進みました。

 

firebase project

firebase project

 

「プロジェクトを作成」ボタンを押すと作成が開始します。

インターネットのスピードにもよるかもですが、1〜2分程で完了しました。

creating a project

 

準備ができたようなので、「続行」ボタンを押して進みましょう

creating a project

 

作成したプロジェクト内のHostingページに移動

作成したプロジェクトのトップページが開かれるので、左側のサイドバーから「Hosting」(ピンクで囲っている部分)をクリックしてHostingページに移動します。

 

project hosting

 

Hostingページに移動したら「始める」のボタンをクリックするとサイトのアップロード手順が確認できます。

 

project hosting

 

コマンドラインを起動して手順通りに進める

 

サイトのアップロード手順が開いたら、使っているパソコンのコマンドラインを起動して手順通りに進めていきます。

 

cd line

cd line

 

「firebase init」でFirebaseをコマンド内で実行するのですが、このとき、公開したいサイトのフォルダーが入っているディレクトリをコマンドで設定した後でFirebaseを実行してください(firebase initする)。

 

私はそのこと↑をよくわかっていなくて、ディプロイしてもファイルがアップロードされず5回位失敗した後に気付きました。。。

 

そして、コマンドラインの部分は説明動画↓を見ながら一緒に進めました。(英語です)

Getting Started with Firebase Hosting on the Web - Firecasts - YouTube

 

サイト公開完了

コマンド上で「deploy completed」が出たら早速サイトを見に行ってみましょう!

URLは

  • プロジェクトID.web.app
  • プロジェクトID.firebaseapp.com

でページが表示されます。

作成したプロジェクト内のHostingページにあるURLからもアクセスできるので試してみてください。

 

まとめ

FirebaseはGoogleのアカウントがあれば無料で使えるので、個人利用やにはぴったりです。(有料版もありますが、30DAYSトライアルで作成した作品のアップロードであれば無料で十分でした)

 

また、動画と同じように進めて行けばなんとかディプロイまでたどり着けるはずなので、コマンドの画面に苦手意識がある方も果敢にチャレンジしてみてください。

 

 「30DAYSトライアル 1st ポートフォリオ編」の記事はこちら↓

treatmyself.hatenablog.jp