この記事の最終更新日: 2023年4月16日
Estrutura de diretório no início
.
└ 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"Criação de um projeto React+TypeScript
No diretório docker, execute o seguinte comando:
$ docker-compose build
$ docker-compose run --rm app npm create vite@latest .Pressione ‘y’ para selecionar as configurações de idioma e construção, e o projeto será criado.
(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 %No contêiner, execute npm install
Inicie o contêiner Docker e entre nele.
Em seguida, execute npm install, npm run build e npm run dev.
$ docker-compose up -d
$ docker exec -it front sh
$ npm install
$ npm run build
$ npm run devO projeto React + TypeScript + Vite está concluído.
Introdução do StoryBook
Em seguida, vamos introduzir o StoryBook.
$ docker-compose up -d
$ docker exec -it front shApós iniciar o contêiner, insira o comando de execução.
$ npx sb@latest init
Need to install the following packages:
sb@7.0.2
Ok to proceed? (y)
$ npm run storybookSe você ver uma saída como esta, execute npm run storybook.
(Observe que após inserir o comando npx sb@latest init, levará algum tempo, então aguarde um momento).
Quando a construção for concluída com npm run storybook, você verá uma saída como esta.
Confirmação da tela
Com isso, a criação do projeto está concluída.
Se você tiver alguma dúvida, sinta-se à vontade para deixar um comentário na seção de comentários.
大阪のエンジニアが書いているブログ。
コメント