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

【问题标题】：How to build and deploy ReactJs using docker-compose如何使用 docker-compose 构建和部署 ReactJs
【发布时间】：2019-04-01 13:02:28
【问题描述】：

每次对应用程序进行新更改时，我都会尝试这样做，我不需要构建应用程序，然后运行 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。

【问题讨论】：

如果您处于开发模式，则不会使用npm run build，而是使用npm run start 及其内置服务器。然后，对于生产部署，您应该使用多阶段 Docker 文件和 nginx。
@ShawnC。这是用于生产的

标签： reactjs docker nginx deployment docker-compose

【解决方案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

还有你的 docker-compose：

version: '3.3'

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

我从我的一个项目中改编了这个，所以如果您有任何问题，请告诉我，我会检查它们。

希望对你有帮助。

【讨论】：