Vite で作った React のアプリを Docker コンテナで動かす : Haramizu.com

Language:

Vite で作った React のアプリを Docker コンテナで動かす

Docker

公開日: 2023-11-06

これまで何度か Vite でのプロジェクトの作成に関して紹介をしてきましたが、Docker のイメージ作成、コンテナの動作という点ではコツが必要なので、そのメモとなります。これまで紹介した Vite に関する記事は以下の通りです。

Vite について

Dockerfile の作成

いつもの手順で Docker ファイルを以下のように作成しました。

Dockerfile

FROM node:20-bullseye

WORKDIR /usr/app
COPY . /usr/app

RUN cd /usr/app \
    && npm install \
    && npm run build

CMD ["npm","run","dev"]

これを元に、イメージを作成して以下のコマンドで実行します。

PowerShell

docker run -p 5173:5173 -d sitecoredemoutility

この状況でブラウザでアクセスをしても、以下のようにエラー画面が表示されます。

vite.config.ts を変更する

ログを確認すると、以下の情報が表示されています。

Plain Text

> getscreens@0.0.0 dev
> vite


  VITE v4.5.0  ready in 171 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

この --host に関して、設定を変更する必要があります。今回は、vite.config.ts にデフォルトで --host として動作するように、以下のように server の部分を追加する形で書き換えました。

TypeScript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: true,
  },
  plugins: [react()],
});

改めてイメージをビルド、コンテナを動かしてアクセスをすると、無事動作しました。

まとめ

今回は docker で vite を動かすための tips を紹介しました。この件は調べると以下のようにいくつかブログがありますので、すぐに見つけることができますが、メモとしてブログに残しておきました。