Dockerize React应用程序与docker-compose

时间:2018-09-11 15:11:48

标签: reactjs docker nginx docker-compose

我有一个包含我的项目容器的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

因为我已经安装了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;
        }
    }

此外,我将端口3000添加到了nginx并在.yml文件中添加了react app的服务

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服务器错误。反应容器也会重新启动并返回代码0。

使其正常工作的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

我通过更改许多内容来修复它...首先,我在创建图像之前运行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;
    }
}