Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。題材は以前使った自分のポートフォリトサイトです。Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。今回の移行には、以下のような目的がありました。コンポーネント設計が自由すぎるどこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識がなく、HTMLやCSS、JSは書けるけど正しいかどうか分からないままコンポーネントを作っていました。SVGを自分で書いた時も、個人的にSVGのViewboxが非常に苦手(理解できない)ので、SVGコンポーネントとして作ってしまってたくらいカオスな情況でした。本当にアトミックなコンポーネント分けだと、どうしてもコンポーネントのネストがひどくなって、逆に管理も面倒でした。ディレクトリ分けもそうです。どこにどう置いても良いVue.jsは雑でした。Nuxt.jsはコンポーネント分けまではやってくれませんが、ある程度ディレクトリ構成などソフトウェアに秩序をくれるため導入しました。SEO対策とサーバーサイドレンダリング今ではSEO対策にNuxt.jsが提供するサーバーサイドレンダリングは関係ないということが発表されていて、本当にどうなのかは調査不足のため知りませんが(ここではそれを信じるとしても)数年間、この「サーバーサイドレンダリング」がフロントエンド界隈では盛り上がっていたので知っておく価値はあるのかなと思いました。サーバーサイドレンダリングは、大きな容量のjsを返すのではなくて、初期表示を高速化するためにサーバーで処理して返すのは結局はUXにつながり、Googleがクロールするかだけでなく、SEO対策の一環となると思うので、重要だと思いました。移行するNuxt.jsプロジェクトを作成するnpxを使ってNuxt.jsプロジェクトをから作成します。./pages移行により必要なくなったパッケージをuninstallする以下のように必要のないパッケージをアンインストールします。ディレクトリを分ける特に今回は設計に秩序をもたらしたいと思いNuxt.jsを採用したので、ディレクトリ構造について理解する必要がありました。移行について今回知るべきことは以下の項目でした。ルーティングファイル。これを元にルーティングし、.vueである必要があります。SPAなので一つしかありません。robot.txtやfavicon.icoを入れました。Vueコンポーネントを入れました。外部ライブラリなどをimportするためのものこの時点で以下のようになっています。staticPluginsこれはvendor.jsに含めたいので以下のようにnuxt.config.jsに書き加えます。これらのプラグインはアプリケーションを表示するためにかならずしも重要ではないためapp.jsには入れずにvendor.jsとしてまとめたいのでwebpackの設定を書き加えます。],}...buildに書くことによってvendor.jsに含まれるようになります。Loggingでみると以下のようなエラーがでます。}この記事をみて、webpack4からは最適化ロジックの変更が内部でありVendorは指定できないようになっています。medium.com一部コードを書き直す例えばdocumentやbodyなどはクライアントサイドレンダリングでしかアクセスできないので以下のようなものも当然サーバーサイドレンダリングではできません。},これはDOMの構築などクリティカルレンダリングパスを学ぶとわかると思います。developers.google.comルーティングを実装/pagesディレクトリを正しく構築できていれば、自動的にrouterは生成されます。今まではvue-routerを使っていたし、ストリングパラメータやバリデーションの方法など、少しAPIが違うことがわかりました。ここまでできたら、とりあえずローカルで起動できるか確認してみます。ローカル環境ではサーバーサイドレンダリングをしないので、以下のようにします。dev最適化をするどのファイルが重いかを可視化をすることができます。--analyzeat-uiが必要ないことに気づき、削除しました。ビルドしてみる以下のコマンドでビルドをしてください。buildそして、サーバーサイドレンダリングを試してみてください。startただしく表示ができれば終了です。GAEにホストする以下のコマンドGAEにデプロイします。前はVue.jsで静的サイトでしたが、今回はサーバーサイドレンダリングという名前があるようにサーバーが必要になるので少し変更します。以下のようにapp.yamlには書いています。F2これでデプロイしています。installなど必要ないことがポイントです。F2と指定しています。以下のように確認することができました。以下のようにキャッシュなしでのロード時間を計測しました。私は以前、ポートフォリオサイトを作成しました。私は、いくつか家内サービスを運用しています。C...2018-12-23Concourseで継続的デリバリー。2018の第3日目の記事です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。