Reactjs 使用docker compose对React应用程序进行Dockerize

我有一个docker compose文件，其中包含我的项目容器

version: '3'
services:
   nginx:
      image: nginx
      ports:
          - "80:80"
          - "8080:8080"
      restart: always
      volumes:
          - ./default.conf:/etc/nginx/conf.d/default.conf:ro
      networks:
          - cw_network
      container_name: cw_proxy
      depends_on:
          - "db"
          - "api"
          - "web"
          - "vault"
   web:
      image: cw_web
      networks:
          - cw_network
      restart: always
      expose:
           - "9000"
      volumes:
          - ./default.conf:/etc/nginx/conf.d/default.conf:ro
          - ~/cw-front/:/var/www/html
          - ~/php.ini:/usr/local/etc/php/php.ini
      container_name: cw_web
   vault:
      image: cw_vault
      networks:
          - cw_network
      restart: always
      expose:
           - "9000"
      volumes:
          - ./default.conf:/etc/nginx/conf.d/default.conf:ro
          - ~/cw-vault/:/var/www/html
          - ~/php.ini:/usr/local/etc/php/php.ini
      container_name: cw_vault
      depends_on:
          - "api"
   db:
      image: postgres
      ports:
         - 5432:5432
      environment:
         POSTGRES_USER: 'user'
         POSTGRES_PASSWORD: 'pass'
      volumes:
         - cw_sql:/var/lib/postgresql/data
      networks:
         - cw_network
      container_name: cw_sql
   api:
      image: cw_api
      container_name: cw_api
      restart: always
      volumes:
        - ~/cw_api:/usr/src/cw_api
      ports:
       - "3001:3001"
      depends_on:
        - "db"
      networks:
        - cw_network
      entrypoint: ./wait-for-database.sh db 5432
      command: nodemon bin/www.js

volumes:
  cw_sql:
    external:
      name: cw_sql

networks:
  cw_network:
    external:
      name: cw_network

这是nginx运行web和vault的

default.conf

client_max_body_size 100m;

server {
    listen  80;
    server_name  localhost;
    root /var/www/html;

    index index.html index.htm index.php;

    # Add stdout logging
    error_log /dev/stdout info;
    access_log /dev/stdout;

    location / {
        try_files $uri $uri/index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass web:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

server {
    listen  8080;
    server_name  localhost;
    root /var/www/html;

    index index.html index.htm index.php;

    # Add stdout logging
    error_log /dev/stdout info;
    access_log /dev/stdout;

    location / {
        try_files $uri $uri/index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass vault:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

假设我已经用ReactJs实现了一个SPA。我想将此应用程序添加到docker compose。所以，我做了这个Dockerfile

FROM node:9.11

# Create app directory
RUN mkdir -p /var/www/html
WORKDIR /var/www/html

# Copy all local files into the image.
COPY . .

# Install all dependencies of the current project.
COPY package.json package.json
RUN npm install
RUN npm install -g react-scripts

RUN npm run build

FROM node:9.11

MAINTAINER Vassilis Pallas <vspallas@gmail.com>

# Create app directory
RUN mkdir -p /var/www/html
WORKDIR /var/www/html

# Install all dependencies of the current project.
COPY package.json package.json
RUN npm install

# Copy all local files into the image.
COPY . .

RUN npm install -g react-scripts
RUN npm install -g serve

RUN npm run build

EXPOSE 5000

CMD serve -s build

因为我安装了

react路由器

，所以我必须将react应用程序与nginx连接起来。因此，我附加我的

default.conf

文件以接受来自端口3000的调用

    server {
        listen  3000;
        default_type application/octet-stream;
        root /var/www/html/build;

        gzip on;
        gzip_http_version 1.1;
        gzip_disable      "MSIE [1-6]\.";
        gzip_min_length   256;
        gzip_vary         on;
        gzip_proxied      expired no-cache no-store private auth;
        gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level   9;

        location / {
          try_files $uri $uri/ /index.html =404;
        }
    }

此外，我还向nginx添加了端口3000，并在

.yml

文件中为react应用程序添加了服务

admin:
      image: cw_admin
      container_name: cw_admin
      restart: always
      volumes:
        - ./default.conf:/etc/nginx/conf.d/default.conf:ro
        - ~/admin_panel:/var/www/html
      depends_on:
        - "api"
      networks:
        - cw_network

但这不起作用。实际上，nginx抛出500服务器错误。此外，react容器会重新启动自身并返回代码0

---

正确的方法是什么？

我通过改变很多东西来修复它…首先，我在创建映像之前运行

npm run build

，在映像中，我必须为我的工件提供服务。其次，

default.conf

有一些错误

Dockerfile

FROM node:9.11

# Create app directory
RUN mkdir -p /var/www/html
WORKDIR /var/www/html

# Copy all local files into the image.
COPY . .

# Install all dependencies of the current project.
COPY package.json package.json
RUN npm install
RUN npm install -g react-scripts

RUN npm run build

FROM node:9.11

MAINTAINER Vassilis Pallas <vspallas@gmail.com>

# Create app directory
RUN mkdir -p /var/www/html
WORKDIR /var/www/html

# Install all dependencies of the current project.
COPY package.json package.json
RUN npm install

# Copy all local files into the image.
COPY . .

RUN npm install -g react-scripts
RUN npm install -g serve

RUN npm run build

EXPOSE 5000

CMD serve -s build

default.conf

...
server {
    listen  5000;
    server_name  localhost;
    default_type application/octet-stream;
    root /var/www/html/build;

    gzip on;
    gzip_http_version 1.1;
    gzip_disable      "MSIE [1-6]\.";
    gzip_min_length   256;
    gzip_vary         on;
    gzip_proxied      expired no-cache no-store private auth;
    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_comp_level   9;

    location / {
      proxy_pass http://admin:5000;
      try_files $uri $uri/ /index.html;
    }
}

---

在Dockerfile中，您将复制所有文件，然后是package.json，最后是安装和构建。这当然有效，但不是最好的方法。您应该首先复制package.json，安装依赖项，然后复制应用程序，最后构建。这样，您就不会在每次更改应用程序时重新安装所有依赖项。