Zenn
⚡

Bun + Vite + GO言語で高速な開発コンテナを構築

2024/07/20に公開
Go
Vite
Bun
tech

初めに

.devcontainerを使ってGOとBunが入った開発コンテナを作成しようと思います。
Bunはまだ知名度は低いと思います。
公式ドキュメント
私自身実務で触るまではnode.jsしか触ったことがありませんでした。
実際に触れてみるとわかりますが、ものすごく速くてストレスフリーな環境を作れます!

今回はBunのみではなく、バックエンドでGO言語を使いたいので
.devcontainerにGoとBunを導入しようと思います。

.devcontainerの用意

  • .devcontainerディレクトリを作成する
    普段の手順と同じで.devcontainer内にdevcontainer.jsonとDockerfileを作成してください。

  • Dockerfileの内容を記述

FROM mcr.microsoft.com/vscode/devcontainers/base:ubuntu-20.04

RUN set -x \
    && ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && echo 'Asia/Tokyo' >/etc/timezone

ARG USERNAME=vscode
RUN apt-get install -y --no-install-recommends \
    sudo

# bun
ARG BUN_VERSION=1.1.2
RUN set -x \
    && curl -fsSL https://bun.sh/install | sudo -u ${USERNAME} bash -s "bun-v${BUN_VERSION}"

# go
ARG GO_VERSION=1.22.5
RUN set -x && curl -fsSL "https://golang.org/dl/go${GO_VERSION}.linux-amd64.tar.gz" | tar -xz -C /usr/local
ENV PATH $PATH:/usr/local/go/bin

USER ${USERNAME}
  • devcontainer.jsonの内容を記述
    ※フォーマッタにBiome.jsを指定していますが、ここは自由に導入したい拡張機能を入れてください
{
	"name": "Ubuntu",
	"build": {
		"dockerfile": "Dockerfile"
	},
	"remoteUser": "vscode",
	"updateRemoteUserUID": true,
	"customizations": {
		"vscode": {
			"extensions": [
				"golang.go",
				"biomejs.biome"
			]
		}
	},
	"runArgs": ["--network", "host"]// 必要に応じて変更させる
}

以上で準備は完了です!
あとはコマンドパレットから開発コンテナを開いてください
コンテナが開いたら

bun -v

go version

でGoとbunが導入されていることが確認できると思います。

Reactのプロジェクトを始める

次にbunでフロント側を作るためにVite x React x Typescriptのプロジェクトを始めます。
ルートディレクトリで下記コードを入力して作成してください。
(プロジェクト名は自由に選択してください。今回はFrontAppとします)

bun create vite@latest FrontApp --template react-ts

テンプレートが作成されたらそのディレクトリに入ってbun installを実行してください
例

cd FrontApp

bun install

完了したら下記コードを入力してサーバーが起動していることを確認してください!

bun run dev

お馴染みの画面が表示されていたら完了です!

最後に

次回はGoサーバーを立てて、ReactとAPIを使って連携させる簡単なアプリを作ろうと思います。
最終的にDockerコンテナのみで手軽に起動できるようにしようと思っています。
ありがとうございました!

Discussion