使用Docker“创建React应用程序”

liwlm1x9  于 2023-01-20  发布在  Docker
关注(0)|答案(7)|浏览(221)

我想知道是否有人有使用docker的create-react-app的经验。我可以用一个Docker文件来设置它,比如:

from node
RUN mkdir /src
WORKDIR /src
ADD package.json /src/package.json
RUN npm install
EXPOSE  3000
CMD [ "npm", "start" ]

然后使用一个docker-compose文件,如下所示:

app:
  volumes:
    - "./app:/src"
  ports:
    - "3000:3000"
    - "35729:35729"
  build: ./app

这允许我启动容器并查看应用程序,但是livereload在挂载卷中保存文件时不起作用,webpack在src目录中创建了几个.json.gzip文件。
有什么建议让它正常工作吗?

apeeds0o

apeeds0o1#

是的,正如aholbreich提到的,我会在我的机器上本地使用npm install/npm start来进行开发,只是因为它太简单了。使用docker-compose、挂载卷等也是可能的,但我认为设置起来可能有点麻烦。
对于部署,你可以很容易地使用一个Dockerfile。下面是我使用的一个Dockerfile示例:

FROM node:6.9

# Create app directory
RUN mkdir -p /src/app
WORKDIR /src/app

# to make npm test run only once non-interactively
ENV CI=true

# Install app dependencies
COPY package.json /src/app/
RUN npm install && \
    npm install -g pushstate-server

# Bundle app source
COPY . /src/app

# Build and optimize react app
RUN npm run build

EXPOSE 9000

# defined in package.json
CMD [ "npm", "run", "start:prod" ]

您需要将start:prod选项添加到您的 package.json 中:

"scripts": {
  "start": "react-scripts start",
  "start:prod": "pushstate-server build",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

您可以使用以下命令在配置项服务上运行测试:

docker run <image> npm test

没有什么可以阻止您在本地运行这个Docker容器,以确保一切按预期运行。

xpcnnkqh

xpcnnkqh2#

我最近做了一个叫hello-docker-react的小项目,它只是做了op想要做的事情。
它由docker-compose、create-react-app、yarn、一个节点图像和一个小的入口点脚本组成。
活重载工作完美,我还没有发现任何问题。
https://github.com/lopezator/hello-docker-react

x6h2sr28

x6h2sr283#

下面是有关https://mherman.org/blog/dockerizing-a-react-app/很好的指南
促进发展

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent

# start app
CMD ["npm", "start"]

用于生产

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
iugsix8n

iugsix8n4#

这并不是对作者代码的直接改进,但我能够用很少的代码获得一个开发环境--并且不直接依赖于我机器上的节点--如下所示:

停靠-编写.yml

services:
  node:
    image: node:16
    user: "node"
    command: "npm start"
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - 3000:3000

这样,您就可以避免从Dockerfile创建Docker映像。
用法一般是这样的:

  • 运行前安装依赖项:docker compose run node npm install
  • 运行开发环境:docker compose up
  • 安装新依赖项:docker compose run node npm install [package name]
  • 清理用compose run创建的docker示例:docker compose rm
rqdpfwrv

rqdpfwrv5#

在create-react-app中使用docker的时候,我发现可以通过在你的.env文件中添加CHOKIDAR_USEPOLLING=1来覆盖webpackDevServer的配置。这将使文件监视再次工作。它什至刷新主机上的浏览器页面!我唯一发现的是它不会自动打开网页。
我还可以建议将tty: true添加到服务中,以便将原来的控制台输出返回到终端中。要删除日志中的容器名称前缀,可以在运行docker-compose up -d之后运行如下命令:

docker-compose logs -f --tail=100 client | cut -f2 -d \"|\""
xa9qqrwz

xa9qqrwz6#

运行CRA 4.0和许多依赖项
.停靠忽略

.git
.gitignore
node_modules
build

Dockerfile.dev

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . .

CMD ["yarn", "start"]

docker-compose.dev.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"

Dockerfile.prod

FROM node:alpine as build

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

RUN yarn run build

FROM nginx:stable-alpine
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html

docker-compose.prod.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"

nginx.conf

server {  
  listen 80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
  }
}

要运行

docker-compose.exe -f .\docker-compose.yml up --build

docker-compose.exe -f .\docker-compose.dev.yml up --build
dwbf0jvd

dwbf0jvd7#

下面是一个简单的(纯Docker)解决方案,无需本地安装运行时(例如节点):

cd /tmp
docker run -it --rm -v "$PWD":/app -w /app node  yarn create react-app my-app
sudo chown -R $USER:root my-app/
cd my-app
nano docker-compose.yml  # see docker-compose.yml below
docker compose up -d

docker-compose.yml:

services:
      node:
        image: node:16-alpine
        environment:
          - CHOKIDAR_USEPOLLING=true
          - FAST_REFRESH=true
        working_dir: /app
        ports:
          - '3000:3000'
        command: "yarn start"
        volumes:
          - './:/app'

在浏览器中打开localhost:3000。热重新加载应该开箱即用。

相关问题