GitHub CodespacesでBun+Next.jsでアプリケーション作成
shunyaまずはGitHub Codespacesで空のプロジェクトを作成する。
shunyadindを使えるように以下コマンド実行後コンテナを再ビルド。
npx tiged microsoft/vscode-dev-containers/containers/docker-in-docker/.devcontainer ./.devcontainer
BunをダウンロードするようにDockerfileに以下追記。
# Download Bun
USER vscode
RUN curl -fsSL https://bun.sh/install | bash \
&& echo "export PATH=$PATH:$HOME/.bun/bin" >> $HOME/profile
USER root
shunyabun.shを実行したら自動的にPATHが通っているためRUNの2行目は不要。
# Download Bun
USER vscode
+RUN curl -fsSL https://bun.sh/install | bash
-RUN curl -fsSL https://bun.sh/install | bash \
- && echo "export PATH=$PATH:$HOME/.bun/bin" >> $HOME/profile
USER root
BunでNext.jsプロジェクトを作成。
公式で手順が紹介されている。
shunya見た目を整えるために一旦Daisy UIを使う。Tailwind CSSベースのコンポーネントライブラリ。
普通にインストールできた。
bun add -d daisyui@latest
shunya@tailwindcss/typographyもインストールしておく。
bun add -d @tailwindcss/typography
shunyaORMはPrismaを使うので、インストール。
bun add prisma @prisma/client
これも公式で手順が公開されている。
ちなみにbun add -d prismaだとエラーが発生した。
shunyaPrismaの初期化をするためにbunx prisma initを実行するも、何も反応しない。
どうやらbunx prismaコマンドの実行にはNode.jsが必要らしい。（公式手順の一番上に書いてる）
Note — At the moment Prisma needs Node.js to be installed to run certain generation code. Make sure Node.js is installed in the environment where you're running bunx prisma commands.
Node.jsをインストールするようにDockerfileを修正し、コンテナを再ビルド。
# ...
RUN apt-get update \
&& /bin/bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \
# Use Docker script from script library to set things up
&& /bin/bash /tmp/library-scripts/docker-in-docker-debian.sh "${ENABLE_NONROOT_DOCKER}" "${USERNAME}" "${USE_MOBY}" "${DOCKER_VERSION}" \
+ # Download Node.js
+ && apt-get install -y nodejs npm \
+ && npm install n -g \
+ && n stable \
+ && apt-get purge -y nodejs npm \
# Clean up
&& apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts/
# ...
shunyaNode.jsをインストールしたので改めてbunx prisma initを実行するも、エラー発生。
公式手順ではbunx prisma init --datasource-provider sqliteと実行しているので、--datasource-provider postgresqlを追加すると問題なく初期化出来た。（Vercelでのデプロイを考えているためPostgreSQLを利用）
bunx prisma init --datasource-provider postgresql
prisma initコマンドの引数等は以下リンク先参照。
shunya以下の記事を参考に開発用PostgreSQLサーバーを立てた。
shunyaテーブル名やカラム名をスネークケースにしたい。
Prismaで用意されている方法として、カラムには@map()、テーブルには@@map()を付けることで実際のテーブル名を変更できる。
ただ、単純に面倒なのと付け忘れが起こったりしそうなので以下の記事を参考にprisma-case-formatツールを使うことにする。
Bunでのインストールは以下の通り。
bun a -d prisma-case-format
以下、プロジェクトルート（$CODESPACE_VSCODE_FOLDER/minimal-memo）でのコマンド実行。
bun prisma-case-format --uses-next-auth -f prisma/schema.prisma
Auth.jsを利用している場合は、--uses-next-authオプションを付ける。
shunyaやっぱり認証関連はAmazon Cognitoを使うことにする。
shunya以下のようにseed.tsを作成してデータを作成しようとしたところ、データが作成されない。
import { Prisma, PrismaClient, TagType } from "@prisma/client";
const prisma = new PrismaClient();
const tweetList: Prisma.TweetCreateInput[] = [
// ...
];
const tagList: Prisma.TagCreateInput[] = [
// ...
];
async function main() {
await prisma.tweet.createMany({ data: tweetList });
await prisma.tag.createMany({ data: tagList });
}
main()
.catch((e) => {
console.error(e);
})
.finally(async () => {
await prisma.$disconnect();
});
どうやらbunを使うときはトップレベルawait構文で記述する必要があるらしい。
// ...
async function main() {
await prisma.tweet.createMany({ data: tweetList });
await prisma.tag.createMany({ data: tagList });
}
-main()
+await main()
.catch((e) => {
console.error(e);
})
.finally(async () => {
await prisma.$disconnect();
});
package.jsonには以下のように記述した。
{
// ...
"prisma": {
"seed": "bun run prisma/seed.ts"
},
// ...
}