Cloudflare PagesにVue.jsアプリをデプロイしてみた

Transcript

1. 2021年5月25日 Cloudflare Pagesに Vue.jsアプリをデプロイしてみた 1
2. 自己紹介 2 • 名前：山本 一将（@kyamamoto9120） • 所属：ユニークビジョン株式会社 • 言語：C++, Rust, Python, Ruby • 趣味：将棋、キャンプ、DIY、野球観戦 • 実績：2015年 世界コンピュータ将棋選手権９位
3. フロントエンド技術は趣味で触る程度 3
4. 今までのLIFFアプリを作るときの構成 4 HTML/JS取得 APIアクセス データ読み書き
5. Chapter - 01 Cloudflare Pagesとは 5
6. Cloudflare Pagesとは 6 ⚫ Cloudflare社が提供する 静的サイト ホスティングサービス → 競合するサービスはNetlify, Vercelなど ⚫ 2021年4月に正式リリースされた新しいサービス → 機能追加に意欲的 ⚫ 無料枠の気前が良い
7. 料金プラン 7
8. Cloudflare社のサービスで構築するJAMスタック 8 HTML/JS取得 APIアクセス データ読み書き Cloudflare Pages Cloudflare Workers Cloudflare Workers KV
9. Chapter - 02 デプロイ手順 9
10. GitHubリポジトリにVue.jsのプロジェクトを作成 10
11. Cloudflare Pagesのプロジェクトを作成 11
12. GitHubのリポジトリを選択する 12
13. ビルドの設定を行う 13
14. 設定が完了するとデプロイが開始される 14
15. デプロイが完了するとアクセスできる 15
16. 変更をプッシュするとビルド・デプロイが走る 16
17. まとめ 17 1. Cloudflare PagesにVue.jsのアプリをデプロイしました 2. 手順は簡単です 3. 趣味でWebサイトを作成する際の選択肢の一つになると思います