今回も環境構築についてまとめます。
前回はLaradockを使った環境構築を行ったことをまとめましたが、今回はVue.js+Firebaseを使って環境構築を行います。
前回の記事はこちら
Vue.js + Firebaseで環境構築を行おうとした目的
元々公開サーバーはGCPを検討していたのですが、Laradockで開発した場合、どの方法で公開するのが良いのかわからない問題が発生しました。
ローカル環境で開発したものを外部サーバーにアップする時、コンテナを使えばGKEを使うことになり、クラスタを使って複数のインスタンスを立ち上げる必要があるのか？
環境構築だけLaradockで、サーバーにアップする時はソースコードだけアップするのか？
という初歩的な部分で躓いてしまい（詳しい方いましたら教えてください…）、とりあえずもっと作りやすいものはないかと検討した結果たどり着いたのがFirebaseでした。
参考資料
まず最初に今回環境構築するにあたって参考にさせて頂いたサイトの紹介です。
Firebaseの機能の Authentication と Database を簡潔に使用しているサンプルで非常に参考になりました。
また同サイトにNetlifyの使い方も記載されていたの参考にしました。
Netlifyは無料で使えるHostingサービスでCDNなども使え、使ってみたいと思っていたのですが、それも大変わかりやすく紹介されております。
ハマったところ
手順は参考資料を参考にして頂きたいので、今回はハマったことを中心に紹介していこうと思います。
そもそもVueファイルどうやって作るかがわからない
開始早々いきなり詰みました。
Vueの解説書ではVueの書き方は書いているのですが、始め方が書いていません。
というのもVueはimportしてしまえば既にあるコードに後から追加することが出来、jQuueryに差し替えていくことが出来るため、フレームワークのようなものがすぐに見つからなかったのです。
Vue-CLIを使って環境構築する
Qiitaのこちらの記事を参考にVueの雛形を作成しました。
node を使用するため node をインストールします。
$ node -v v10.16.3 $ npm -v 6.9.0
nodeがインストールできたら、
$ npm install -g vue-cli
でvue-cliをインストールします。これでvueコマンドが使えるようになるはずです。
以下のコマンドで作ってみます。
$ vue init webpack [DirectoryName]
実際に作った手順はこちら
$ pwd
/Library/WebServer
$ sudo mkdir [DirectoryName] ← WebServerディレクトリはroot権限でないと操作できないので sudo を使う
$ sudo chown -R [UserName]:staff [DirectoryName] ← chown で所有者を変更
$ vue init webpack [DirectoryName]
? Project name ([DirectoryName]) ← 変更したい場合プロジェクトの名前を記入
? Project description (A Vue.js project) ← プロジェクトの説明（READMEやpackage.jsonに記載されます）
? Author (xxxx xxxx@sample.com) ← あなたの名前（package.jsonに記載されます）
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users ← コンパイラ付きを選択
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? (Y/n) ← Y を入力してEnter
? Use ESLint to lint your code? (Y/n) ← N を入力してEnter
? Set up unit tests (Y/n) ← N を入力してEnter
? Setup e2e tests with Nightwatch? (Y/n) ← N を入力してEnter
? Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM ← NPM を選択してEnter
Yes, use Yarn
No, I will handle that myself
︙で、DirectoryNameに指定した名前のディレクトリが作られ、そこに基本となるコードが作られます。ESLintやUnitTestは今回含めずに進めました。
新しくディレクトリを作った理由は、権限がないというエラーが出てしまうことを防ぐためです。
書き込むディレクトリの権限によっては
$ vue init webpack [DirectoryName]
のみで作ることができます。
作成が完了したら
# Project initialization finished! # ======================== To get started: cd [DirectoryName] npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
と記載の通り、作ったディレクトリに移動して、
npm run dev
でビルドされ、localhost:8080で見られるようになります。
Netlifyのデプロイでビルドするディレクトリが分からない
今回は非公開のGitLabにソースコードをアップロードして、デプロイをしていきます。
参考ページを元に進めていくと、以下のページに遷移します。
Build command と Publish direcroty をどう設定するかわかりませんでした。
一度ビルドを実行してみた結果、生成されたディレクトリを登録する
Build command は
npm run build
で問題ありません。
開発時は npm run dev を使っていたため、最初「distディレクトリって何？」という感じになってしまうのですが、ローカルで npm run build を行うとdistディレクトリが生成されます。
このdistディレクトリがPublish directoryになります。
ただ Publish directoryの場所は git のルートディレクトリからの相対パスになります。
そのため、
[distディレクトリの親ディレクトリ]/dist
と設定してください。
Vue.js + Firebaseに関する自分なりの所感
基本的に手順通りすれば公開までの道順がすごくシンプル
これまでLaradockやブログでは紹介していないGAEなどを試してきましたが、最も簡単に環境構築→公開ができるのが Vue.js + Firebaseです。
手順が少ないため、引っかかる部分も少なく、ストレスフリーで開発に臨むことができます。
FirebaseのOAuth認証で大幅に認証周りの開発コストを下げられる
今の時代、ID/パスワード認証は時代遅れだと思っています。
特に個人サービスの場合、内部で何をやっているか確認ができず、信用が一切できないため、ID/パスワード認証にすべきではないとも思っています。
そのために必要だったOAuth認証をGUI上から設定を行うだけでそれっぽくなったのが個人的に感動しました。
まだ触ったのが認証周りしかないのでこの見出しなのですが、まだまだFirebaseの機能はあるので今後幅を広げていこうと思います。
Vue でほぼなんでも出来る時代が来ていた
勉強不足だったのですが、これまでWebアプリを作るには必ずサーバー側の実装が必要だと思っていました。
ただ Vue Router や Vuex のようにフロントエンドだけで美しくデータや状態を管理することが出来るようになっており、個人で作りたいものの範囲であればほぼFirebaseで済みます。たぶん（え
まとめ
Vue.js + Firebase は簡単なアプリを作る分にはかなり有効な方法だと思いました。
会社で大きなコンテンツを作る場合は強固な体制で作るのが適切ですが、スクラップビルドをしながら進めていくのであれば、もっともスタートダッシュが出来る組み合わせだと思います。
ハマりどころはありましたが、知っていればなんてことはなくスムーズに開発に取り掛かれるはずです。
「これから何かWebサービスを作ってみたい」という人はとりあえずここから始めてみては如何でしょうか？
ここまで読んで頂きありがとうございました！
コメント