搭建React * Vite * Typescript * Docker环境【React * 使用Firebase进行个人开发 第一部分】

2 年 ago
文, 翔
2 minutes

我好久没有想出个人开发的想法了，所以我计划使用React * Firebase来个人开发Web服务。我打算慢慢来，如果可以的话，请参考一下。本次的Part 1我将介绍使用React * Vite * Typescript * Docker来进行环境搭建的步骤。

【开发环境】

    • Windows 11 home

 

    • WSL2

 

    • Ubuntu22.04

 

    • Node.js 18.17.0

 

    Docker 20.10.23

使用 React、Vite 和 Typescript 创建项目。

使用npm create vite，快速创建React项目。

npm create vite@latest <project-name>

回答问题的方式如下

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

切换到目录并执行npm install & npm run dev来启动项目。

cd <project-name>
npm i
npm run dev
スクリーンショット (267).png

用Docker容器启动React应用

接下来，我们将使用Docker容器启动React。在这个项目中，除了前端容器，我们还将创建Firebase模拟器容器，并使用Docker Compose实现一条命令即可启动开发环境。

创建./docker/frontend/Dockerfile。

FROM node:18.17.0-slim

ENV TZ Asia/Tokyo

WORKDIR /app

RUN apt-get update \
  && apt-get install -y

创建一个docker-compose.yml文件。

version: "3.9"

services:
  frontend:
    container_name: frontend
    build: ./docker/frontend
    volumes:
      - .:/app:cached
    ports:
      - "5173:5173"
      - "24678:24678"
    tty: true
    command: sh -c "npm install && npm run dev"

将端口号24678分配给无限刷新防护措施。
参考链接：https://qiita.com/kiyoshiro/items/9dcba9af830f7ca51323

我会在package.json中添加脚本以用于启动和停止容器。

{
  "scripts": {
    "dev": "vite --host", <-- --hostを追加
    "docker:start": "docker compose up -d", <-- 追加
    "docker:stop": "docker compose down" <-- 追加
  },
}

—host选项用于在访问本地服务器时使用IP地址。参考：https://qiita.com/Junpei_Takagi/items/3615505dcabd2e97f3e1

我将构建并运行容器。

npm run docker:start

请检查日志，如果情况如下所示则表示正常。请访问localhost:5173并再次确认React应用程序。

docker compose logs -f frontend

frontend  |   VITE v4.4.8  ready in 190 ms
frontend  | 
frontend  |   ➜  Local:   http://localhost:5173/
frontend  |   ➜  Network: http://172.26.0.2:5173/
frontend  |   ➜  press h to show help

结束

请参照以下的package.json文件来安装，如果您希望版本等保持一致，请查看此部分。

{
  "name": "******",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "docker:start": "docker compose up -d",
    "docker:stop": "docker compose down"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

下一次

 

bannerAds