Nuxt.js에서 PWA를 손쉽게 프로덕션 환경에서 시도하는 단계를 간략하게 소개

우선, 현재는 Nuxt2에서 PWA는 잘 작동하지 않으므로주의하십시오.

이번 개발 환경은 Docker for Mac, 프로덕션 환경은 Heroku를 상정하고 있습니다.
Windows에서 Vagrant에 Docker를 세우는 경우 로컬에서는 별도 설정, 옵션 추가, 경로 추가 지정이 필요합니다.

우선 초기 디렉토리, 초기 파일을 작성합니다.



pwatest/nuxt/Dockerfile

FROM node:9

RUN mkdir -p /nuxt
COPY . /nuxt
WORKDIR /nuxt

RUN npm uninstall -g yarn && \
    npm install -g yarn && \
    chmod u+x /usr/local/bin/yarn && \    
    yarn global add nuxt vue-cli create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3000

pwatest/nuxt/.dockerignore

node_modules
.nuxt
npm-debug.log
package-lock.json

pwatest/docker-compose.yml

version: '3'
services:
  nuxt:
    build: ./nuxt
    command: yarn dev
    volumes:
      - ./nuxt:/nuxt
    ports:
      - '3000:3000'

터미널에서 작업합니다.

# docker-compose.ymlのあるディレクトリに移動
$ cd pwatest

# コンテナを起動してNuxt.jsプロジェクトの初期化
$ docker-compose run nuxt yarn create nuxt-app

대화 형식으로 질문에 대답합니다.
아래는 예입니다. 적당하더라도 괜찮습니다.

? Project name (enter)
? Project description (enter)
? Use a custom server framework (express)
? Use a custom UI framework (bulma)
? Choose rendering mode (Universal)
? Use axios module (yes)
? Use eslint (no)
? Author name (enter)
? Choose a package manager (yarn)

# PWAモジュールのインストール
$ docker-compose run nuxt yarn add @nuxtjs/pwa

파일을 편집합니다.

pwatest/nuxt/nuxt.config.js

  modules: [
+   '@nuxtjs/pwa'
  ],
+ workbox: {
+   dev: true
+ },

pwatest/nuxt/Dockerfile

FROM node:9

RUN mkdir -p /nuxt
COPY . /nuxt
WORKDIR /nuxt

RUN npm uninstall -g yarn && \
    npm install -g yarn && \
    chmod u+x /usr/local/bin/yarn && \    
-    yarn global add nuxt vue-cli create-nuxt-app
+    yarn global add nuxt vue-cli create-nuxt-app && \
+    yarn install && \
+    yarn build

ENV HOST 0.0.0.0
EXPOSE 3000
+ CMD ["yarn", "start"]

터미널에서 작업합니다.

# Nuxtアプリのビルド
$ docker-compose run nuxt yarn run build

# Docker imageのビルド
$ docker-comose build nuxt

# heroku-cliのインストール
$ brew install heroku/brew/heroku

# herokuにログイン
$ heroku login

# コンテナ用のプラグインを追加
$ heroku plugins:install heroku-container-registry

# コンテナにログイン
$ heroku container:login

# アプリの作成（作成されたアプリ名称を控えておく）
$ heroku create

# Nuxtプロジェクトのディレクトリに移動
$ cd nuxt/

# コンテナをデプロイ
$ heroku container:push web -a {your_heroku_app_name}

# コンテナのリリース（2回目以降のデプロイの場合）
$ heroku container:release web -a {your_heroku_app_name}

# ブラウザで確認
$ heroku open -a {your_heroku_app_name}

이것으로 PWA의 작성 완료입니다.
스마트폰으로 액세스하여 홈에 추가하면 다음 번 이후에는 브라우저가 아닌 PWA로 시작됩니다.