Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amplify Consoleで かんたん!Webサイト公開

640 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Amplify Consoleで かんたん!Webサイト公開

  1. 1. Amplify Consoleで かんたん!Webサイト公開 2019/02/19 @coppieee
  2. 2. 自己紹介 八木大介 Web: https://coppieee.com twitter: @coppieee フリーランスプログラマー Webサイト/Webアプリの作成がメイン。 Vue.js, TypeScript, Serverlessなど。 仕事お受けしております。
  3. 3. 新しく静的Webサイトを公開するとき どのような手順を踏みますか?
  4. 4. やりたいこと 静的Webサイト 検証環境と本番環境2つ用意して 検証環境にはBASIC認証を掛ける
  5. 5. やりたいこと 静的Webサイト ← サーバ借りる?サーバの設定、アップロードの設定。 検証環境と本番環境2つ用意して 検証環境にはBASIC認証を掛ける ←BASIC認証ってどうやるの??? 更新するたびにファイルのアップロードが必要
  6. 6. 設定がめんどくさい! できるだけ楽したい!
  7. 7. そんなあなたにAWS Amplify Console
  8. 8. Amplify Consoleとは Gitホスティングサービスと連携して git pushするだけで ビルド、デプロイ、ホスティング まで自動的にしてくれるサービス。
  9. 9. 設定はサイト上ですべて完結! 操作も簡単で5分もかからない!
  10. 10. 前準備 AWSアカウントが必要 GitHubやBitbucketなどにソースをアップ
  11. 11. 設定の流れ
  12. 12. サービスプロバイダを選択
  13. 13. リポジトリブランチとブランチを選択
  14. 14. ビルド設定の構成 これにビルドの設定やアップロード 対象のフォルダを設定する。 Vue Cli 3でプロジェクトを作成したと ころ、ある程度自動的に設定してる れるっぽくて特に修正する必要があ りませんでした。
  15. 15. 完了! 自動的にビルド、デプロイ が走るのでしばらくまっ て、完了したらサイトにア クセスできるようになる。
  16. 16. https://master.xxxxxxxx.amplifyapp.com/ というURLでサイト公開される デフォルトでhttps対応! カスタムドメインもAmazon Route 53でドメイン取れば簡単に設定ができる。
  17. 17. 実際どのように開発していくかの説明
  18. 18. 更新したソースをgit push Git ホスティングサービス Amplify Console pushのたびに 自動的にビルド&デプロイ 開発者はgit pushするだけで、自動的にサイトをアップデートしてくれる ので、開発に専念できる! 更新の流れ サイト更新されて 確認できる git pushを検知
  19. 19. 私のサイトもAmplify Consoleを使用しています! https://collection.coppieee.comhttps://coppieee.com
  20. 20. 検証環境と本番環境2つ用意する場合 次に
  21. 21. gitのブランチを切る develop 検証用環境 master 本番用環境
  22. 22. Amplify Consoleでそれぞれ関連付けする
  23. 23. https://develop.xxxxxxx.amplifyapp.com/ https://master.xxxxxxxx.amplifyapp.com/ 検証用環境と本番環境2つできた。
  24. 24. developにBASIC認証をかける サイト上でユーザネームとパスワード設定するだけで完 了!
  25. 25. developブランチ develop.xxxxxx.amplifyapp.com (BASIC認証付き) 検証用環境 開発段階の流れ 開発段階のコード をdevelopにpush 検証用環境にビルド &デプロイされて 確認できる
  26. 26. developブランチ develop.xxxxxx.amplifyapp.com (BASIC認証付き)masterにマージ 検証用環境 masterブランチ master.xxxxxx.amplifyapp.com 本番環境 本番適応の流れ ビルド&デプロイ
  27. 27. 料金体制 ビルド&デプロイ にかかった時間だけ課金される。1分あたり$0.01 例えばVue.jsの場合一回ビルド3分位かかるので、pushするたびに$0.03かかる。 無料枠 (AWSアカウント登録から12ヶ月まで) 有料 ビルド&デプロイ 1000分/月 $0.01 / 分 ホスティング 保存容量 5G ひと月あたり$0.023 / G ホスティング 通信量 15G/月 $0.15 / G
  28. 28. 例 一日2回コミット 毎日300アクティブユーザの場合 合計: 一ヶ月あたり $3.19 内訳:(Web アプリサイズ25MB , 1アクセスあたり1.5MBと仮定)    ビルド&デプロイ $1.2    ホスティング $1.99 詳しい料金例: https://aws.amazon.com/jp/amplify/console/pricing/
  29. 29. ご清聴ありがとうございました!

×