はじめに

• 前回記事：Ionic 3でPWAアプリをサクッと試してみる

今回は以前作成したIonic製のPWAをAmplify Consoleにてデプロイしてみる。ソースコードはGitHubに上がっている。

AWS Amplify ConsoleでPWAをデプロイする

Amplify Consoleの管理画面を開く。東京リージョンがまだないので、バージニア北部リージョンを使うことにした。

https://console.aws.amazon.com/amplify/home?region=us-east-1#/create

ソースコードをGitHubから取得するため、連携の設定をする必要がある。 まずはリポジトリサービスプロバイダーでGitHubを選択する。

GitHubの認証を許可する。

認証に成功するとリポジトリ一覧がリストに表示されるので、利用するリポジトリを選択する。 リポジトリを選択するとブランチが選べるようになるので、デプロイするブランチを選択する。

次にビルドの構成を設定する。 デフォルトで検出される設定が表示されるが、各環境に合わせて調整が必要になる可能性がある。

今回はIonic 3のプロジェクトなので、ビルドされた成果物はwwwディレクトリに出力されるので設定を以下のように変更してみた。



version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*



version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: /www # この行を変更
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

ちなみにこのビルド設定はamplify.ymlとしてプロジェクトのルートに配置しておけば読み込んでくれる模様。Amplify Console上でも編集できるが、エディタがノーマルモードとダークモードが使えて芸が細かい。

次へ進むと最終確認画面になる。「保存してデプロイ」をクリックして次へ進む。

進捗はGUIで見ることができる。npmパッケージのインストールをクラウド環境内で行なっているはずなので、多少時間がかかるのは仕方ない。

デプロイ先のURLが表示されているのでクリックしてみると、まだデプロイが完了していない状態では以下の表示となっていた。 デプロイ先はhttps://master.XXXXXX.amplifyapp.com/のような形式で、HTTPSに対応している。

1分ほどであっという間にビルドからデプロイまで進んで完了した。 画面左側にはなんとアプリケーションのスクリーンショットまで表示される。

アプリケーションのデプロイ先のURLを開いてみると、確かに作成したPWAがデプロイされている...！ （何も実装していない段階でCI/CD環境を作るのがベストプラクティスとのことなので機能はまだ無い＞＜）

所感

あっという間にPWAをクラウドにデプロイすることができて驚いた。Amplifyと言えばJavaScriptライブラリとしてスマホアプリやWebアプリケーションから呼び出して使うものという印象だったので、このような管理画面からのSPAのデプロイ機能は新鮮。その名の通りアプリケーション開発を増幅させるツール群という位置付けなのかもしれない。

今後やってみること

• ビルド成功時のメール通知
• 独自ドメインの設定
• Staging環境のブランチの作成
• Staging環境へのアクセス制限の設定
• GitHubリポジトリへのプッシュをトリガーとした自動デプロイ環境の構築