Nuxt.jsでassetsをCDNから配信する

当たり前のことかもしれないけど、アセットをCDNから配信したいけど、どうようかと思ったらものすごく簡単だった話。

Nuxt.jsをnpm run buildでビルドしてnpm run startで起動してサイトにアクセスしてみると、アセットはドメイン/_nuxt/配下を参照していることがわかる。

サイトにアクセスしてHTMLソースを見たとき

<script src="/_nuxt/pages/index.js" defer=""></script>

また、Nuxt.js内で以下のように書いていたimgのsrcも同様に

hogehoge.vue

<img src="~/assets/images/logo.png>

_nuxt配下に置き換わっている。
ビルド後

<img src="/_nuxt/img/logo.ad5be72.jpg">

今回、jsだったり画像だったりは、_nuxtから配信するのではなく、AWSのCloudFrontだったりのCDNから配信するようにしたかった。

ja.nuxtjs.org

上記をみると、nuxt.config.jsのbuildにpublicPathを指定してあげればいけるっぽいことが書かれている。

なので、サンプル通りに書いてみる。

nuxt.config.js

module.exports = {
  build: {
    // CDNのドメイン名を設定する
    publicPath: 'https//mycdn_domain/assets/'
  }
}

再度ビルドして、試しに起動してみてHTMLを確認してみると、見事にアセット達が、CDNを指すようになった。

ビルド後

<script src="https://mycdn_domain/assets/pages/index.js" defer=""></script>
<img src="https://mycdn_domain/assets/img/logo.ad5be72.jpg">

あとは肝心のアセットをCDNのストレージにアップロードすればいい。
どこにあるんだろうと思ったけれども、ビルドしたときに、プロジェクトのルートディレクトリに.nuxtができている

ビルドする

$ 
$ tree -aL 1 
.
├── .editorconfig
├── .git
├── .gitignore
├── .nuxt            ←これができる
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
├── plugins
├── static
└── store

.nuxtの中にdistディレクトリがあるので、これをそのままCDNのストレージにアップロードすることにした。

.nuxt/dist配下のファイル

$ tree -L 1
.
├── LICENSES
├── app.d3f9a819d101620d04de.js
├── fonts
├── img
├── index.spa.html
├── index.ssr.html
├── layouts
├── manifest.2f9dbf3059b488511414.js
├── pages
├── server-bundle.json
├── vendor.7b05ec8e037fef1169eb.js
└── vue-ssr-client-manifest.jso

やりたいことはできたのでよかったのだけれども、SSRする場合、サーバー側は同じリソースをみてるのか、別なのかいまいちわかってない。

豆腐とコンソメ

もろもろのプログラム勉強記録

Nuxt.jsでassetsをCDNから配信する