ある中卒がWeb系エンジニアになるまでと、それからのこと

うつ病で高校を中退したり、たこ焼き屋のオヤジにホームページとたこ焼きを作らされたり、そのホームページが訴えられそうになったり、弁護士を目指したりした後にエンジニアになった人が書くブログ

vue-cliでSPAプロジェクトを作成してfirebaseでホスティングする

2020/06/28の日報

Hanasot開発の日報、第2日目です。
今日は

  • vue-cliでSPAプロジェクトを作成
  • firebaseでホスティング
  • 同僚の方をGitLabとfirebaseに招待して、デプロイまで行えるように環境構築

を行いました。
時間としては、

  • Hanasot開発 2h30min
  • 日報ブログ 60min

です。
運動は

  • アンイーブン・プルアップ(スタローン流ではなく左右の高さを変えて、片方の手に負荷をかける方法) 左右6repsずつ × 2
  • フル・プルアップ(1セット目を順手、2セット目を逆手)7reps * 2

です。

vue-cliでSPAプロジェクトを作成

昨日の記事でfirebase cliを用いてプロジェクトを作成していましたが、どうやらそのやり方だと上手くvue-cliを導入できないようで下記の記事を参考に環境構築をやり直しました。
【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する(Firebase・Vue CLI v4.0.4) - Qiita
実際の手順は下記です。

  1. 昨日作ったプロジェクトのファイルとディレクトリを全て削除して、ルートディレクトリで
    vue create .
    を実行します。
  2. なんやかんやと選択肢が出てくるので、適宜回答します。
    f:id:chusotsuengineer:20200629024219p:plain
    必要なパッケージ?を選択
  3. そしたらいい感じにプロジェクトを作成してくれるので、
    npm run serve
    して、ローカルで起動確認。
    spaにするか?という項目でyesと答えていれば about.vue がspaで動くようになっているので、なにかテキストを追加したりしてちゃんと反映されるかを確認しておきます。

firebaseでホスティング

  1. 確認できたら
    npm install firebase
    した後に
    firebase init
    を行います。
    firebase login などは昨日行っているので不要ですね。
    グローバルに firebase tools をインストールしているので、プロジェクトに firebase を入れる必要はないかもしれませんが一応インストールしておきます。 また、firebase init では昨日と同じく基本的にデフォルトの選択肢でOKですが、公開するディレクトリをpublicではなくdistにする必要があります。
    vue-cliもpublicディレクトリを作成するので、私は勘違いしてここを公開ディレクトリにしてしまってハマりました。
    publicディレクトリにある index.html はあくまでspaの起点として使用されるものなので、distディレクトリを指定しなければいけないようです。
  2. それができたら
    firebase deploy
    をしてみましょう。
    ずらっと処理が並んだあとに、ホスティング先のURLを教えてくれるはずです。
    そのURLにアクセスすると先程ローカルで確認したサイトが表示されます。 キャッシュが残りやすいようなのでシークレットモードで確認したほうがよいでしょう。
    1手順ごとにコミットするのも忘れないでください。

同僚の方をGitLabとfirebaseに招待して、デプロイまで行えるように環境構築

今日、実は打ち上げのバーベキューだったんです。
そこで同僚の方にhanasotのことをお話したら、手伝ってくださるとのことだったので複数人での開発環境を整えました。
まあ2人以上になることはないと思いますが。
0時から開始して快く1時半まで付き合ってくださったMさんに感謝です。
さて、GitLabアカウントとgoogleアカウントは既にお持ちでMacにGitの諸々の導入も済んでいる場合の環境構築なのでそんなに大したことはしていないのですが、一応手順を書いていきます。

  1. GitLabとfirebaseのプロジェクトに管理者権限で招待
  2. メールから招待のリクエストを承認
  3. git clone でプロジェクトをローカルに設置
  4. 環境構築用のブランチがマージ前だったので、 git chekout して移動
  5. 何はなくともnpm install を行う
  6. npm run serve してみる
  7. ローカルで確認できたら昨日と同じく firebase login して、既存のプロジェクトで hanasot を選択
  8. vueファイルに適当な変更を加えて、 firebase deploy する
  9. ちゃんと反映されていればOK

こんな感じです。バッチリですね。
環境構築のブランチを master にマージして今日はおしまいです。

所感

vue-cliとfirebaseは楽で早い

これにつきます。めっちゃ楽だしホスティングまでサクサクできちゃう。
もうspaの土台はできているので、ユーザー認証機能とかを追加していけば秒でwebアプリ完成しちゃいますよ。
うーん。楽だなあ。
firebaseはセキュリティ面で問題があるという話は前任の方などからお聞きしていて、詳しく調べられていないのですが中々悩ましい部分もあります。
ただ僕は今ひたすら作り続けるのが大事な時期だろうと思っているので、当面はこの便利さを享受していこうかなと。
ということで明日は skyway の導入か、トップページ設置のどっちかをやります。
忙しくなるけどがんばろう。
努力なくして得られるものに大した価値はないですから。