この記事の最終更新日: 2023年4月16日
Estructura de directorios al inicio
.
└ docker
| └ Dockerfile
└ docker-compose.yml
Dockerfile
FROM node:19.8.1
WORKDIR /data/src
RUN npm install -g npm@latest && npm install -g vite@latestdocker-compose.yml
version: '3'
services:
app:
build: ./docker
container_name: front
tty: true
volumes:
- ./src:/data
ports:
- "5173:5173"
- "6006:6006"Creación de un proyecto React+TypeScript
En el directorio docker, ejecute el siguiente comando:
$ docker-compose build
$ docker-compose run --rm app npm create vite@latest .Presione ‘y’ para seleccionar la configuración de idioma y compilación, y se creará el proyecto.
(base) react-ts % docker-compose run --rm app npm create vite@latest .
[+] Running 1/1
⠿ Network ln-sb_default Created 0.1s
Need to install the following packages:
create-vite@4.2.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /data/src...
Done. Now run:
npm install
npm run dev
(base) react-ts %En el contenedor, ejecute npm install
Levante el contenedor Docker y acceda al contenedor.
Luego, ejecute npm install, npm run build y npm run dev.
$ docker-compose up -d
$ docker exec -it front sh
$ npm install
$ npm run build
$ npm run devEl proyecto de React + TypeScript + Vite está completo.
Introducción de StoryBook
A continuación, vamos a introducir StoryBook.
$ docker-compose up -d
$ docker exec -it front shDespués de iniciar el contenedor, ingrese el comando de ejecución.
$ npx sb@latest init
Need to install the following packages:
sb@7.0.2
Ok to proceed? (y)
$ npm run storybookSi ve una salida como esta, ejecute npm run storybook.
(Tenga en cuenta que después de ingresar el comando npx sb@latest init, llevará algún tiempo, así que espere un momento).
Cuando se complete la compilación con npm run storybook, verá una salida como esta.
Verificación de la pantalla
Con eso, la creación del proyecto está completa.
Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios.
大阪のエンジニアが書いているブログ。
コメント