Closed7

VuePressビルド成果物をDeno Deployでホスティングしてみる

WhyKWhyK

必要なもの

  • Denoサーバー
  • VuePressビルド成果物
WhyKWhyK

ディレクトリ構造

.
├── README.md
├── node_modules
├── package.json
├── yarn.lock
├── server <- Denoサーバー
│   ├── deno.jsonc
│   ├── dist <- VuePressビルド成果物
│   └── main.ts
└── src <- VuePressの中身

server配下にdistを設定している理由は、ルートを作業ディレクトリにしてしまうとnode_modulesもDeno Deployにあがってしまうから
えげつない量のファイルがあがりかけた

WhyKWhyK

.vuepress/config.js配下の設定

module.exports = {
  title: '...',
  description: '...',
  dest: 'server/dist',
  locales: {
    '/': {
      lang: 'ja'
    }
  },
  themeConfig: {
    sidebar: [...],
    sidebarDepth: 2,
  },
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-ruby'))
    }
  }
}

設定ファイルはTypeScriptにする手順が公式に載っていたものの、requireについての言及がなかったので据え置いた
https://vuepress.vuejs.org/guide/typescript-as-config.html

WhyKWhyK

ワークフローファイルの内訳

name: Deploy Code

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write # This is required to allow the GitHub Action to authenticate with Deno Deploy.
      contents: read
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup node env
        uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: yarn
      - name: Build Web Site
        run: yarn build
      - name: Deploy to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: sample-aaa
          entrypoint: main.ts
          root: server

deployctl公式ドキュメントから一部拝借して構築した
https://deno.com/deploy/docs/deployctl#deployctl-github-action

WhyKWhyK

Denoサーバー

簡易的なファイルサーバーでいい

私は以前にここを参考にした記憶があるが、なんかだいぶ違うので別の場所を参考にしたかもしれない(参考にした場所はもっとシンプルだった
https://deno.land/manual@v1.29.3/examples/file_server

main.ts
import { serve } from "https://deno.land/std@0.167.0/http/server.ts";

serve(async (req) => {
  const { pathname } = new URL(req.url);
  const isHTML = (pathname: string) =>
    !RegExp(/\.[ico|svg|css|js|txt]/).test(pathname);
  const fileName = isHTML(pathname)
    ? `dist${pathname}index.html`
    : `dist${pathname}`;

  try {
    const imgFile = await Deno.open(fileName, { read: true });
    return new Response(imgFile.readable);
  } catch (error) {
    return new Response("404 Not Found", { status: 404 });
  }
});
このスクラップは2023/01/18にクローズされました