Vue/Nuxt

【Nuxt.js】nuxt generateで作成した静的ファイルをサーバーでホスティングする方法!

あきぞらです。

Nuxt.jsで開発をしていて、

npm run generatenuxt generate)で作成したファイルをホスティングしたい時がありました。

選択肢だけで言えば、

Netlify、AWS Amplify、AWS S3+CloudFront、Gitlab Pagesなど、、

いろいろあるのですが、いろいろ制約もあり、

今回は「Nuxtアプリをデプロイしたサーバー」でホスティングしてみます。

※サーバーにPHPが入っていることを前提にしています。

静的ファイルを作成

まずはNuxtアプリのドキュメントルートで、静的ファイルを作成します。

$ npm run generate

distディレクトリ配下にファイルが作成されます。

静的ファイルをホスティング

PHPで静的ファイルをホスティングします。

ドキュメントルートで以下を実行します。

$ php localhost:8000 -S -t dist/

-Sオプションでビルトインのwebサーバを起動します。

-tオプションでディレクトリを指定します。

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.