コンテンツへスキップ

Rust/WASM/JavaScript/Viteを使ったプロジェクトの作成と管理 4/4 ローカルサーバーとgitプロジェクト化編

プロジェクト用のローカルサーバーを起動させる

Rust/wasm/Viteのプロジェクトの４回目の記事になります。今回はプロジェクト内でローカルサーバーを起動するためのスクリプトの話です。これまでは、必要な言語ツールの環境セットアップ（環境変数とrust用のwasmに必要なものと、javascriptで必要なもの）、プロジェクト生成（rustとJavaScriptの双方）とディレクトリ構造、プロジェクトビルドと書いてきて、３つのスクリプトを用意しました。今回はビルド後の利用で必要なローカルサーバーについてですね。これで開発に必要なスクリプト４つ揃えることになります。

ローカルサーバー起動用スクリプト wasm-dev について

では早速スクリプトを下に示します。

#!/bin/bash

name=$1        # 第一引数: プロジェクト名
port=${2:-5173} # 第二引数: ポート番号（デフォルト5173）
               #  0 ならば空きポートを自動的に割り当てる

if [ -z "$name" ]; then
  echo "usage: wasm-dev <project-name> [port]"
  exit 1
fi

BASE_DIR="${WASM_BASE:-$HOME/projects/wasm}"

cd "$BASE_DIR/$name/${name}_js" || exit

npm run dev -- --port "$port"Code language: Bash (bash)

このスクリプトを以下のところにコピペしてください。

$ cd ~/bin
$ cat > wasm-dev
...
$ chmod +x wasm-dev

基本的にはこれで完了です。cat > wasm-devの後にペーストして ctrl-dをすればよいです。~/binは１つ目の記事に詳細を書いていますが、環境変数$PATHに追加され、環境変数$WASM_BASEが含まれていることが前提です。chmod +xはこれまでの記事は３桁の数字で行っていましたが、実行を与えるだけならばこのように+xでもできます。

wasm-dev の使い方

基本的に内部で既にインストールされてるviteが自動的に起動しますが、Viteのデフォルトポートは 5173に割り当てられています。でも、他のポートに割り当てたいときは wasm-dev <project-name> 5172 などして別のポートに割り当てることができます。また、wasm-dev <project-name> 0とするとViteの方で空きポートを自動的に探して割り当てます。これは同じPCで２つのプロジェクトを同時に扱うときなどには便利です。起動させると

$ wasm-dev hello

> hello_js@0.0.0 dev
> vite --port 5173


  VITE v7.3.1  ready in 129 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: PHP (php)

といったような表示がでます。ここではhelloプロジェクトを示しています。指示に従って localhost:5173でブラウザからURLを打ち込めば中身が見えます。このスクリプトでは --hostには対応させておりません。

ワークフローのまとめ

ここまで来る流れは、次のとおりです。

$ wasm-setup
$ echo 'export PATH="$HOME/bin:$PATH"' >> ~/.bashrc # あるいは ~/.zshrc 環境変数$PATHに~/binがないときに必要
$ source ~/.bashrc #あるいは ~/.zshrc
$ wasm-project hello
いろいろやって
$ wasm-build hello
$ wasm-dev helloCode language: PHP (php)

という作業の流れになります。ただし、この時点ではデフォルトのままなのでWASMから何も表示が送られません。今の状態は、まだ『工場（環境）』ができただけで、中身の『製品（コード）』が繋がっていない状態なのです。rustのプロジェクトhello_rsの修正が必要なのです。それは$WASM_BASE/hello/hello_rs/Cargo.tomlを修正しなければいけないのでビルドは完了しません。このへんは次の記事に載せます。

おまけ git管理用のスクリプト

これはおまけです。git管理するときにignoreリスト作っておかないと管理が面倒ですからね。wasm-gitという名前にしてあります。これでgitの初期化とプロジェクトルートの.gitignoreの作成が完了です。

#!/usr/bin/bash

if [ -z "$1" ]; then
    echo "Usage: wasm_git <project_name>"
    exit 1
fi

PROJECT_NAME=$1
pushd .
git init "$WASM_BASE/$PROJECT_NAME"
cd "$WASM_BASE/$PROJECT_NAME"

cat << EOF > .gitignore
${PROJECT_NAME}_rs/target/
${PROJECT_NAME}_rs/pkg/
${PROJECT_NAME}_js/node_modules/
${PROJECT_NAME}_js/dist/
${PROJECT_NAME}_js/src/wasm/pkg/
EOF
popd
echo "Initialized git and created .gitignore for $PROJECT_NAME"Code language: Bash (bash)

として使い方はhelloというプロジェクトなら以下のような感じになります。

$ bash wasm-git hello
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint:   git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint:   git branch -m <name>
Initialized empty Git repository in /home/yasuto/projects/wasm/hello/.git/
Initialized git and created .gitignore for helloCode language: JavaScript (javascript)

これで環境の準備が整いました。

最終更新: 2026.01.16
タグ: