Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 2 ● 名前：山本 一将（@kyamamoto9120） ● 所属：ユニークビジョン株式会社 ● 言語：C++, Rust, Python, Ruby ● 趣味：将棋、キャンプ、DIY、野球観戦 ● 実績：2015年 世界コンピュータ将棋選手権９位

Slide 3

Slide 3 text

フロントエンド技術は趣味で触る程度 3

Slide 4

Slide 4 text

今までのLIFFアプリを作るときの構成 4 HTML/JS取得 APIアクセス データ読み書き

Slide 5

Slide 5 text

Chapter - 01 Cloudflare Pagesとは 5

Slide 6

Slide 6 text

Cloudflare Pagesとは 6 ⚫ Cloudflare社が提供する 静的サイト ホスティングサービス → 競合するサービスはNetlify, Vercelなど ⚫ 2021年4月に正式リリースされた新しいサービス → 機能追加に意欲的 ⚫ 無料枠の気前が良い

Slide 7

Slide 7 text

料金プラン 7

Slide 8

Slide 8 text

Cloudflare社のサービスで構築するJAMスタック 8 HTML/JS取得 APIアクセス データ読み書き Cloudflare Pages Cloudflare Workers Cloudflare Workers KV

Slide 9

Slide 9 text

Chapter - 02 デプロイ手順 9

Slide 10

Slide 10 text

GitHubリポジトリにVue.jsのプロジェクトを作成 10

Slide 11

Slide 11 text

Cloudflare Pagesのプロジェクトを作成 11

Slide 12

Slide 12 text

GitHubのリポジトリを選択する 12

Slide 13

Slide 13 text

ビルドの設定を行う 13

Slide 14

Slide 14 text

設定が完了するとデプロイが開始される 14

Slide 15

Slide 15 text

デプロイが完了するとアクセスできる 15

Slide 16

Slide 16 text

変更をプッシュするとビルド・デプロイが走る 16

Slide 17

Slide 17 text

まとめ 17 1. Cloudflare PagesにVue.jsのアプリをデプロイしました 2. 手順は簡単です 3. 趣味でWebサイトを作成する際の選択肢の一つになると思います