使用docker-compose将React应用程序容器化

Question

使用docker-compose将React应用程序容器化

3

我有一个包含项目容器的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应用程序的服务。

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。

正确的方法是什么？

- Vasileios Pallas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vasileios Pallas · 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;
    }
}