Monaca Advent Calendar 2018 - Adventar & PWA Advent Calendar 2018 の25日目です！

MonacaでPWAアプリが開発できるようになりました。Service Workerなどがあらかじめ組み込まれたアプリケーションテンプレートがあるので、開発をすぐにはじめられます。

PWAとしてビルドした際、その内容はZipまたはFirebaseにデプロイできます。Firebase Hostingを使う場合にはこれで十分ですが、別なサービスを使うことも多いはずです。以前GitHub Pagesへデプロイする方法は書きましたがが、今回はAmazon S3とCloudFrontへのデプロイ方法を紹介します。

必要なAWSのサービス

AWSは一つのサービスで完結してくれないのが辛い…。ということで今回は以下のサービスを組み合わせています。

• S3
  HTML/JavaScript/CSS/画像などのリソース保存用
• CloudFront
  S3コンテンツをCDN配信するため。独自ドメインのHTTPS化
• IAM
  ターミナルからS3へアップロードするためのキーを生成
• Route53
  ドメイン管理
• Certificate Manager
  ドメインの証明書管理

S3のバケット、CloudFrontの設定、Route53でのドメイン設定、Certificate Managerでの証明書取得が終わっていることとします。一連の手順はCloudFront で S3 静的ウェブサイトホスティングを SSL/TLS に対応させる ｜ DevelopersIOなどが詳しいかと思います。

Monaca IDEのターミナルで設定

Monaca IDEにはデフォルトでPythonが入っていますが、pipは入っていません。そこでインストールします（ターミナル機能はProプラン以上でないと使えないので注意して下さい）。

$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
$ python get-pip.py --user

そしてコマンドのPATHを通します。

$ echo 'export PATH=/home/terminaluser/.local/bin:$PATH' >> ~/.bashrc
$ . ~/.bashrc

これで pip コマンドが使えるようになります。

AWSコマンドのインストール

AWSをCLIで扱えるようにする awscli をインストールします。

$ pip install awscli --user

AWS CLIの設定

IAMで生成したAWSキーを設定します。S3へのフルアクセスが必要です。

aws configure --profile=monaca

対話型のプロンプトが出ますので、AWSのキーを指定してください。

コンテンツをアップロードする

ここまで準備ができれば、後はコマンドを打つだけです。syncコマンドで Monacaアプリの www ディレクトリとS3のバケットを同期してくれます。

aws s3 sync www s3://monaca.com2.io/ --acl public-read --profile=monaca

まとめ

PWAの技術的必須要素にHTTPSが挙げられています。HTTPSでないとService WorkerやWebプッシュ通知は利用できません。また、キャッシュを使う際には基本的には静的サイトで開発されている方がお勧めです。そうした点からS3 + CloudFrontの組み合わせはありでしょう。

MonacaアプリをPWA化する際の配信先として、FirebaseだけではくS3 + CloudFrontやGitHub Pagesも検討してください！

追記

PWAに関するコミュニティを立ち上げました！第一回目のイベントは2月20日です、PWAが気になる方はぜひご参加ください！