はじめに
devcontainerでViteによるシンプルなJavaScript開発環境をセットアップします
devcontainer環境は過去記事のリポジトリを使用します
単純にviteを実行しているだけですが、devcontainerからだと pnpm dev した時にブラウザで動作結果が見えずにハマった為（devcontainer内で実行しても初期設定ではホストマシンからアクセスできない）、それの対策を記載しています
使用方法
1. 前提条件
下記環境で作成/動作確認しています
- Mac
- Colima
- Visual Studio Code
- VSCode Dev Containers 拡張機能 or Remote Development
- Zsh
(Windows/WSL2 での動作確認はしていませんが Windows 環境でも Docker 実行及び WSL2 から実行すれば動作すると思います)
2.devcontainer セットアップ手順
リポジトリをクローンしてdevcontainer環境を構築する
cd ${your project}
git clone https://github.com/satoppe343/devcontainer-starter.git .
下記操作を行いクローンしたリポジトリを Dev Container で開く
1. VS Codeでプロジェクトフォルダを開く
2. F1キー（またはCtrl+Shift+P / Cmd+Shift+P）を押してコマンドパレットを開く
3. [開発コンテナー:コンテナーでフォルダーを開く]を選択
4. クローンしたディレクトリを選択
postCreate.sh にコンテナ作成後に実行したいコマンド（インストールしたいモジュール）を追記する（ここに記述しないとコンテナが再作成されるタイミングで設定が消えてしまう為）
.devcontainer/postCreate.sh
# pnpm install
sudo npm install -g npm
sudo npm install -g pnpm
# install packages
cd my-app
pnpm install
下記操作でコンテナをリビルドする
1. VS Codeでプロジェクトフォルダを開く
2. F1キー（またはCtrl+Shift+P / Cmd+Shift+P）を押してコマンドパレットを開く
3. [開発コンテナー:コンテナーのリビルド]を選択
VSCodeのターミナルメニューから新しいターミナルを起動してviteのインストールを行います
// 動作確認
$ pwd
/workspace/root
$ node -v
$ pnpm -v
下記コマンドを実行してviteをインストール(下記選択肢は使う環境にあったものを選択)
$ pnpm create vite
◆ Project name:
│ my-app
Select a framework:
│ ● Vanilla
Select a variant:
│ ○ TypeScript
│ ● JavaScript
◆ Use rolldown-vite (Experimental)?:
│ ○ Yes
│ ● No
Install with pnpm and start now?
│ ○ Yes / ● No
その後、pnpm dev してブラウザから確認しようとしても、空のHTMLが表示されてしまうだけなので、下記により ホストPC側からアクセス可能に設定変更する
my-app/package.json
"dev": "vite --host", // "--host"の記述を追加
その後、pnpm install して pnpm dev で起動すればブラウザから index.html の内容(Hello Vite画面)が表示されるようになります
$ cd my-app
$ pnpm install
$ pnpm dev