前置き
フレームワーク未使用のファイル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
しても上手くいかない可能性がある
というだけなので、
やっても問題ないです⭕️
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/Frame-44-1.png?resize=920%2C538&ssl=1)
また、
実際には変更の保存が必要なので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後に選択できます。
今はとりあえず公開の仕方だけ
把握しましょう。
青字のリンクを押して設定します。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-1.png?resize=920%2C151&ssl=1)
Sourceの選択をします。
公開したいバージョンのブランチを選択。
今回mainを選択。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-5.png?resize=916%2C144&ssl=1)
フォルダ選択では、
プロジェクトの状態によって
合うものを選択する必要があります。
/docsにしてみましょう。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-7.png?resize=512%2C238&ssl=1)
問題なくできればこんな表示になります⭕️
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-3.png?resize=920%2C267&ssl=1)
docsが存在しないと上手く機能しません❌
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-2.png?resize=920%2C312&ssl=1)
docsの配下にindex.htmlを置いた状態にすればOK⭕️
この状態でpushしてください💡
docsに置かず直接index.htmlを指定する場合
/rootになりますが使い分けると分かりやすいかも🍀
個人的には
/root → Nuxtなどのフレームワーク
/docs → それ以外
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-6.png?resize=920%2C721&ssl=1)
Firebase Hosting
以前サラッと書いたのですが、
きちんと手順をまとめておきます✍️
Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②
プロジェクトの作成
まずはここから!
Firebase
1. 「使ってみる」を押す
ログインしていない場合はログイン
そもそもアカウントがない場合は
Googleアカウントを作成してください🌟
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_e7d5d1c0f5f5890672cfaece8041dec5-1024x594.png?resize=920%2C534)
2. 「プロジェクトを追加」を押す
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_6b9d79332f45ffee7c3af9a2d9174c4b-1024x408.png?resize=920%2C367)
3. プロジェクト名を入力
下に表示されているsample-6a560が
プロジェクトIDになります。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_b9cd88ad12135ea11f0707b90d9152da-1024x680.png?resize=920%2C611)
4. Google アナリティクスの有無を選択
なしの場合は続行でプロジェクト完成
ありの場合は続行で次のアカウント選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_41a32c29ed7b727bbe08ba9168849ae3-1024x746.png?resize=920%2C670)
5. アカウントを選択
Default Account for Firebaseを選択
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_a89a629fb9b6fa8b7a0c005f04efeccf-1024x668.png?resize=920%2C600)
これでプロジェクトが完成🎉✨
プロジェクト概要画面へ移行します🌱
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-19.png?resize=920%2C483&ssl=1)
Hostingを始めると手順が出てくるので
これに沿って進めればOKです⭕️
詳細を後述するので
不明点があればご覧ください👀
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-20.png?resize=920%2C617&ssl=1)
Firebase CLIのインストール
Firebase CLIのインストールで
npmコマンドを使用する場合、
Node.jsが必要です。
なくてもこのコマンドでインストール可能🌟
グローバルでインストールするので
デプロイしたいフォルダに$ cd
する必要はありません。
Firebase CLI をインストールする
$ curl -sL https://firebase.tools | bash
プロジェクトの初期化
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-21.png?resize=920%2C614&ssl=1)
$ firebase login
エラー報告などの収集許可について聞かれます。
OKの場合はEnterキーを押します。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-22.png?resize=920%2C71&ssl=1)
そうするとブラウザが開き、
アカウントを選択します。
これでログインが成功すると
この画面に切り替わります。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-23.png?resize=900%2C454&ssl=1)
ターミナルでもSuccess!と出ているはずです💫
そしたら$ cd
で
デプロイしたいプロジェクトまで移動。
初期化コマンドを入力。
$ firebase init
こんな感じのが出て質問に答えていきます。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-24.png?resize=920%2C346&ssl=1)
選択式のところは該当箇所があれば
矢印キーで移動し、スペースで選択するとチェックがつきます。
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-25.png?resize=920%2C133&ssl=1)
質問はこの順番で答えます。
プロジェクト名が分からなくなった場合は
Firebase Hosting 始めるを押して出てきた手順、
3を見ると下に書かれています。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/Frame-45.png?resize=450%2C298&ssl=1)
- Hosting
- Use an existing project
- デプロイしたいFirebaseプロジェクト
- public
- y
これでfirebase.jsonなどを作成し、
準備が整います🙌✨
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-27.png?resize=718%2C144&ssl=1)
こんな感じになります。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-28.png?resize=920%2C723&ssl=1)
publicにあるindex.htmlは
設定完了を伝える画面です。
こっちを公開しても仕方ないので、
削除して自分のindex.htmlをpublic内に入れましょう。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-29.png?resize=872%2C622&ssl=1)
こうなればOK⭕️
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-31.png?resize=920%2C721&ssl=1)
Firebase Hosting へのデプロイ
あとはdeployするだけ❗️
$ firebase deploy
公開URLが表示され、
実際に見てみると
きちんと反映されています🙌✨
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2021/07/image-30.png?resize=796%2C214&ssl=1)
まとめ
作ったものが公開できると嬉しいですよね✨
慣れてきてフレームワークを使用する…
となったときにもディレクトリ構成が分かれば
応用が効くので見直してください🍀