Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kazumasa Yamamoto
May 25, 2021
210

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

Kazumasa Yamamoto

May 25, 2021
Tweet

Transcript

  1. 2021年5月25日 Cloudflare Pagesに Vue.jsアプリをデプロイしてみた 1

  2. 自己紹介 2 • 名前:山本 一将(@kyamamoto9120) • 所属:ユニークビジョン株式会社 • 言語:C++, Rust,

    Python, Ruby • 趣味:将棋、キャンプ、DIY、野球観戦 • 実績:2015年 世界コンピュータ将棋選手権9位
  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サイトを作成する際の選択肢の一つになると思います