前置き
フレームワーク未使用のファイルver.
GitHubとFirebase Hostingの
2種類の方法をお伝えします🌟
「公開の仕方が分からない」
「自分のポートフォリオを作りたい！」
「公開して就活に役立てたい！」
そんな方々に手順をお伝えします❣️👩🏫
⬇️Nuxt.jsのデプロイについてはこちら
Nuxt.jsプロジェクトをGitHubにデプロイする
【Nuxt.js】firebase基礎編：Firebase Hosting にデプロイしよう！
使い分け
・Firebase Hosting → FirebaseのDBやAuthを使用
・GitHub → それ以外
DB使ってないのに
Firebaseプロジェクトの作成は面倒ですが、
GitHubは基本的に使うことになるので…🌟
ただデプロイさえできれば
どこを使用しても良いので、
お好きな所でやってください🍀
GitHub
アカウント登録、
リポジトリ作成は割愛します🌱
リポジトリは
publicでもprivateでもOK⭕️
まぁ公開したらprivateの意味が
あまりなさそうな気もしますが。
わざわざpublicに変更…
とかがないのは良いですね。
URL設定
赤枠どおりにやればOK⭕️✨
pushは後述するdocsの配下にするので
URL設定までをやります。pushしても上手くいかない可能性がある
というだけなので、
やっても問題ないです⭕️
また、
実際には変更の保存が必要なのでcommitの前に
状態確認とaddしましょう。
$ git st
$ git add .
デフォルトブランチ名が
master→mainになりましたが、
コピペしないと
癖でmasterにしちゃいます笑
URLの設定をしたら
一致しているかも確認します👀
$ git remote add origin <URL>
$ git remote -v
いろんな所をすっ飛ばすと
違うURLになっている場合があります。
新しく作成したフォルダ、ファイルでも
なぜか違うところに。
fatal: remote origin already exists.
この場合はoriginを削除してから
やり直しましょう〜❗️
$ git remote rm origin
公開設定
公開の設定場所はココ🌍
Settings > GitHub Pages
push後に選択できます。
今はとりあえず公開の仕方だけ
把握しましょう。
青字のリンクを押して設定します。
Sourceの選択をします。
公開したいバージョンのブランチを選択。
今回mainを選択。
フォルダ選択では、
プロジェクトの状態によって
合うものを選択する必要があります。
/docsにしてみましょう。
問題なくできればこんな表示になります⭕️
docsが存在しないと上手く機能しません❌
docsの配下にindex.htmlを置いた状態にすればOK⭕️
この状態でpushしてください💡
docsに置かず直接index.htmlを指定する場合
/rootになりますが使い分けると分かりやすいかも🍀
個人的には
/root → Nuxtなどのフレームワーク
/docs → それ以外
Firebase Hosting
以前サラッと書いたのですが、
きちんと手順をまとめておきます✍️
Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②
プロジェクトの作成
まずはここから！
Firebase
1. 「使ってみる」を押す
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟
2. 「プロジェクトを追加」を押す
3. プロジェクト名を入力
下に表示されているsample-6a560が
プロジェクトIDになります。
4. Google アナリティクスの有無を選択
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択
5. アカウントを選択
Default Account for Firebaseを選択
これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱
Hostingを始めると手順が出てくるので
これに沿って進めればOKです⭕️
詳細を後述するので
不明点があればご覧ください👀
Firebase CLIのインストール
Firebase CLIのインストールで
npmコマンドを使用する場合、
Node.jsが必要です。
なくてもこのコマンドでインストール可能🌟
グローバルでインストールするので
デプロイしたいフォルダに$ cdする必要はありません。
Firebase CLI をインストールする
$ curl -sL https://firebase.tools | bash
プロジェクトの初期化
$ firebase login
エラー報告などの収集許可について聞かれます。
OKの場合はEnterキーを押します。
そうするとブラウザが開き、
アカウントを選択します。
これでログインが成功すると
この画面に切り替わります。
ターミナルでもSuccess!と出ているはずです💫
そしたら$ cd で
デプロイしたいプロジェクトまで移動。
初期化コマンドを入力。
$ firebase init
こんな感じのが出て質問に答えていきます。
選択式のところは該当箇所があれば
矢印キーで移動し、スペースで選択するとチェックがつきます。
質問はこの順番で答えます。
プロジェクト名が分からなくなった場合は
Firebase Hosting 始めるを押して出てきた手順、
3を見ると下に書かれています。
- Hosting
- Use an existing project
- デプロイしたいFirebaseプロジェクト
- public
- y
これでfirebase.jsonなどを作成し、
準備が整います🙌✨
こんな感じになります。
publicにあるindex.htmlは
設定完了を伝える画面です。
こっちを公開しても仕方ないので、
削除して自分のindex.htmlをpublic内に入れましょう。
こうなればOK⭕️
Firebase Hosting へのデプロイ
あとはdeployするだけ❗️
$ firebase deploy
公開URLが表示され、
実際に見てみると
きちんと反映されています🙌✨
まとめ
作ったものが公開できると嬉しいですよね✨
慣れてきてフレームワークを使用する…
となったときにもディレクトリ構成が分かれば
応用が効くので見直してください🍀