PWA Advent Calendar 2019 5日目の記事です。
タイトルどおりレンタルサーバーとNuxt.jsで何も考えずにPWA(Nuxt PWA)を始める意識低い系のエンジニア記事です。
環境
- macOS Mojave
- Node.js 8.11.2
- npm 6.4.0
- SSL設定済のレンタルサーバー (XREA)
意識低い系ですので、Docker使わずローカル環境直書きです。
意識低い系ですので、NetlifyでGitデプロイとかせずFTPで直接アップロードします。
事前準備
npx @vue/cliをインストールする
$ npm i -g npx @vue/cli
Nuxtアプリケーションを作成
$ npx create-nuxt-app rental-pwa
PWAモジュールは入れるようにして選択してください
Nuxtアプリケーションディレクトリに移動し静的ページのBuild
$ cd rental-pwa
$ npm run generate
出力されたdist配下のファイル群をFTPでレンタルサーバーのドキュメントルートに設置する
「https://${domain}/」にアクセスすると
PWAアプリが一瞬でできます！
やったね！
最後に
何も考えずにできる意識低い系のPWAですが、前回の記事レンタルサーバーで無理くりLaravel + Nuxt + PWAをやってみたよりかは遥かに手っ取り早く、簡単お手軽にPWAを試せます。
レンタルサーバー内にWordPressを置いてRestAPIを使えば、技術的にイケてる風サービスも作れるかも。。。？
WordPressはセキュリティ的にガバガバなので、個人的にあまりオススメしたいものではないですが。
明日は@masanori_mslさんの記事です！