Hostingツイートシェアはてブ送るPocketはじめにFirebase(https://firebase.google.com)はGoogleが提供しているモバイルおよびウェブアプリケーション向けの開発プラットフォームです。サーバーの管理の必要がなく、開発者はアプリケーションの開発に専念することができます。Firebaseには様々なサービスがあります。Hostingの利用法を紹介します。10.14.6Firebaseプロジェクトを作成するはじめにFirebaseのプロジェクトをFirebaseコンソールから作成します。ブラウザから以下のURLにアクセスしてください。https://console.firebase.google.comFirebaseコンソールからプロジェクトを追加します。”プロジェクトを追加”をクリックします。プロジェクト名を入力して”続行”をクリックします。Googleアナリティクスを有効にするかの確認画面に移ります。デフォルトでは有効になっています。”続行”をクリックしてください。既存のGoogleアナリティクスアカウントを選択するか新規作成をする画面に移ります。Googleアナリティクスに利用するアカウントを選択もしくは新規作成をします。アカウントの設定が完了したら、”プロジェクトを作成”をクリックします。プロジェクトの作成が完了するまで、しばらく時間がかかります。以上でFirebaseプロジェクトの作成は完了です。CLIのインストールを行います。CLIはFirebaseを操作するためのコマンドラインインターフェースです。CLIをインストールするにはNode.jsとnpmが必要です。本記事では、Node.jsのバージョン管理ツールであるnvmを利用してNode.jsをインストールします。nvmのインストールはじめにnvmをインストールします。ターミナルを開いて、以下のコマンドを実行してください。bashnvmのインストールが完了したら、ターミナルからログアウトしてターミナルを開き直してください。nodeのインストールターミナルを開き直したら、nvmコマンドでNode.jsのインストールを行います。今回はNode.jsのバージョン10の最新版をインストールしてみます。10インストールが完了したらバージョンを確認しておきましょう。CLIをインストールします。-gオプションを利用してグローバルインストールをしています。FirebaseにログインするターミナルからFirebaseを操作するために、Firebaseにログインします。loginコマンドを実行します。loginログインコマンドを実行するとCLIの使用状況やエラーレポートをFirebaseが収集することを許可するかの質問が表示されます。information?許可をする場合はy、許可をしない場合はnを入力してください。入力後、ブラウザにFirebaseアクセス認証の画面が表示されます。認証が完了するとターミナル上に完了メッセージが表示されます。認証を確認するFirebaseへのログインができているかをプロジェクトの一覧を表示して確認してみます。projects:listコマンドを実行します。total.プロジェクトを初期化するFirebaseのログイン設定を行ったローカル環境にプロジェクトディレクトリを作って、Firebase用に初期化をします。プロジェクトディレクトリを作成する任意のディレクトリにプロジェクト用のディレクトリを作成します。今回は”fbHostingTest”というディレクトリを作成しました。initコマンドを実行する作成したプロジェクトディレクトリに移動してFirebaseの初期化を行います。initコマンドを実行します。Hostingを選択するカーソルキーで”Hosting”に移動して、スペースキーを押して選択状態にします。rulesリターンキーを押すと、Firebaseプロジェクトの選択画面に移ります。Firebaseプロジェクトを選択する接続するFirebaseプロジェクトを選択します。project今回は事前に作成しておいたFirebaseプロジェクトを利用するので、このままリターンキーを押します。作成済みのFirebaseプロジェクトが表示されるので、利用するプロジェクトを選択してリターンキーを押してください。(HostingTest)リターンキーを押すと、公開ディレクトリの選択画面に移ります。公開ディレクトリを設定する外部公開するルートディレクトリを指定します。(public)デフォルトはpublicです。今回はpublicのままにするので、このままリターンキーを押します。リターンキーを押すと、サイトの構成を選択する画面に移ります。シングルページアプリケーションか選択するサイトの構成がシングルページ(1ページ)アプリケーションか通常ページのアプリケーションかの選択をします。(y/N)シングルページアプリケーションの場合はyを押します。シングルページにした場合、自動的にリライト設定が行われ、複数のURLで同一のページが表示されるようになります。今回は通常の静的ページを想定しているので、nを押します。Firebaseによりファイルが作成され、ローカルのプロジェクトディレクトリに追加されます。complete!以上でFirebaseの初期化は完了です。FirebaseプロジェクトをローカルでテストしてみるFirebaseの初期化が完了するとローカルの公開ディレクトリにデフォルトのindex.htmlが作成されます。Firebaseのサービスにデプロイする前にローカルの環境で実行テストをしてみましょう。serveコマンドを実行します。今回はHosting機能しか利用していないので、–onlyオプションでhostingだけを指定しておきます。※serverではなくserveなのでスペルミスに注意してください。http://localhost:5000ブラウザからhttp://localhost:5000にアクセスしてみましょう。以下の画面が表示されれば成功です。cでローカルのテスト環境を停止しておきましょう。本番サイトにデプロイをするローカル環境での確認に問題がなければ、本番サイトにデプロイをしてみましょう。deployコマンドを実行します。URL:に表示されているURLにアクセスしてみましょう。ローカルで確認した画面と同じものが表示されていれば成功です。Firebaseコンソールからもデプロイ状況を確認しておきましょう。Firebaeコンソールの、”開発”→”Hosting”からドメインやデプロイの状態を確認することができます。Firebaseプロジェクトを削除する最後に検証用に作成したFirebaseプロジェクトを削除しておきましょう。プロジェクトの削除はFirebaseコンソールから行います。コンソールから削除対象のプロジェクトを選択して、歯車のアイコンをクリックします。歯車のアイコンをクリックして表示された”プロジェクトの設定”をクリックします。”Settings”画面が表示されます。”全般”タブの一番下に”プロジェクトを削除”があります。”プロジェクトを削除”を押すと、削除の確認画面が表示されます。チェックボックスを全てチェックすることで、削除ボタンを押せるようになります。削除ボタンを押すと削除が完了します。Hostingの利用方法を紹介しました。Firebaseを利用することでサーバーの管理の必要がなくなり、開発者はアプリケーションの開発に専念することができます。サーバーの構築、運用の手間を省くことでアプリケーションの品質向上やアイデア創出に時間をかけることが可能になりました。Firebaseなど外部に委託できる部分は上手に利用して、より新しく便利なサービスを生み出していくことに時間をかけていきたいですね。スカイアーチネットワークス株式会社AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。淳スカイアーチネットワークスで、新しいサービスの企画を行っています。元SIer、元スマフォ向けゲームインフラの経験を生かして、新しいサービスをリリースしていきます。現在企画中のサービスはこちら。https://github.com/easydoggieコメントを頂けると嬉しいです。WebVRに入門してみようLinux2019.08.09リンクが切れているシンボリックリンクを探せ!!GCP開発FirebaseGCPこの記事が気に入ったらいいねしよう!最新記事をお届けします。-RECOMMENDこちらの記事も人気です。淳スカイアーチネットワークスで、新しいサービスの企画を行っています。元SIer、元スマフォ向けゲームインフラの経験を生かして、新しいサービスをリリースしていきます。現在企画中のサービスはこちら。コメントを頂けると嬉しいです。