当社WEBサイトの技術構成をリニューアルしました！
デザインはほぼ変わっていないですが、裏側のシステムを大きく作り変えました。

変更ポイントは以下の通りです。

1. WEBを表示させるフロントエンド部分を「Nuxt.js」で構築
2. ブログや新着情報はWordpressからヘッドレスCMSサービスの「microCMS」で構築
3. サーバーはレンタルサーバーから「Google Cloud Run」を中心としたGoogleCloudPlatformに移行、コンテナを使ったCI/CDパイプラインを構築

なんのことかよくわからないので、詳しくみていきましょう。

より高速＆拡張しやすいフロントエンド「Nuxt.js」

WEBサイトのパフォーマンスを計測するツール「Lighthouse」でALL100点に

WEBサイトの動作やアニメーションを制御するプログラミング言語「Javascript」をより使いやすくしたものが「Vue.js」、さらにそのVue.jsをWEBアプリケーション制作に特化して発展させたものが「Nuxt.js」です。

このNuxt.jsを利用することで、WEBサイトのみならずWEBアプリケーションの制作を効率的に行うことができるようになります！

具体的には、WEBサイトの部品を使い回しできるようになることでメンテンナンスや拡張がしやすくなったり、後述するヘッドレスCMSなどのサービスが使いやすくなったりします。

WEBサイトとコンテンツ制作を切り離すヘッドレスCMS「microCMS」

当社WEBサイトのようなコーポレートサイト、またはメディアサイトでは内容を更新するためのシステム「CMS」が導入されています。
今まではそのCMSに世界的にシェアの高い「Wordpress」を用いて、当社WEBサイトも含めて制作を行ってきました。

「Wordpress」はデータベースと共にサーバーにインストールすると、コンテンツを制作する管理画面やWEBサイトを制御してコンテンツを表示させる機能を提供してくれます。

しかし、Wordpressを使うとWEBサイト全体をWordpressで作る必要があり制約や制限があったり、必ずデータベースに照合をしてページを表示する仕組みになっているので動作が遅くなってしまうデメリットがあります。

今回導入したヘッドレスCMS「microCMS」は自社サーバーにプログラムやデータベースをインストールすることなく、インターネット通信を通じてコンテンツを取得し表示させるシステムを実現するサービスです。

コンテンツの制作・更新する部分をmicroCMSによってWEBサイトと切り離すことにより、より制約無くWEBサイトを作れたり、サーバーの用意が簡単になったり、データベースを使わないページの表示を高速化できるなどメリットがたくさんあり今回利用しました！

WordpressをヘッドレスCMSとして利用する方法も世の中にはありますが、そろそろWordpress以外のものも使ってみたくなったのでmicroCMSを選定しました^o^

コンテナでらくらくデプロイ「GoogleCloudRun」

今まで当社はWEBサーバーとしてレンタルサーバーであるXserverを利用、Wordpressを使ったWEBサイト構築では問題がありませんでした。

しかし、最近手掛けている高機能なWEBアプリケーションを制作しようとすると、サーバーで使用できるプログラミング言語や機能などが大きく影響し、Xserverで実装するのはかなり大変でした。
また、開発環境としてDockerコンテナというサーバー仮想化技術を使っていることもあり、コンテナを用いた実装ができればいいなと考えていました。

そこで今回、コンテナを使って実装、公開までできるGoogleCloudRunを使ってみました！
簡単にいうと理想のサーバー設計図を描いておけばその通りにサーバーを一瞬で作ってくれて、設定までしてくれます。
GoogleCloudRunは他にもアクセス負荷に応じて自動でサーバーを増やしてくれたり、サーバーの稼働状況をモニタリングする機能があったり、更新内容をすぐに本番環境に反映することができたりとメリットたくさんです。

CloudRunのモニタリング画面。CPU使用率やメモリ使用率、リクエスト数などの計測も自動で設定してくれます

また、サーバーにアクセスが無い時は料金が発生しません！金銭的にもメリットがあります。

高機能なWEBアプリを作るときはどうしてもサーバーの事を考えなければいけないので憂鬱でしたが、このGoogleCloudRunをはじめとしたサーバーレス技術を活用すれば、この憂鬱も晴れるはずです！

より高速＆拡張性の高いWEB開発を！

このように、今回の自社WEBサイト再構築は今後さらにWEBアプリケーションを高速で開発するための技術をふんだんに試してみました。どれも素晴らしい技術でしたので、今後の案件で活用していきます！