This is a note on Docker image creation and container operation, which requires some tricks. The following are the articles on Vite introduced so far.
Creating a Dockerfile
We followed the usual procedure to create a Docker file as follows
Dockerfile
FROM node:20-bullseye
WORKDIR /usr/app
COPY . /usr/app
RUN cd /usr/app \
&& npm install \
&& npm run build
CMD ["npm","run","dev"]Based on this, create an image and run the following command
PowerShell
docker run -p 5173:5173 -d sitecoredemoutilityIf you try to access the site with a browser in this situation, you will see an error screen as shown below.
Modify vite.config.ts
Checking the log, the following information is displayed.
Plain Text
> getscreens@0.0.0 dev
> vite
VITE v4.5.0 ready in 171 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to exposeThe --host setting needs to be changed. This time, we rewrote vite.config.ts to work as --host by default, adding the server part as follows.
TypeScript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: true,
},
plugins: [react()],
});Once again, the image was built, the container was moved and accessed, and it worked successfully.
Summary
In this article, I have presented some tips for running vite with docker. You can easily find several blogs on this subject if you look up the following, but I left it on my blog as a note.