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

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

Avatar for Kazumasa Yamamoto Kazumasa Yamamoto
May 25, 2021
0
960

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

Avatar for Kazumasa Yamamoto

Kazumasa Yamamoto

May 25, 2021
Tweet

More Decks by Kazumasa Yamamoto

See All by Kazumasa Yamamoto
ユニークビジョンの Rust 活用事例
Avatar for Kazumasa Yamamoto fill9120
2
1.6k
Rust & AWS X-Ray による分散トレーシングの実現
Avatar for Kazumasa Yamamoto fill9120
0
2.8k
Rust製プロダクトを 3年以上運用して得たノウハウ
Avatar for Kazumasa Yamamoto fill9120
0
990
Messaging APIを駆使した ChatGPT ボットのUX改善
Avatar for Kazumasa Yamamoto fill9120
0
370
Rust を開発言語として採用してからの取り組み
Avatar for Kazumasa Yamamoto fill9120
1
1.8k
ストラクチャードコミュニケーション
Avatar for Kazumasa Yamamoto fill9120
0
130
Rustでディープラーニング
Avatar for Kazumasa Yamamoto fill9120
0
410
Rustで定数式を扱う
Avatar for Kazumasa Yamamoto fill9120
0
440
LINE BotとLIFFを使って謎解きアプリを作った話
Avatar for Kazumasa Yamamoto fill9120
0
700

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
41
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
450
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.5k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
420
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
420
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
140
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
59

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サイトを作成する際の選択肢の一つになると思います