Webサイトを改修しました【Nuxt×Vuetify×Netlify】
”放置状態” だった当サイトも、満を持して（？）改修の手を入れました。
自己満足の改修でしたが、少しは見やすくなったかな？
今回の変更点を以下にまとめました。
サイトの変更点
主な変更箇所は次のとおりです。
- メンバー追加
- Blogのリレイアウト
- API-Keyの秘匿処理
１．メンバー追加
たまいよーすけは、ベースの「けんちゃん」加入により'20年末より3人で活動しています。けんちゃんのプロフィールも追加していますので、プロフィールページでご確認ください！
けんちゃん加入後のライブ動画もこちらのページから見ていただけますので、合わせてどうぞ！！
けんちゃんとは20年来の知人で、紆余曲折を経て”たまいよーすけにジョイン”と相成りました。（3人での活動のときはたまいよーすけ(n)と名乗っています。読み方は「たまいよーすけん」笑）
バンドメンバーとは不思議なもので「ほしい！ほしい！！」と思っているうちは現れず、自分の音楽に集中し磨き上げて行く中で息の合うメンバーがひとり、またひとりと現れるものなのだなぁと感じています。自分の音楽に共鳴してもらえるというのは、音楽人としてこの上ない幸せですね＾＾
２．Blogのレイアウト
とりあえずBlogでも・・・と付けたBlog機能でしたが、案の定更新もなく放置の一途を辿っていました💧
これではイカン！と一念発起してメインで改修したのがこのBlogのレイアウトです。
と言っても、「カテゴリー分けでの表示」や「一覧ページの見た目」「記事ページの見た目」等をごにょごにょしただけですが。。。個人的には記事ページにSNSのシェアボタンを実装できたのはやりがいありました。まぁ自分しか使わないんですけどね😋
このサイト全体をVuetifyというCSSフレームワークでレイアウトしているので、Vuetifyの使い方を思い出すのに時間がかかりました。。。もうやりたくない（笑）
とりあえずやりたいことは全部できたので、あとは記事を書くだけですね＾＾；Blogは書き続けるモチベーションを維持するのが何よりも大変です。
ライブの写真や動画をいただくことが増えてきたので、このBlogで少しずつ紹介していければいいな＾＾
３．その他
その他、技術的な面（プログラミング的な）で諸々アップデートしました。
- Nodeバージョン v12 → v14
- Nuxt.jsバージョン v2.14 → v2.15.8
- nuxt-microcms-module導入（APIKey秘匿）
Web技術は日進月歩ですから、どんどん新しく便利なライブラリやツールが出てきます。その殆どが無料で使えるところも素晴らしい！！まぁおかげで更新についていけないのですが＾＾；
ライブラリ系はたまにアップデートがないかチェックしないといけませんねぇ～。
開発のハマりポイント
たまいよーすけ(n)ファンの方で、Web開発に興味がある方は少ないかもしれませんが、自分の備忘録のために今回の改修のハマりポイントを記します。次の改修で同じ轍を踏まないように。。。
- Nodeバージョン
- x-code
- Netlify Nodeバージョン
Nodeバージョンアップデート
サイトの公開から２年ほど経ち、使っているライブラリのバージョンも古くなってきたので、レイアウトの改修ついでにアップデートを実行したのがどハマりの始まりでした。。。
当サイトはNuxt.jsというWeb開発のフレームワークを用い、microCMSというヘッドレスCMSサービスと連携することでいわゆる”JAMStack”な構造で構築しています。
参照記事：サイトをリニューアルしました【Nuxt.js＋microCMS＋netlify】
「新しいほうがええやろ・・・」と、v12系だったNodeを最新のv16に上げたところ、Nodeのバージョンに依存するパッケージが軒並み悲鳴を上げました。安定版とはいえ、Nodeのバージョンを上げるときは慎重に慎重を期す必要がありますね。（←きっとこんなことは、開発者なら常識なんでしょうね）
結局v14の安定版にし、さらにエラーを吐く依存ライブラリのバージョンを１つ１つ調整する（package.jsonやyarn.lockファイルを書き換える）という地道な作業が延々と続きました。
一時は「ええぃ！誰も見てないし、動かんようなサイトならいらんわ～」となりかけましたが、それを踏みとどまれたのも、薪ストーブで上手にワッフルが焼けたらからでしょう！まさに「甘いものは正義！！」ですね＾＾
現在は無事依存関係の修復ができ、ちゃんと稼働しています。
x-codeの存在
僕は当サイトの開発をmacでやっており、mac固有の問題に悩まされました。
macには「x-code」という開発用のツールがあるのですが、これ、いつだったか「macアプリ作らないし、いらね」と思って削除したんですね。。。そしたら、大事なツールだったらしく、上記のNodeの挙動に異常を来しました。
症状としては、Node（npmやyarn）でインストールできるはずのものがエラーとなってしまう、というものです。
当初はNodeのバージョンを疑い、いろんなバージョンやnode-brew等をいれてみたものの改善せず、、、「これは詰んだか？！」と荷物をまとめて実家に帰る準備をしたものの、そうは言っても誰かがこの問題を解決しているはず！！と検索しまくりたどり着いたのが、「x-codeの存在」でした。Nodeでの開発にはx-codeが存在しなきゃいけないみたい。
長年Windowsを触ってきたので、この観点はなかった！！このときばかりは「かっこいいから」という理由だけでmacを使うのやめよう、、、と本気で思いました。
ということで、x-code大事！！
※ちなみに実家は隣です。
Netlify関係
当サイトはNetlifyというホスティングサービスを使っています。ホスティングというのは、自分のPCで作ったWebサイトを置いておくWeb上のスペースのことですね。Netlifyに置くことで、このサイトが世界に公開されているわけです。
Netlifyを使う理由は以下の通り。
- 無料枠がある
- Github連携ができる
- WebHookで自動ビルドできる
- SSLが無料
microCMSもNetlifyも今の所無料枠内で運用できているので、当サイトの運用費用はドメイン代（年間2,000円）くらいです👍
サクっと行くはずだったサイト改修後のNetlifyでの公開にも罠がありました。
NetlifyのNodeバージョン
Netlifyでは、ユーザーが作った”プログラム”という設計図をもとに、Webサイト等を構築する作業＝ビルドが行われるのですが、このビルドでも前述のNodeが使われます。
Netlifyでのビルドで使ってほしいNodeバージョンを指定する方法があるのですね。
こちらの記事に救われました。
Netlifyで使用するNode.jsのバージョンを指定する
自分の開発環境と、Netlifyビルド時の環境を合わせることで「あれ？ライブラリとの依存関係でエラー吐くんだけど？」とNetlifyに怒られるのを回避できました。
microCMSのAPIKey設定
APIKeyはその名の通り「鍵」のこと。
この鍵が当サイトではどこに使われているのかというと、TOPページの「お知らせ」や「Blogの内容そのもの」です。
このお知らせ＆Blogの内容はmicroCMSというサービスに保管されていて、そのデータを引き出すためにAPIKeyという鍵が必要になるわけですね。
これまではこの鍵がサイト上に誰でも見れる形で書き込まれていましたが、今回の改修を機に秘匿することにしました。APIKeyを悪用され、「無駄に通信がかさみ、無料枠を超えてしまった」なんてことになったら悲しいですからね～。
ということで、APIKeyの秘匿自体はmicroCMSの記事通りに実施すればうまくいくのですが、この設定、Netlifyにも必要なんですね！！設定前は全然ビルドが通らず、もうNetlifyのNeの字も見たくなくなりました。おかげで毎朝飲むNescafeのバリスタに近づけなくなり、コーヒー絶ちしてさらにイライラ。。。ひどい目にあった1週間でしたorz
最終的にはこちらの記事に救われ、無事ビルドできています✌
Nuxt×microCMS×Netlifyでポートフォリオを作ってみよう
ネット情報に救われっぱなしのサイト改修も無事終わり、あとはBlogの”定期的な更新” を待つばかりです！笑
苦しんだ1ヶ月だったけど、自分のやりたいように作るアプリケーションは至福でした👏プログラミング仲間ほしいなぁ〜
#Web制作 #Web開発