Node.js + Windows 環境に node-canvas を install + build する

環境

• Windows 11
• Node - v18.17.1
• node-canvas - v2.11.2
• node-gyp - v9.4.0
• Visual Stadio Build Tool 2022
• Python - v3.10.11, v2.7.18

1. (Option) Node.js のLTSをインストール

Node.js | https://nodejs.org/ja/download
※本稿ではNode.js-v18.17.1を使用

情報

比較的新しいバージョンのNode.jsであればwindows-build-toolsはNode.jsに同梱される為、インストール不要らしい

• 2023/8/23 現在 パブリックアーカイブされた模様

注意

FNM+PowerShell環境だと（公式のsetup手順どおりにsetupしていれば）PowerShell起動時にfnm envが実行され環境変数のパスにWindows書式・UNIX書式が混在する事になる。その為node-gyp rebuildでビルド時に PowerShell 側でパスが解決できないエラーになる。

解決策としてFNMの管理外にNode.jsをインストールする必要がある

2. node-canvasのインストール

Windowsでのインストール手順

canvas | npm

2.1. node-gypをインストール

Windowsでのインストール手順

2.1.1. Python 3.x をインストール

Python 3.x | Microsot Store

2.1.2. Visual Studio Build Tools 2022をインストール

Visual C++ ビルド環境をインストール

Visual Studio | Microsoft

2.1.3. Python 2.7をインストール

Download | Python(TM)

上記のページから Python 2.7.xを探すか、以下のリンクからDLしてインストール
Python 2.7.18 | Pyton(TM)

注意

• Python 2.7のデフォルトのインストールディレクトリC:\Python2.7から変更（C:\Program Files\Python2.7等）した場合はメモしておく。後で使います。
• Python 3.xとPython 2.7の両方を使うので、それぞれのバージョンを同居させる必要があります

2.1.4. Python 2.7 をnpmで使うPythonに設定する

powershell

npm config set python python2.7

情報

ほぼエラると思うので、ここを参考に%USERPROFILE%\.npmrcに直接書く

python is not a valid npm option | StackOverflow

%USERPROFILE%\.npmrc

# Python 2.7 をインストールしたディレクトリを記述
python=C:\Python27

2.1.5. Visual Stadio Build Tools 2017をnpmで使うmsvsに設定する

PowerShell

npm config set msvs_version 2017

%USERPROFILE%\.npmrc

msvs_version=2017

• 無い場合はインストール（どこから？）

2.1.6. node-gypをグローバルインストール

PowerShell

npm install -g node-gyp

2.2. GTK 2の導入

2.2.1. GTK 2のバイナリをDL

32bit OS用、64bit OS用のいづれか

• WIN34 - gtk+-bundle_2.24.10-20120208_win32.zip | download.gnome.org
• WIN64 - gtk+-bundle_2.22.1-20101229_win64.zip | download.gnome.org

2.2.2. DLしたバイナリを指定のディレクトリ（C:\GTK）に展開

こんな感じ

dir

C:\GKT
- \bin
- \build
- \etc
- \include
- \lib
- \man
- \manifest
- \share
- \src
- gtk+-bundle_2.22.1-20101229_win64.README.txt

2.3. libjpeg-turboの導入

2.3.1. libjpeg-turboバイナリのDL

32bit OS用、64bit OS用のいづれか

• WIN32 - libjpeg-turbo-2.0.0-vc.exe | sourceforge.net
• WIN64 - libjpeg-turbo-2.0.0-vc64.exe | sourceforge.net

2.3.2. DLした.exeをインストール

.exeをWクリック

• WIN32 - C:\libjpeg-turbo
• WIN64 - C:\libjpeg-turbo64

3. Project にnode-canvasをインストール

3.1. プロジェクトディレクトリに移動する

bash

cd <project directory>

3.2. node-canvasをインストール

bash

# 本稿では test 目的でのインストールの為、--save-dev オプションを付与
npm install --save-dev --build-from-source canvas

3.3. (Option)node-canvasをリビルド

node-canvasは基本、各OS（macOS Linux Windows）のバイナリがインストールされるが、プロセッサーが合わない場合、正しく動作しない（らしい）。
その場合、システム上でビルドをし直す必要がある。

3.3.1. (Option)Node.js-v18.17.1のヘッダーをインストールする

以下の様なエラーがでる場合、必要

FetchError: request to https://nodejs.org/download/release/v18.17.1/node-v18.17.1-headers.tar.gz failed, reason: connect ECONNREFUSED 2606:4700:10::6814:172e:443

• 参考 StackOverflow

• DLリンク

• node-v18.17.1-headers.tar.gz | nodejs.org

3.3.2. node-canvasがインストールされたnode_modulesディレクトリに移動する

bash

cd node_modules/canvas

3.3.3. node-gypでリビルド

bash

# <user>はOSのログインユーザー名
$ node-gyp rebuild --verbose --nodedir="C:\Users\<user>\.node-gyp\18.17.1"

ext. プロジェクトのNode.jsバージョンを固定する

• FNMの利用が前提
• Node.js - v18でビルドしたcanvasはNode.js - v18でしか動作しない

bash

$ fnm use 18

$ fnm current
v18.17.1

$ node -v > .node-version

了