如何使用docker-compose构建和部署ReactJs

Question

我试图在每次对应用程序进行新的更改时都这样做，我不需要构建应用程序，然后运行docker-compose文件。我想要做的是当我在我的应用程序（ReactJs）中更改代码以便运行docker-compose文件时，那么docker-compose将使用nginx构建并运行它。

这是我的docker-compose.yml的样子：

version: '2'

services:
  nginx:
    image: 'bitnami/nginx:1.14.2'
    ports:
      - '80:8080'
    volumes:
      - ./build:/var/www/my-app
      - ./nginx.conf:/opt/bitnami/nginx/conf/nginx.conf:ro

现在有了这段代码，我需要自己运行npm run build来构建应用程序，然后运行docker-compose文件以便进行更改。

我不知道该怎么做，所以我假设我需要创建一个Dockerfile运行npm run build然后根据他们的文档调用bitmani / nginx：1.14.2：https://hub.docker.com/r/bitnami/nginx/

FROM node:8.7.0-alpine

RUN npm install

RUN npm run build

docker run --name nginx \
  -v /path/to/my_vhost.conf:/opt/bitnami/nginx/conf/vhosts/my_vhost.conf:ro \
  -v /path/to/nginx-persistence/nginx/conf/bitnami/certs:/bitnami/nginx/conf/bitnami/certs \
  bitnami/nginx:latest

并在docker-compose.yml称build .而不是image: bitnami/nginx。

Answer 1

您应该为此使用阶段构建。您的Dockerfile应如下所示：

# Stage 1 - Building image
FROM node:8.7.0-alpine as node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# Stage 2 - Running image
FROM bitnami/nginx:1.14.2

COPY --from=node /usr/src/app/build /var/www/my-app
COPY ./nginx.conf /opt/bitnami/nginx/conf/nginx.conf

而你的码头组成：

version: '3.3'

services:
  myApp:
    image: myapp:1.0
    container_name: my-app
    build: .
    ports:
      - 80:8080

我从我的一个项目中调整了这个，所以如果你有任何问题让我知道，我会检查它们。

我希望它有所帮助。