前提
- これまでの記事を前提に作成しております。
実行
- AmplifyにHostingを追加する
$ amplify add hosting
- CDNであるCloudFrontとS3を使用してホスティングします。
? Select the plugin module to execute: Amazon CloudFront and S3
- SSL対応したいために下記を選択
? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
- S3のバケット名を指定します。
? hosting bucket name: test-chat
- 設定をAmplifyに反映にします
$ amplify publish
| Category | Resource name | Operation | Provider plugin |
| -------- | -------------------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | Create | awscloudformation |
? Are you sure you want to continue? (Y/n) Y
? Do you want to update code for your updated GraphQL API (Y/n) Y
? Do you want to generate GraphQL statements (queries, mutations and subs
cription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscript
ions (Y/n) Y
・
・ 10分ほど待つ
・
- 下記が出力されることを確認する
✔ Uploaded files successfully.
Your app is published successfully.
https://d3sddsev2inq7d.cloudfront.net
- アクセスしてみる
アクセスできない。
今回はCloudFrontからS3に接続しているので、CloudFrontのコンソールを確認してみる。
赤枠のところが Progressのままでは、アクセスできないので、 Enableまで待つ
- Enableになったら、アクセスしてみる
まとめ
AmplifyはAWSの各サービスがパッケージされており、コマンド一つで簡単に開発からホスティングまで可能となる
次は、Route53を使用して独自ドメインでホスティングしてみようと思います。