ChromeOS FlexのLinux環境でSVGエディターWEBアプリケーションのセットアップとビルド

この記事は初心者向けです
エンジニア向けの記事ではありませんのでご注意ください

0.はじめに

私は、非エンジニアで初心者です。

ChromeOS Flexで以下のSVGエディターWEBアプリケーションを試そうとして手間取ったので備忘録を残します。

こんな感じの画面のSVGエディターです。

以下コマンドが並ぶだけです

1.セットアップとビルド手順

1-1.ChromeOS FlexのLinux環境（Debian11）を最新にする

Debian11ベースですがLXCコンテナ環境なので、素のDebian11とは異なるらしいです。

sudo apt update
sudo apt upgrade -y

1-2.node.jsとnpmインストール

node.jsは、元々はインストールされてませんでした。

sudo apt install nodejs
node -v
sudo apt install npm
npm -v

1-3.node.jsとnpmを最新安定版バージョンにする

aptでインストールされるnode.jsはかなりバージョンが低いので最新安定板にバージョンアップします。

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
sudo npm install -g npm@latest
npm -v

1-4.SVG-editのインストール先のフォルダを作って移動

フォルダーは、事前にChromeOS標準のファイルアプリで作りました

cd svged

1-5.SVG-editのリポジトリクローン

git clone https://github.com/SVG-Edit/svgedit.git

1-6.svged配下のSVG-editのクローンしたディレクトリに移動

cd svgedit

1-7.SVG-editのインストール

npm install

1-8.SVG-editの説明にある通りのコマンドを実行

npm run build --workspace @svgedit/svgcanvas
npm run start

1-9."localhost:8000/src/editor/index.html"にてブラウザーで動作確認

1-10.ロリポで動かすためにビルド

ロリポップのレンタル共有サーバーでは、node.jsが動かないので事前にローカルでビルドが必要です。

npm run build

1-11.svgedit 配下にdistフォルダーができるのでその中身をロリポへアップロード

FTPソフトが必要です。（LinuxならFileZillaなど）

2.終わりに

書いてみると簡単だけど、悩んだので一応書きました。

以　上