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

Question

我有一个 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

这是 default.conf 供 nginx 运行 web 和 vault

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

因为我安装了react-router，所以我必须将我的 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。

什么是让它工作的正确方法？

Answer 1

我通过更改许多东西来修复它...首先，我在创建图像之前运行npm run build，并且在我的图像中，我必须为我的工件提供服务。其次，default.conf 有一些错误。

Dockerfile

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

docker-compose.yml

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

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;
    }
}