VueをS3にデプロイするとページが表示されなくなった時

localhostでは表示されるのに、S3にデプロイすると表示されない

先日Vue.jsとMapboxで開発したWebアプリをS3にデプロイしてみた時の話。

mapboxとは、地図上に情報・データを可視化する際に非常に便利なプラットフォームです。

www.mapbox.jp

npm run build 

npm sync dist/ s3://<BUCKET_NAME>/public/sample

でテスト的にデプロイすると、ページが表示されない事態に陥りました。

しかし、

npm run serve

で起動したlocalhostではしっかりと表示されている,,,。

解決した時の操作をメモ。

vue.config.jsをチェック

環境によって異なるかもしれませんが、自分の場合はvue.config.jsのコードに、下記４行目のpublicPathの文を追加しました。

const {defineConfig} = require("@vue-cli-service")

module.exports = defineConfig({

  transpileDependencies: true,

  publicPath:

   process.env.NODE_ENV === "production" ? "/public/sample" : "/"

)}

のように変更しました。

デフォルトではこの記述がなかったのですが、どうやらこの記述がないとMapboxを使用するための外部jsやcssの読み込み先がデプロイ先である

s3://<BUCKET_NAME>/public/sample

ではなく

s3://<BUCKET_NAME>/

になってしまうみたいです。

今回のケースのようなエラーで悩まされるのは時間的にもったいない気がするので、コードの記述法だけでなく、WebやVueの仕組みまで深く理解していきたいですね。