views4GCPのストレージサービスについてまとめてみた。Exp:842VTuberとアニメとゲームをこよなく愛するエンジニア。プログラミング言語はTypeScript・Golang・Kotlin、音楽はHR/HMとゲーム音楽が好きです。今まではNode.jsに対応していなかったためにGAE/SE環境では動かすことのできなかった、SSR(サーバーサイドレンダリング)で動くアプリケーションも簡単・気軽にデプロイできるようになりました。Node.js環境でUniversalモード、つまりSSR(本記事では、フロントエンドとサーバーサイドで同じJavaScriptを実行し、最初のレンダリングをサーバーサイドのNode.jsで行うことを指します)で動作させる方法を皆様にお伝えいたします。Node.js環境にNuxt.jsアプリケーションをUniversalモードでデプロイする方法を理解することができます。Nuxt.jsアプリケーションの作成まずNuxt.jsのアプリケーションを作成します。Node.jsで動かすとはいっても、GAE/SE用に特別な設定などをする必要はとくにありません。他のインフラで動かすのと同じ手順で作成していきます。今回、私が使用したnodeとnpmのバージョンは以下の通りです。10まで対応しています。現在主流なのはcreate-nuxt-appを使用する方法なので、今回はこの方法で作成しましょう。gae-node-nuxt-ssr-example上記コマンドを実行すると、対話式でNuxt.jsプロジェクトの作成をすることができます。今回は以下の設定でプロジェクトを作成しました。本記事はNuxt.jsの詳細を説明する記事ではないので、詳細は割愛します。基本的にはどんな設定にしても大丈夫ですが、一点だけ気をつけなければならないことがございます。modeは必ずUniversalにしてください。Appを選んでしまうと後で設定ファイルの変更が必要になり、二度手間になってしまいます。npm上記設定を終えてしばらくすると、Nuxt.jsプロジェクトが作成されます。作成されたらローカル環境で動作確認をしてみましょう。アクセスしてみましょう。上のような画面が表示されれば、ローカル環境で正常にアプリケーションが起動しています。Node.jsへデプロイしていきます。SDKが必要となりますので、準備がお済みでない方は以下記事をご参照ください。SDKコンポーネント、gcloudコマンドの使い方を解説!!app.yaml作成Nuxt.jsプロジェクト直下に以下の内容のapp.yamlファイルを作成します。Node.jsではホスト0.0.0.0:8080でリクエストを待ち受けます。こちらにリクエストが来た際にNuxt.jsアプリケーションが起動する必要があるため、この記述を行っています。Node.jsにデプロイしてみましょう。デプロイする前にNuxt.jsのソースのビルドを忘れないように気をつけましょう。browseこのような表示になればデプロイ成功です。アクセスしてみましょう。Node.jsでNuxt.jsをUniversalモードで動かす一連の流れを紹介いたしました。タイトル通り簡単にSSRで動くアプリケーションをデプロイすることがお分かりいただけたかと思います。最近はクローラーが賢くなってきていて、SEOの観点からのみ見ればSPAでも事足りる場面が増えてきてはいますが、ファーストビューが早くなったりとSSRをうまく使えばUXが向上することもまだまだあるのは間違いないので、弊社でも使うべき場面では積極的に採用していきたいと思っています。