先週、弊社が運営する3Dモデル検索ウェブサービス「heymesh」をリニューアルしました!4/10にサービスをリリースしてから初の大きなリニューアルになります。 今回リニューアルした内容の一つに今までVue.jsで書かれていたheymeshをNuxtに対応させるという要件があったのですが、本記事はVueで書かれたサイトをNuxt対応させる途中でハマったポイントと、どのように解決したのかについて自分用のメモもかねてまとめました。 本題から少し外れるため詳細は割愛しますが、Nuxt対応するに至った経緯としてはOGPやSEO対策しやすくするという要求があったためです。 ハマりポイント1:S3ホスティングが使えない heymeshの最初のリリースの際にはVue.jsで実装されていました。そのため、インフラ側はスタンダードにS3とCloudfrontでWebホスティングする手法を採用していました。
![Vueで書かれた自社サイトをNuxt対応した時にAWSインフラでハマったポイントとその解決策|小林佑樹 / MESON CEO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca041bb481457365a219318d8bc09f3e1ec1854e/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F6402198%2Frectangle_large_8c0c1f5885c442cf41e68130a7e206d9.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)