この記事の最終更新日: 2023年4月16日
![React StoryBook TypeScript](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/04/react_storybook_typescript.png?resize=1001%2C1000&ssl=1)
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@latest
docker-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 dev
El proyecto de React + TypeScript + Vite está completo.
![React Vit TypeScript](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/04/スクリーンショット-2023-04-06-11.43.12.png?resize=1024%2C519&ssl=1)
Introducción de StoryBook
A continuación, vamos a introducir StoryBook.
$ docker-compose up -d
$ docker exec -it front sh
Despué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 storybook
Si 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).
![npx sb@latest init](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/04/スクリーンショット-2023-04-05-2.49.22.png?resize=1024%2C684&ssl=1)
Cuando se complete la compilación con npm run storybook, verá una salida como esta.
![ビルド完了](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/04/スクリーンショット-2023-04-05-2.57.04.png?resize=1024%2C836&ssl=1)
Verificación de la pantalla
![](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/04/スクリーンショット-2023-04-05-2.57.44.png?resize=1024%2C525&ssl=1)
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.
![ゆるプロ日記](https://i0.wp.com/yurupro.cloud/wp-content/uploads/2023/01/12245_paint.png?resize=100%2C100&ssl=1)
大阪のエンジニアが書いているブログ。
コメント