Vuetify × Firebaseでポートフォリオサイトを無料で公開するまでにやったこと まとめ
フリーランス歴がだいぶ長くなってきた私ですが、そういえば、未だにポートフォリオサイトを作っていなかったので、VuetifyやFirebaseの勉強がてらに作成してみることにしました。
目次
- 作成したポートフォリオサイト
- 前提
- Vuetifyのテーマ（無料）の利用
- コードの追加・修正
- VueやVuetifyのバージョンアップについて
- Firebaseの導入
- 公開（デプロイ）
- ポートフォリオを作成（公開）してみた感想
- 参考リンク
作成したポートフォリオサイト
Firebaseのホスティングサービスを利用して無料で公開したポートフォリオサイトは以下の通りです。
以下、サイトの公開までにやったことのまとめになります。
前提
作業PCにNode.jsやyarn（パッケージマネージャー）、Firebase CLIがインストールされていること。FirebaseはGoogleアカウントさえあれば簡単に利用することが可能です。
Vuetifyのテーマ（無料）の利用
ポートフォリオサイトを作成するにしても一から作るのは時間がかかるので、無料のテーマを利用することにしました。
Premium & free themes — Vuetify.js
Web開発を生業としていますが、デザインについては正直そこまで詳しくないので、こういったテーマが用意されているのは助かります。
他にもReactやbootstrapなど、無料で公開されているテーマ（テンプレート）はありますが、今回はVue.jsやVuetifyを扱ってみたかったので、そちらに用意されている「Freelancer」というテーマを選びました。
GitHubからダウンロードして作業PCに展開したら、以下のコマンドでインストールを実行します。
yarn install
インストールが終わったら以下のコマンドで動作確認。
yarn run serve
http://localhost:8080/ にアクセスしてページが表示されればOKです。
インストールされていたNode.jsのバージョンが古いなどの理由でエラーが出たことがあるので、その点だけ注意が必要です。
コードの追加・修正
無料のテーマをベースに文章や画像、SNSのリンクなどを自分のものに差し替えるだけで、あっという間にそれっぽいページが出来上がります。
コンタクトフォームについては、SNSのみでいいのであれば削除してもいいと思います。今回は学習も兼ねていたので、FirebaseのCloud Functionsを呼び出して、自分宛てにメールを送信するようにしました。
Cloud Functionsからメールを送信する方法はこちらの記事（Cloud Functionsでメール（Gmail）を送信する方法）を参照してください。
VueやVuetifyのバージョンアップについて
ベースにしたテーマのVuetifyのバージョンが「2.0.0.alpha.2」だったので、最新のバージョンが使えないかどうか確認しましたが、Vuetify以外にもVueやvue-template-compilerのバージョンをアップする必要があり、ちょうどVueの初期化処理が変更された時だったようで、そのままではエラーとなります。
また、エラーの対応をして動作するようにしても、表示されるページのデザインが崩れてしまっていたので、インストール時のバージョンで問題ないのであれば、そのまま使った方が手間がかかりません。
Firebaseの導入
続いて、作成したサイトを公開するためにプロジェクトにFirebaseを導入します。
ターミナルから以下のコマンドを実行すると、ホスティングに必要なファイルが配置されます。
firebase init hosting
表示される選択肢については、後で設定ファイルを修正することで変更可能です。
ホスティングで公開されるファイルはデフォルトでは「public」配下となるため、Freelancerテーマをビルドした際の出力先「dist」に変更します。（後で変更する際はfirebase.jsonファイルのhosting.publicの値を修正）
FIrebase導入後のファイル・ディレクトリ構成は以下の通りです。
Firebaseを後で導入した際に正常に動かない時があったので、もしかしたら、最初にFirebaseプロジェクトを作成して、その後で無料のテーマ（テンプレート）関連のファイルを追加した方がいいかもしれません。
公開（デプロイ）
公開（デプロイ）の前に、まずは公開用のファイルを以下のコマンドで作成します。
yarn run build
ビルド後、公開に必要なファイルがすべて distに出力されます。
dist配下のファイルをFirebaseのホスティングにデプロイするには続けて以下のコマンドを実行します。
firebase deploy --only hosting
デプロイ完了後、Firebaseのホスティングにアクセスすると、ダッシュボードに公開されたURLが表示されます。
ブラウザにURLを入力してアクセスし、ページが正常に表示されれば完了です。
使用状況を見ると、現在のストレージやダウンロードの容量が表示されるので、どれくらい無料で使えるかが分かります。
ポートフォリオを作成（公開）してみた感想
まず一つ言えることは、意外と簡単でした。
使用したテーマのバージョンアップで躓いて調査に時間は取られはしたものの（結局インストール時のまま使用）、画像などの素材が手元にあるのであれば、1日もあれば作成可能です。
Firebaseにしても意外と日本語のドキュメントが充実していて、それさえ読めば困ることはほぼありませんでした。
こんなことならもっと早くに作っておけば良かったですね。
とりあえずFirebaseがどんなものか分かったので、これから色々と使っていこうと思います。