【保存版】firebaseデプロイ&独自ドメイン設定までの手順を画像付きで解説

11944 ワード

デプロイ独自ドメイン Firebase 独自ドメインテキストリンク

はじめに

本記事へのアクセスありがとうございます。
投稿主はプログラミング初心者であり、この方法が「最適解」かは分かりません。
しかし、動作は検証済みであり同様な記事も確認できたので信憑性はあると思います。

この記事から得られるものは？

・firebaseでのデプロイ方法
・設定中に起きうるエラー対処法
・デプロイ後の独自ドメイン設定（好きなURIへの変更）

本記事の構成

~ firebaseでデプロイ
~ お名前ドットコムでドメイン取得
~ firebase側でカスタムドメイン設定＆お名前ドットコム側でDNS設定
~ 終わり

さっそくデプロイスタート

~ firebaseでデプロイ

まずはfirebaseのホームページからデプロイ元となる新規のプロジェクトを作成します。(この記事ではHostingQiitaという名前で作成しました）

Googleアナリティクスの設定はどちらでも大丈夫です。
今回は余計な設定を省くためにオフにしてプロジェクトを作成しました。

次は、firebase-toolsのインストールを行います。下記のコードをターミナルにて実行してください。

$ npm install -g firebase-tools

上記のインストールでエラーになる方はパスが通っていない可能性があるので下記のコードを試してから再度実行してみてください。

$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

次は下記のコードを実行するとブラウザで認証画面が開かれるのでクリックして認証する。

$ firebase login

もし、firebase loginで下記のようにターミナルに怒られる方はパスに問題があると思います。

$ zsh: command not found: firebase

解決策としてはまずはパスに問題があるのかをチェックするために

$ npm bin -g

を実行して、

$ 〇〇〇〇〇〇
　(not in PATH env variable)

と言われたらパスを通す必要があるので下記のコードを実行します。

export PATH=$PATH:`npm bin -g`

次はデプロイしたいプロジェクトのディレクトリにて下記コードを実行します。

$ firebase init

すると、いくつかの質問が続きます。
今回はデプロイをしたいので、Hostingを選択。（初歩的なSpaceキーで選択してからEnterキーを行わないと怒られるので注意）

次に「Use an existing project」を選択

どのプロジェクトを使うか聞かれるので、先ほど作ったプロジェクト名のやつを選択。

ここから細い選択が数個続きますが、はじめに下記が完成形の画像です。

パブリックディレクトリとして何を使いたいか聞かれるので、ご自身の使用したいディレクトリを入力。（ここではdistとする）
SPAとして設定するか聞かれるので、ご自身の用途に合わせてy/Nを入力してください。（ここではyとする）
Githubとデプロイの関係を聞かれるので、ここでは「N」とする。
既にdist/index.htnlが存在するが上書きするか、聞かれるので「N」とする。

initの設定はこれで完了です。

次はご自身のファイルでbuildコマンドを実行してから下記のコードを打ってデプロイは完了です。

$ firebase deploy

デプロイが無事完了するとHosting URLが表示されているのでそこにアクセスするとページが表示されると思います。（反映までに数分かかる場合もある？）

~ お名前ドットコムでドメイン取得

お名前ドットコムのホームページにてログイン。または新規登録が完了した状態からのスタートとなります。
まずはドメインを登録（購入）を行います。（ここでは.workという1円のドメインを取得します）

ドメインを利用するためのサーバーを選択する画面では「利用しない」を選び、次へをクリック。
選択した商品が１円であることを確認してから、申込むをクリック。

これでお名前ドットコムでドメイン取得が完了です。

~ firebase側でカスタムドメイン設定＆お名前ドットコム側でDNS設定

firebaseのHostingページからカスタムドメインを追加をクリック。
先ほど取得したドメイン名（hostingqiita.work)を記入します。
ここでは既存のウェブサイトにリダイレクトするにチェックを入れません。

次はこの画面の値部分をコピーして画面はそのままで、お名前ドットコムのページに戻ります。

お名前ドットコムのページに戻ったら、DNSのドメインのDNS関連機能設定をチェックし次へをクリック。

対象のドメイン名にチェックを入れて次へをクリック。

DNSレコード設定を利用するクリック。

下記画像部分のTYPEをTXT、VALUEに先ほどfirebaseでコピーした値をペーストして追加ボタンをクリック。
そしたら画面下の確認画面へ進むをクリック。その後確認画面で間違い無いことを確認して設定する。

これでお名前ドットコム側の設定は一度完了です。
再度firebaseのページに戻り、5〜10分後ぐらいに「所有権を証明」をクリックします。（データが反映されていないとエラーになるので少し待つ）

次は下記画像の値をお名前ドットコムのページにペーストします。

なので再度お名前ドットコムのページに戻ります。
先ほどと同じ手順で下記画像のページまで進み、今度はTYPEをA、VALUEに先ほどの値を手入力します（コピペは枠の都合上できません）。これを合計2つ分行います。
そしたら確認画面に進み、設定するをクリックします。

firebaseのページに戻るとwwwはどうしますか？というバナーがあると思いますが、これはご自身の判断で設定するか決めてください。やり方は先ほどと同じですが、バツボタンを押してバナーを閉じても何の問題もありません。（ここでは行いませんでした）

終わり

お疲れ様でした。これで一連の設定は完了です。

あとは設定が反映されるまで気長に待ちましょう。firebaseのステータス部分が「設定が必要です」➡︎「保留中」➡︎「接続されました」。となれば独自ドメインでのデプロイが完了しているのでアクセスしてみましょう。

もし、デプロイを辞めたいと思った方は下記のコードを実行してください。
ちなみにデプロイ終了後、再開するときは再度デプロイコマンドを打つだけです。

$ firebase hosting:disable

少しでも役に立ったと思う方がいましたらLGTMをお願いします🙇‍♂️

追記　【Circleciの設定】

簡単にCircleciの設定についても記載していきます。
これまで紹介した内容に加えて、下記の手順を加えていきます。

$ firebase login:ci

ターミナルにて上記コマンドを打つ。
Circleciの環境変数にてFIREBASE_TOKEN(上記コマンドから得られる）とPROJECT_ID（firebaseページから確認できる）を設定する。その他にも自分が使っている環境変数があるなら追記する。
下記のコードを.circleci下のconfig.ymlファイルに記載する。

*この記事ではyarnで記載していきますが、npmの方はnpmの記載方法に変更してください。


version: 2
jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:10
        environment:
          LANG: ja_JP.UTF-8
          TZ: Asia/Tokyo
    steps:
      - checkout
      - run:
          name: install & build
          command: |
            yarn install
            yarn build
      - persist_to_workspace:
          root: . 
          paths:
            - . 
  deploy:
    working_directory: ~/app
    docker:
      - image: circleci/node:10
        environment:
          LANG: ja_JP.UTF-8
          TZ: Asia/Tokyo
    steps:
      - attach_workspace: 
          at: .
      - run:
         name: Environment Variables
         command: |
            touch .env
            echo API_KEY=$API_KEY > .env
      - run:
          name: deploy firebase hosting
          command: |
            yarn global add firebase-tools
            `yarn global bin`/firebase deploy --only hosting --project "${PROJECT_ID}" --token "${FIREBASE_TOKEN}"
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires: 
            - build
          filters:
            branches:
              only: master

Author And Source

この問題について(【保存版】firebaseデプロイ&独自ドメイン設定までの手順を画像付きで解説), 我々は、より多くの情報をここで見つけました https://qiita.com/Motonosuke/items/5396fc848bc4be90b392

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .