Slidevをモノレポ管理してCloudflare pagesに公開する
スライド作成にSlidevを使いたい！そしてwebで公開もしたい！だけど、毎回新規でリポジトリを作成したくない！！！！！
というモチベーションでSlidevをモノレポ管理したのでその備忘録です。
基本的には以下のスクラップを記事にまとめたものです。
作成したリポジトリはこちらになります
Slidevについて
Slidevについては既に紹介記事がいくつもあるので詳しくは省略しますがmarkdownやVue.jsのコンポーネントを使ってスライドが作成することができ、いい感じのアニメーションやクールなデザインがとてもいい感じなスライド作成ツールです。詳しくは公式をご参照ください。
はじめに
Slidevは初期化するとVercel, Netlifyにすぐ公開できるようになっていて大変便利ですが一つのSlidevのプロジェクトに対して1つのGitHubリポジトリを用意する必要があり、継続的なスライド管理を考えると1つのリポジトリにまとめたくなります。
なのでnpm, yarn, pnpmなどで用意されているworkspace機能を使ってSlidevのプロジェクトをモノレポ管理してみました。
これで1つのリポジトリで全てのスライドを管理できるようになりましたがモノレポにしたスライドを全てwebに公開までしたいです。これに関してはNetlify, Vercel, Cloudflare pagesなどの各社のモノレポサポートを調べてみたのですが無料で上限なしのモノレポサポートはしていなそうだったため、ビルドした成果物を一箇所に集め、リダイレクト設定をすることでひとつのドメインで全てのスライドを公開できるようにできました。
このやり方に関してはSlidevの作者であるantfuさんのリポジトリを参考にさせていただきました。
本記事ではworkspaceの作成からwebに公開までの流れを紹介できればと思います。なお、今回はパッケージマネージャーにpnpm、デプロイ先はCloudflare pagesを使用しますがパッケージマネージャーはnpmやyarnでも問題ないですしデプロイ先もVercelやNetlifyでも同様のやり方でデプロイできるはずです。
使用技術
- pnpm 9.5.0
- node v20.6.1
- @slidev/cli ^0.49.16
- wrangler ^3.63.2
プロジェクトの作成
最初にpnpmを使っていきますのでまだであればインストールします。現在推奨のインストール方法がCorepackを使うとのことだったのでCorepack経由でインストール。
corepack enable
corepack enable pnpm
CorepackがNodeに付属していない場合はインストールする必要があるかもしれません。
pnpmのインストールが完了したら以下のコマンドでpackage.jsonを作成します。
pnpm init
{
"name": "slidev-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
+ "packageManager": "pnpm@9.5.0"
}
pnpmのWorkspaceを有効にするためにpnpm-workspace.yamlを以下のように作成します。
packages:
- "*/src"
Slidevプロジェクトの作成
pnpm-workspace.yamlを作成することでworkspaceを有効にしたので、ルートディレクトリからSlidevのプロジェクトを作っていきます。フォルダ名は好きに命名して問題ないです。
mkdir slide1 slide2
cd slide1
pnpm create slidev@latest
プロジェクト名はsrcとしてください。ここまでで以下のような構成になっているはずです。
.
├── package.json
├── pnpm-workspace.yaml
├── slide1
│ └── src
│ ├── README.md
│ ├── components
│ │ └── Counter.vue
│ ├── netlify.toml
│ ├── package.json
│ ├── pages
│ │ └── multiple-entries.md
│ ├── slides.md
│ ├── snippets
│ │ └── external.ts
│ └── vercel.json
├── slide2
Slidevプロジェクトのpackage.jsonにある依存関係は他のスライドでも使うのでルートに移しておきます。
{
"name": "src",
"type": "module",
"private": true,
"scripts": {
"build": "slidev build",
"dev": "slidev --open",
"export": "slidev export"
},
- "dependencies": {
- "@slidev/cli": "^0.49.16",
- "@slidev/theme-default": "latest",
- "@slidev/theme-seriph": "latest",
- "vue": "^3.4.31"
- }
}
{
"name": "slidev-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@9.5.0",
+ "dependencies": {
+ "@slidev/cli": "^0.49.16",
+ "@slidev/theme-default": "latest",
+ "@slidev/theme-seriph": "latest",
+ "vue": "^3.4.31"
+ }
}
Slidevのビルドとエクスポート
作成したSlidevプロジェクトのpackage.jsonにあるビルドとエクスポートのスクリプトを以下のように修正します。
{
"name": "slidev",
"type": "module",
"private": true,
"scripts": {
- "build": "slidev build",
- "dev": "slidev --open",
+ "build": "slidev build --base /slide1/ --out ../../dist/slide1",
+ "export": "slidev export --dark --output ../slide1.pdf"
"export": "slidev export"
}
}
修正できたらビルドとエクスポートができるか以下のように実行して確認してみましょう。
pnpm run build
pnpm run export
なお、exportはplyawrightを使用するので依存関係をルートのpackage.jsonに記載されるように追加しておきます。
pnpm i -w -D playwright-chromium
これでSlidevのプロジェクト作成は完了です。同じ要領でスライドを作るたびにディレクトリを作成してSlidevプロジェクトを作成していけばOKです。
リダイレクト設定
今回はCloudflare pagesにデプロイするため_redirectsというファイルを配置する必要があります。ファイルはデプロイするときのターゲットディレクトリ配下に配置する必要があるため今回はdist配下に作成します。dist自体はバージョン管理からはずしたいと思いますので_redirectsのみバージョン管理に含まれるよう.gitignoreに記載しておくと良いでしょう。
/slide1/* /slide1/index.html 200
/slide2/* /slide2/index.html 200
/ /index.html 200
デプロイする
デプロイはCLIを使ってローカルから実行しました。GitHubリポジトリと連携してデプロイもできるはずです。CLIはグローバルにインストールでも問題ないです。
pnpm i -D -w wrangler
pnpx wrangler login
ビルドはルートから実行できるように以下のスクリプトを追加しておくと便利かもしれません。
{
"name": "slidev-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "build": "pnpm run -r build"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@9.5.0",
"dependencies": {
"@slidev/cli": "^0.49.16",
"@slidev/theme-default": "latest",
"@slidev/theme-seriph": "latest",
"vue": "^3.4.31"
},
"devDependencies": {
"playwright-chromium": "^1.45.1",
"wrangler": "^3.63.2"
}
}
以下コマンドをルートで実行してビルドした成果物をデプロイします！
pnpm run build
pnpx wrangler deploy dist
これでhttps://<Cloudflare pagesで払い出されたドメイン>/slide1のようなURLでスライドにアクセスできるはずです！
ルートのディレクトリには何も配置しないとNot Foundになってしまうので気になるかたはスライドのリンク置き場などを配置しておくといいかもしれません。また、カスタムドメインが使用したい方はCloudflareでドメインの設定が必要です。
おわりに
本記事では以下について紹介しました。
- pnpmのworkspaceを使った複数Slidevの管理方法
- Cloudflare pagesへのデプロイ方法
Slidevで作成したスライドを1つのGitHubリポジトリで管理して外部にも公開したいと思ったのですが意外と調べても出てこず一旦やりたいことはできたのでどなたかのお役に立てばと思いまとめてみました。Slidevはまだ使い始めたばかりですがmarkdownでスライドを作れる体験はよく、作っていてけっこう楽しかったので今後も発表機会があればSlidevで作っていこうと思います。
今回は以上です！皆さんもぜひSlidevを使ってみてください🐼
Discussion