Nuxt.js+Vuetifyで新規作成したPWA対応済みWebアプリをAmplify Consoleで公開
はじめに
Nuxt.jsのWebアプリのプロジェクトを新規作成し、それをそのままAmplify Consoleを利用して公開するところまでを書きます。
VuetifyというUIフレームワークを利用して楽にマテリアルデザインに沿ったUIを手に入れたり、PWAのための設定も行います。
コンテンツ
Nuxt.jsプロジェクト新規作成
今回パッケージマネージャは yarn を利用します。インストールされていない場合はまずインストールしましょう。
bash: yarn: command not found
$ npm install -g yarn
$ yarn -v
1.22.10
Nuxt.jsのWebアプリを新規作成するためにyarn create nuxt-app <project-name>というコマンドを実行するのですが、
いくつかの質問に答えていくだけで、ベースとなるWebアプリの作成は完了してしまいます。
今回作成するプロジェクトの名前は sample-map-webappとします。
$ yarn create nuxt-app sample-map-webapp
yarn create v1.22.10
[1/4] Resolving packages...
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@3.4.0" with binaries:
- create-nuxt-app
create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in sample-map-webapp
? Project name: sample-map-webapp
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios, Progressive Web App (PWA)
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
yarn run v1.22.10
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 4.21s.
yarn run v1.22.10
$ stylelint **/*.{vue,css} --ignore-path .gitignore --fix
Done in 1.11s.
🎉 Successfully created project sample-map-webapp
To get started:
cd sample-map-webapp
yarn dev
To build & start for production:
cd sample-map-webapp
yarn build
yarn start
Done in 67.23s.
? UI frameworkでVuetify.jsを選択したり、
? Nuxt.js modulesでProgressive Web App (PWA)を選択するだけで、
今回の目的をおおよそ達成できてしまいます。記事にするのも憚られるほどのお手軽さですね。
作成したWebアプリの実行
作成されたプロジェクトフォルダに移動してyarn devコマンドを実行することで、開発用のWebサーバーを起動して動作させることができます。
$ cd sample-map-webapp
$ yarn dev
yarn run v1.22.10
$ nuxt
ℹ NuxtJS collects completely anonymous data about usage. 06:10:16
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry
? Are you interested in participation? Yes
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.14.9 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:8080/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 06:11:33
ℹ Initial build may take a while 06:11:33
✔ Builder initialized 06:11:33
✔ Nuxt files generated 06:11:33
✔ Client
Compiled successfully in 13.98s
ℹ Waiting for file changes 06:11:50
ℹ Memory usage: 433 MB (RSS: 565 MB) 06:11:50
ℹ Listening on: http://localhost:8080/ 06:11:50
こちらが実行されたWebアプリです。
何も実装していないのに、2つのページやヘッダー、フッター、ハンバーガーメニューなどが既に実装されてます。
Vuetifyのおかげで見栄えも既にいい感じです。
Amplify Consoleを利用して公開する
新規作成したWebアプリを何も手を加えずこのまま公開します。
GitHubリポジトリの作成とプッシュ
そのためにまずは、GitHubなどにリポジトリを作成して先ほど作成したプロジェクトをプッシュしておきます。
ブランチはmainとは別にdevelopも作っておきましょう。せっかくなので、開発環境と本番環境を分けて構築するためです。
Amplify Console に新規アプリ作成
AWS Console > AWS Amplify > New app ボタン > Host web app
From your existing code で 利用しているコード管理システムを選択する。ここではGitHubを選択して進めます。
目的のブランチ(ここではmain)を選択して次へ。
続いてビルド設定の構成。本当はここでビルドの設定を編集する必要があるのですが、ひとまずこのまま次へ進めます。
最後の確認画面。保存してデプロイしましょう。
プロビジョン、ビルド、デプロイ、検証、が順に進んでいく様子を確認できる画面へ遷移します。
デプロイや検証が完了したら、赤枠で囲った場所のリンクをクリックすると、デプロイされたWebアプリが表示されます。
が、なんかうまく表示できてません。
Welcome
Your app will appear here once you complete your first deployment.
っていう画面が表示されてます。先ほどyarn devで表示した画面と違いますよね。
先ほど「ビルドの設定を編集する必要があるのですが」と書きましたが、それを設定してちゃんと表示されることを確認しましょう。
左側のメニューから アプリの設定 > ビルドの設定 を選択して ビルド設定の追加にある編集ボタンを押下します。
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /
files:
- '**/*'
cache:
paths:
- node_modules/**/*
これを、
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
こうする。差分はこちら。
build commands をyarn run buildからyarn run generateへ変更するのと、bseDirectoryを/から/distへ変更しています。
この設定変更をしてから再デプロイし、改めて先ほどのリンクを表示してみてください。
ちゃんと期待した画面が表示されましたね！めでたい！
本番環境とは別に開発環境を作る
今回、mainブランチに対してデプロイをしました。本番環境です。
mainブランチとは別にdevelopブランチを作成しましたので、そちらを開発環境としてデプロイしましょう。
違いが分かるようにdevelopブランチに「開発環境です」みたいな文字が表示されるようにしてコミット＆プッシュしておくと分かりやすくていいです。
すべてのアプリ > sample-map-webapp にある「ブランチの接続」ボタンを押下。
リポジトリブランチの追加でdevelopブランチを選択します。
保存してデプロイを押下すると、
main(本番環境)とは別にdevelop(開発環境)がデプロイされました。
デプロイが済んだらdevelop側のリンクへアクセスして確認してみてください。
お手軽にブランチ毎の環境が用意できていい感じですね。
今回は予めブランチを指定して環境を構築しておく形でやりましたが、新しいブランチが作成されたら自動的に環境を構築してくれるような設定があったりもするようです。チーム開発でマージ前の動作確認がしやすくなっていいですね。さすがAmplify Console！
独自ドメインやサブドメインも簡単に割り当てられます。それについては過去に書いたこちらの記事をご案内。
お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる
お名前.comで取得した独自ドメインのサブドメインだけでなくルートドメインも割り当てる
PWA対応
Nuxt.jsの新規プロジェクト作成時に? Nuxt.js modulesでProgressive Web App (PWA)を選択しました。
するとなんという事でしょう。すでにPWA対応が済んでいるではありませんか。
先ほどデプロイしたサイトへスマホ(Android)でアクセスして、数回画面更新してみてください。
ほら。
名前や色などは、nuxt.config.jsのmanifestタグで指定できます。
アイコンはstatic/icon.pngを更新すれば変えられます。
:
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'@nuxtjs/pwa',
],
manifest: {
name: 'サンプルマップWebアプリ',
description: 'マップベースWebアプリのサンプルです。',
theme_color: '#ff00ff',
background_color: '#0000ff',
display: 'standalone',
Scope: '/',
start_url: '/',
splash_pages: null
},
:
ほら！
あとがき
『モザイク』ではVue CLIでcreateしたプロジェクトをベースに作成したのですが、それに比べてNuxt.jsのお手軽さといったら、、。
当時時間をかけて対応したり解決した様々な事柄(こちらの記事やこちらの記事)が、当然のように最初から備わっていて、もう戻れない。
そしてAmplify Consoleも、本当に、、便利すぎて、、、もう戻りたくない！