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`を使用

::: note info
情報

比較的新しいバージョンの`Node.js`であれば[`windows-build-tools`](https://www.npmjs.com/package/windows-build-tools)は`Node.js`に同梱される為、インストール不要らしい

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

:::

::: note warn
注意

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

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

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

Windowsでのインストール手順

https://github.com/Automattic/node-canvas/wiki/Installation:-Windows

`canvas` | npm

https://www.npmjs.com/package/canvas



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

Windowsでのインストール手順

https://github.com/nodejs/node-gyp#on-windows

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

[Python 3.x | Microsot Store](https://apps.microsoft.com/store/detail/python-310/9PJPW5LDXLZ5?hl=en-us&gl=us)

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

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

[Visual Studio | Microsoft](https://visualstudio.microsoft.com/ja/thank-you-downloading-visual-studio/?sku=BuildTools)

### 2.1.3. `Python 2.7`をインストール

[Download | Python(TM)](https://www.python.org/downloads/)

上記のページから `Python 2.7.x`を探すか、以下のリンクからDLしてインストール
[Python 2.7.18 | Pyton(TM)](https://www.python.org/downloads/)

::: note warn
注意

* `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:powershell
npm config set python python2.7
```

::: note info
情報

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

[python is not a valid npm option | StackOverflow](https://stackoverflow.com/questions/74522956/python-is-not-a-valid-npm-option)

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

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

```powershell:PowerShell
npm config set msvs_version 2017
```

```ini:%USERPROFILE%\\.npmrc
msvs_version=2017
```

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

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

```powershell: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](https://ftp.gnome.org/pub/GNOME/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip)
* WIN64 - [gtk+-bundle_2.22.1-20101229_win64.zip | download.gnome.org](https://ftp.gnome.org/pub/GNOME/binaries/win64/gtk+/2.22/gtk+-bundle_2.22.1-20101229_win64.zip)

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

こんな感じ

```console: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用のいづれか

https://sourceforge.net/projects/libjpeg-turbo/files/

* WIN32 - [libjpeg-turbo-2.0.0-vc.exe | sourceforge.net](https://sourceforge.net/projects/libjpeg-turbo/files/2.0.0/libjpeg-turbo-2.0.0-vc.exe/download)
* WIN64 - [libjpeg-turbo-2.0.0-vc64.exe | sourceforge.net](https://sourceforge.net/projects/libjpeg-turbo/files/2.0.0/libjpeg-turbo-2.0.0-vc64.exe/download)

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

`.exe`をWクリック

* WIN32 - `C:\libjpeg-turbo`
* WIN64 - `C:\libjpeg-turbo64`

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

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

```bash:bash
cd <project directory>
```

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

```bash: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`のヘッダーをインストールする

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

```terminal
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

https://stackoverflow.com/questions/42722457/how-to-prevent-node-gyp-from-downloading-node-headers-tar-gz-and-node-lib-from-i

* DLリンク

https://nodejs.org/download/release/v18.17.1/

* [node-v18.17.1-headers.tar.gz | nodejs.org](https://nodejs.org/download/release/v18.17.1/node-v18.17.1-headers.tar.gz)


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

```bash:bash
cd node_modules/canvas
```

### 3.3.3. `node-gyp`でリビルド

```bash: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:bash
$ fnm use 18

$ fnm current
v18.17.1

$ node -v > .node-version
```
了