レンタルサーバーとNuxt.jsで何も考えずに始める意識低い系のPWA

2154 ワード
nuxt.js PWA PWA テキストリンク

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さんの記事です！