Help us understand the problem. What is going on with this article?

MonacaのPWAアプリをAmazon S3&CloudFrontで公開する

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

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

ScreenShot_ 2018-12-25 11.50.38.png

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

ScreenShot_ 2018-12-25 11.52.08.png

まとめ

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

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

追記

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

https://pwanight.connpass.com/event/116944/

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away