Nuxt.js+Vuetifyで新規作成したPWA対応済みWebアプリをAmplify Consoleで公開

# Nuxt.js+Vuetifyで新規作成したPWA対応済みWebアプリをAmplify Consoleで公開

## はじめに
Nuxt.jsのWebアプリのプロジェクトを新規作成し、それをそのままAmplify Consoleを利用して公開するところまでを書きます。
[VuetifyというUIフレームワーク](https://vuetifyjs.com/ja/)を利用して楽にマテリアルデザインに沿った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つのページやヘッダー、フッター、ハンバーガーメニューなどが既に実装されてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/a265e2c3-e946-9645-beb0-4e23c8e6184f.png)
Vuetifyのおかげで見栄えも既にいい感じです。

### Amplify Consoleを利用して公開する
新規作成したWebアプリを何も手を加えずこのまま公開します。

#### GitHubリポジトリの作成とプッシュ
そのためにまずは、GitHubなどにリポジトリを作成して先ほど作成したプロジェクトをプッシュしておきます。
ブランチは`main`とは別に`develop`も作っておきましょう。せっかくなので、開発環境と本番環境を分けて構築するためです。

#### Amplify Console に新規アプリ作成
AWS Console > AWS Amplify > New app ボタン > Host web app
From your existing code で 利用しているコード管理システムを選択する。ここではGitHubを選択して進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/8b1efb0e-2689-b1f3-7a51-2b5cd07b74f7.png)
目的のブランチ(ここでは`main`)を選択して次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/1c9f432c-41e1-6b82-1f86-7a20d7917721.png)
続いてビルド設定の構成。本当はここでビルドの設定を編集する必要があるのですが、ひとまずこのまま次へ進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/7d54ee70-6cc0-7e06-71aa-2d26edc57a83.png)
最後の確認画面。保存してデプロイしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/482c0868-efad-fa0a-ba1e-02a19ff3658b.png)
プロビジョン、ビルド、デプロイ、検証、が順に進んでいく様子を確認できる画面へ遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/35c7a5dc-903f-5a9a-6a55-86e9deca3096.png)
デプロイや検証が完了したら、赤枠で囲った場所のリンクをクリックすると、デプロイされたWebアプリが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/471e9221-188b-6e40-225d-14ea6bb86bb5.png)
が、なんかうまく表示できてません。

> Welcome
> Your app will appear here once you complete your first deployment.

っていう画面が表示されてます。先ほど`yarn dev`で表示した画面と違いますよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/07166a71-75de-1b6b-fd38-e7931d33489e.png)

先ほど「ビルドの設定を編集する必要があるのですが」と書きましたが、それを設定してちゃんと表示されることを確認しましょう。
左側のメニューから `アプリの設定 > ビルドの設定` を選択して ビルド設定の追加にある編集ボタンを押下します。

```yml
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/**/*
```
これを、

```yml
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/**/*
```
こうする。差分はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/6ec30364-c926-5194-692b-06f40c57d53c.png)
build commands を`yarn run build`から`yarn run generate`へ変更するのと、bseDirectoryを`/`から`/dist`へ変更しています。

この設定変更をしてから再デプロイし、改めて先ほどのリンクを表示してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/8fce7253-b87c-17dd-0004-4dfb478f9061.png)
ちゃんと期待した画面が表示されましたね！めでたい！

#### 本番環境とは別に開発環境を作る
今回、mainブランチに対してデプロイをしました。本番環境です。
mainブランチとは別にdevelopブランチを作成しましたので、そちらを開発環境としてデプロイしましょう。

違いが分かるようにdevelopブランチに「開発環境です」みたいな文字が表示されるようにしてコミット＆プッシュしておくと分かりやすくていいです。

すべてのアプリ > sample-map-webapp にある「ブランチの接続」ボタンを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/82ed77a9-3f45-0707-40ee-3e3f2e4c38b1.png)
リポジトリブランチの追加でdevelopブランチを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/5f364087-dd27-0468-5400-d6e542625ab6.png)
保存してデプロイを押下すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/99011688-a553-607a-f59d-bdf44682c1f1.png)
main(本番環境)とは別にdevelop(開発環境)がデプロイされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/5bc212c6-2673-4414-05fa-b5c9453eac47.png)
デプロイが済んだらdevelop側のリンクへアクセスして確認してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/45a595e9-d644-4745-ce67-9f14f47af831.png)
お手軽にブランチ毎の環境が用意できていい感じですね。

今回は予めブランチを指定して環境を構築しておく形でやりましたが、新しいブランチが作成されたら自動的に環境を構築してくれるような設定があったりもするようです。チーム開発でマージ前の動作確認がしやすくなっていいですね。さすがAmplify Console！

独自ドメインやサブドメインも簡単に割り当てられます。それについては過去に書いたこちらの記事をご案内。
[お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる](https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b)
[お名前.comで取得した独自ドメインのサブドメインだけでなくルートドメインも割り当てる](https://qiita.com/w2or3w/items/203388cb54fbb9267af9)

### PWA対応
Nuxt.jsの新規プロジェクト作成時に`? Nuxt.js modules`で`Progressive Web App (PWA)`を選択しました。
するとなんという事でしょう。すでにPWA対応が済んでいるではありませんか。
先ほどデプロイしたサイトへスマホ(Android)でアクセスして、数回画面更新してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/2931821a-a0ab-0dba-bec5-52ed56916e59.png)
ほら。

名前や色などは、`nuxt.config.js`の`manifest`タグで指定できます。
アイコンは`static/icon.png`を更新すれば変えられます。

```nuxt.config.js
 :
  // 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
  },
 :
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394775/fc2a6954-778c-9032-15be-4d0b8ddf82fd.png)
ほら！

## あとがき
[『モザイク』](https://mosaic.w2or3w.com)ではVue CLIでcreateしたプロジェクトをベースに作成したのですが、それに比べてNuxt.jsのお手軽さといったら、、。
当時時間をかけて対応したり解決した様々な事柄([こちらの記事](https://qiita.com/w2or3w/items/20d393560571f1531041)や[こちらの記事](https://qiita.com/w2or3w/items/74a6e471501ee28ee9dd))が、当然のように最初から備わっていて、もう戻れない。
そしてAmplify Consoleも、本当に、、便利すぎて、、、もう戻りたくない！