日本語

繁體中文
English

日本語

繁體中文
English

Appearance

開発環境設定とデプロイ ​

AI生成の要約

この記事では、Windows 11環境でWSL2を使用してDockerをインストールし、開発用にVSCodeでDev Containersを設定し、VitePressプロジェクトを生成および設定し、最終的にプロジェクトをCloudFlare Pagesにデプロイする方法を説明します。

環境 ​

  • Windows 11
  • AMD CPU

WSL2 ​

前提条件: BIOSでvirtualizationを有効にする SVM Mode = Enabled

新しいプロジェクトフォルダを作成

bash
mkdir miksinote
cd miksinote

Dockerのインストール ​

bash
# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

インストールを確認

bash
sudo docker run hello-world

権限を設定

bash
sudo usermod -aG docker $USER

その後、WSLを再起動

powershell
# powershell
wsl --shutdown
wsl

VSCode Dev Containers ​

VSCodeを開く

bash
code .

必須拡張機能をインストール ​

devcontainer.json設定ファイルを生成 ​

VSCodeでF1を押す

Dev Containers: Add Dev Container Configuration Files...を選択

Node.js & TypeScriptとCommon Utilsオプションを選択し、ファイルを生成

json
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
  "features": {
    "ghcr.io/devcontainers/features/common-utils:2": {},
    "ghcr.io/devcontainers/features/node:1": {}
  }
}

開発用のポートを設定

json
{
  "name": "Node.js & TypeScript",
  // ...
  "forwardPorts": [ 
    4173, 
    5173
  ] 
}

必要なVSCode拡張機能を設定

json
{
  "name": "Node.js & TypeScript",
  // ...
  "customizations": { 
    "vscode": { 
      "extensions": [ 
        "dbaeumer.vscode-eslint", 
        "Vue.volar", 
        "GitHub.copilot", 
        "GitHub.copilot-chat"
      ] 
    } 
  } 
}

設定後、右下にReopen in Containerというプロンプトが表示されるはずです

VitePressプロジェクトの作成 ​

VSCodeをコンテナ内で再オープンした後、内部ターミナルでnodeコマンドを使用できます。ここではpnpmを使用します。

bash
pnpm add -D vitepress

セットアップツールを使用して初期設定を完了

bash
pnpm vitepress init
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  miksinote
│
◇  Site description:
│  Miksin's note site
│
◆  Theme:
│  ○ Default Theme (Out of the box, good-looking docs)
│  ● Default Theme + Customization
│  ○ Custom Theme
└

開発環境の開始 ​

コンテナ外のブラウザでプレビューを表示するために、package.jsonに--hostを追加

json
{
  "scripts": {
    "docs:dev": "vitepress dev docs", 
    "docs:dev": "vitepress dev docs --host", 
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs", 
    "docs:preview": "vitepress preview docs --host"
  },
  "devDependencies": {
    "vitepress": "^1.5.0"
  }
}

実行してみる

bash
pnpm run docs:dev

デフォルトの画面が表示されるはずです

欠けている設定ファイルを追加 ​

デフォルトでは.gitignoreファイルが含まれていないので、追加しました

.pnpm-store
node_modules/

また、/docsフォルダにも追加

.vitepress/cache
.vitepress/dist

tsconfig.jsonも欠けています。本当に必要かどうかはわかりませんが、一応追加しました

json
{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "paths": {
      "@/*": ["./docs/*"],
      "@vitepress/*": ["./docs/.vitepress/*"]
    },
    "allowImportingTsExtensions": false,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": [
    "docs/**/*.md",
    "docs/.vitepress/*.mts",
    "docs/.vitepress/theme/*.ts",
    "docs/.vitepress/theme/**/*.ts",
    "docs/.vitepress/theme/**/*.vue"
  ],
  "exclude": [
    "node_modules",
    "resource"
  ],
  "vueCompilerOptions": {
    "vitePressExtensions": [".md"]
  }
}

CloudFlare Pagesへのデプロイ ​

CloudFlare Pagesを選んだ理由はシンプルです。私のドメインはCloudFlareでホストされています デプロイ前に、まずGitHubにコミットします（ここでは省略）

  1. CloudFlareにログイン後、ダッシュボードの左メニューからWorkers & Pagesを選択
  2. 作成をクリックし、Pagesタブを選択
  3. Gitに接続し、デプロイするリポジトリを選択
  4. フレームワークオプションにVitePressが既にあるため、設定は簡単です。以下を参照
Build command: npx vitepress build
Build output directory: /.vitepress/dist
Root directory: /docs
Environment variables:
  NODE_VERSION  22.12.0

デプロイ後、カスタムドメインも設定できます。私のドメインは既にCloudFlareにあるため、入力後すぐに反映されました

https://note.miksin.art/

References ​