はじめに
個人開発するにあたってvue-cliでなんか作ろうと思いまして。
バックエンドの環境作るのが面倒だったので、そのあたりはfirebaseに丸投げしてフロントエンドの開発に注力しようと思いました。
なので、vue-cliのプロジェクトでfirebaseを使えるように設定しました。
開発環境とバージョン
windows 10
@vue/cli 4.5.15
firebase 9.22.0
firebaseのプロジェクトを作成する
①firebaseに ログインしてください。
②プロジェクトを追加を選択します。画面の表示に従ってプロジェクト名をつけて続行します。私は今回は'simply'という名前にしてます。
③'このプロジェクトでGoogleアナリティクスを有効にする'は有効にして続行します。
④アカウントを選択ではDefault Account for Firebaseを選択してプロジェクトを作成します。
Firebase Hostingを設定
firebaseのインストール
Firebaseの構築の中のHostingを選択し、始めるを押します。
Firebase CLIをインストールする必要があるので、コマンドプロンプトを起動して以下のコマンドを入力します。
npm install -g firebase-tools
インストールが完了したら、次へを押します。
プロジェクトの初期化
プロジェクトの初期化を行います。
こちらの記事でsimplyというvueプロジェクトを作っているので、こちらのディレクトリに移動します。なお、simplyはworkspaceというフォルダ内に作っています。
cd workspace
cd simply
移動したら以下のコマンドを入力します。
firebase login
以下のような画面が出ます。firebaseの改善のために、エラーが出たときにエラー情報を送っていいですか？って聞かれてるので、Yesとします。
Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
Allow Firebase to collect CLI usage and error reporting information? (Y/n)
ページが開いてfirebaseにログインするように指示されるので、ログインします。
以下の画面が表示されるので、下にスクロールして許可を押します。
成功したら以下の画面が表示されるので、ウィンドウを閉じてfirebaseの画面に戻ります。
先にbuildします。以下のコマンドをsimplyディレクトリ内で入力するとdistというディレクトリが作られます。
npm run build
こちらのdistを後で使います。
続いて、コマンドプロンプトに以下のコマンドを入力します。
firebase init
simplyというディレクトリでfirebaseプロジェクトを初期化するがいいか？と聞かれるので、Yesとします。
このディレクトリにどのfirebaseの機能を設定するか？を聞かれるので、hosting: configure files for firebase hosting and (optionally) set up github action deploy.にカーソルを合わせてスペースを押し、エンターを押します。
ここではUse an existing project(既存のプロジェクトを使う)を選択します。
既存のプロジェクトが表示されるので、simplyを選択します。
ここで先ほどbuildして作られたdistを入力します。
シングルページアプリケーションとして構成するかを問われるので、Nとします。
「GitHubで自動ビルドとデプロイを設定しますか？」と問われるので、yとします。
「ファイルpublic / index.htmlはすでに存在します。 上書きしますか？」と問われるので、Nとします。
GitHubのwebが立ち上がってAuthorize Firebase CLIと聞かれるので、Authorize Firebaseを選択します。
どのGitHubリポジトリにGitHubワークフローを設定しますか？と聞かれるので、ユーザー名/リポジトリ名を入力します。今回はsimplyに設定するので、ユーザー名/simplyとします。
すべてのデプロイの前にビルドスクリプトを実行するようにワークフローを設定しますか？と聞かれるので、yとします。
すべてのデプロイの前にどのスクリプトを実行する必要がありますか？と聞かれるので、画面に表示されている通りnpm ci && npm run buildを入力します。
PRがマージされたときに、サイトのライブチャネルへの自動展開を設定しますか？と聞かれるので、yとしておきます。
サイトのライブチャネルに関連付けられているGitHubブランチの名前は何ですか？と聞かれるので、masterとしておきます。
成功しました。
続いて、forebase Hostingへのデプロイを行います。
以下のコマンドをコマンドプロンプトに入力します。simplyディレクトリ内で行います。
firebase deploy
以下の画面が表示されたらデプロイ成功です。Hosting URLを開いてみましょう。
vueの画面が表示されました。
