- Github Actionsを使ってNuxt3で作ったアプリケーションの静的コンテンツをs3のバケットに同期しようと思った時に、どのディレクトリを指定するか戸惑ったので調べてみました。
- 結論は、.outputディレクトリでもdistディレクトリでもどっちでもokです。
目次
- Nuxt3ってなに？
- Nuxt2とNuxt3の静的コンテンツの生成場所の違い
- おわりに
Nuxt3ってなに？
Nuxt3は、Nuxt.jsフレームワークの最新バージョンで、Vue.jsをベースとしてウェブアプリケーションを開発するためのフレームワークです。Nuxt3はNuxt2の後継バージョンであり、多くの新機能や改善が行われています。
Nuxt3は、Nuxt2に比べてパフォーマンスの向上、Vue3のサポート、Viteの採用、Nitro Engineの導入、開発者体験の向上、ディレクトリ構造の改善、モジュールとプラグインの改良、静的サイト生成の改善など、多くの新機能と改善が行われています。これにより、Nuxt3は高速で効率的なウェブアプリケーション開発を支援しています。
Nuxt2とNuxt3の静的コンテンツの生成場所の違い
今回のテーマにもありますが、Nuxt2とNuxt3では、静的サイト生成の際の出力ディレクトリが異なります。
Nuxt2
Nuxt2では、yarn generateまたはnpm run generateコマンドを使用して静的サイトを生成すると、生成された静的ファイルはdistディレクトリに格納されます。このdistディレクトリは、Webサーバーにアップロードするか、ホスティングサービスにデプロイすることができます。
Nuxt3
Nuxt3では、yarn generateまたはnpm run generateコマンドを使用して静的サイトを生成すると、生成された静的ファイルは.outputディレクトリに格納されます。これはNuxt3の新しい標準です。
しかし、Nuxt3ではdistディレクトリにシンボリックリンクが作成され、このリンクを介して.outputディレクトリの内容にアクセスできます。これは、Nuxt2から移行してきた開発者が混乱しないように、以前の標準であるdistディレクトリを引き続き使用できるようにするためです。
補足
・シンボリックリンクについて
シンボリックリンクは、ファイルやディレクトリへの参照として機能する特殊なファイルです。この場合、distは実際のディレクトリではなく、outputディレクトリへのシンボリックリンクとして機能します。これにより、distを開くとoutputディレクトリの内容が表示されます。要するにNuxt3では、実際の静的ファイルは.outputディレクトリにあり、distはその内容に簡単にアクセスするための参照リンクであると理解できます。これらの設定は、通常、ユーザーが直接触るものではなく、これらの設定はNuxt3の内部コードで行われています。
Nuxt3においてs3にオブジェクトを同期させる際に、distを指定しましたができました。
上記の説明どおりです。
run: aws s3 cp --recursive --region ap-northeast-1 ./dist s3://バケット名 --acl public-read
おわりに
- Nuxtと調べるとNuxt3ではなくNuxt2の記事が出てくることが多いので、Nuxt3と検索しましょう。
- よく引っかかります。