Webデザイン・Web制作に関する勉強会 #4 https://kfug.connpass.com/event/117873/ で発表した資料です。

1. Amplify Consoleで
かんたん！Webサイト公開
2019/02/19
@coppieee

2. 自己紹介
八木大介
Web: https://coppieee.com
twitter: @coppieee
フリーランスプログラマー
Webサイト/Webアプリの作成がメイン。
Vue.js, TypeScript, Serverlessなど。
仕事お受けしております。

3. 新しく静的Webサイトを公開するとき
どのような手順を踏みますか？

4. やりたいこと
静的Webサイト
検証環境と本番環境２つ用意して
検証環境にはBASIC認証を掛ける

5. やりたいこと
静的Webサイト
← サーバ借りる？サーバの設定、アップロードの設定。
検証環境と本番環境２つ用意して
検証環境にはBASIC認証を掛ける
←BASIC認証ってどうやるの？？？
更新するたびにファイルのアップロードが必要

6. 設定がめんどくさい！
できるだけ楽したい！

7. そんなあなたにAWS Amplify Console

8. Amplify Consoleとは
Gitホスティングサービスと連携して
git pushするだけで
ビルド、デプロイ、ホスティング
まで自動的にしてくれるサービス。

9. 設定はサイト上ですべて完結！
操作も簡単で5分もかからない！

10. 前準備
AWSアカウントが必要
GitHubやBitbucketなどにソースをアップ

11. 設定の流れ

12. サービスプロバイダを選択

13. リポジトリブランチとブランチを選択

14. ビルド設定の構成
これにビルドの設定やアップロード
対象のフォルダを設定する。
Vue Cli 3でプロジェクトを作成したと
ころ、ある程度自動的に設定してる
れるっぽくて特に修正する必要があ
りませんでした。

15. 完了！
自動的にビルド、デプロイ
が走るのでしばらくまっ
て、完了したらサイトにア
クセスできるようになる。

16. https://master.xxxxxxxx.amplifyapp.com/
というURLでサイト公開される
デフォルトでhttps対応！
カスタムドメインもAmazon Route 53でドメイン取れば簡単に設定ができる。

17. 実際どのように開発していくかの説明

18. 更新したソースをgit push
Git ホスティングサービス Amplify Console
pushのたびに
自動的にビルド&デプロイ
開発者はgit pushするだけで、自動的にサイトをアップデートしてくれる
ので、開発に専念できる！
更新の流れ
サイト更新されて
確認できる
git pushを検知

19. 私のサイトもAmplify Consoleを使用しています！
https://collection.coppieee.comhttps://coppieee.com

20. 検証環境と本番環境２つ用意する場合
次に

21. gitのブランチを切る
develop 検証用環境
master 本番用環境

22. Amplify Consoleでそれぞれ関連付けする

23. https://develop.xxxxxxx.amplifyapp.com/
https://master.xxxxxxxx.amplifyapp.com/
検証用環境と本番環境２つできた。

24. developにBASIC認証をかける
サイト上でユーザネームとパスワード設定するだけで完
了！

25. developブランチ
develop.xxxxxx.amplifyapp.com
(BASIC認証付き)
検証用環境
開発段階の流れ
開発段階のコード
をdevelopにpush
検証用環境にビルド &デプロイされて
確認できる

26. developブランチ
develop.xxxxxx.amplifyapp.com
(BASIC認証付き)masterにマージ
検証用環境
masterブランチ
master.xxxxxx.amplifyapp.com
本番環境
本番適応の流れ
ビルド&デプロイ

27. 料金体制
ビルド＆デプロイ にかかった時間だけ課金される。1分あたり$0.01
例えばVue.jsの場合一回ビルド3分位かかるので、pushするたびに$0.03かかる。
無料枠
(AWSアカウント登録から12ヶ月まで)
有料
ビルド&デプロイ 1000分/月 $0.01 / 分
ホスティング 保存容量 5G ひと月あたり$0.023 / G
ホスティング 通信量 15G/月 $0.15 / G

28. 例
一日2回コミット
毎日300アクティブユーザの場合
合計: 一ヶ月あたり $3.19
内訳：(Web アプリサイズ25MB , 1アクセスあたり1.5MBと仮定)
ビルド&デプロイ $1.2
ホスティング $1.99
詳しい料金例： https://aws.amazon.com/jp/amplify/console/pricing/

29. ご清聴ありがとうございました！