如何在 Windows 上将 docker nginx 与 express 和 react 应用程序连接起来

Question

我找到了很多关于这些的教程，但没有一个将其中的 3 个统一起来。我想学习如何做到这一点，因为我需要开始部署我制作的 React 网站，我想将它们部署在我的域中并托管在我的计算机上以进行测试。

我应该按照什么顺序学习存档？你推荐什么教程？我找到了一些关于它们的教程，但对要学习的一连串东西感到非常困惑。我让 Windows Power Shell 正常工作，做了一些节点教程，一些快速教程，并设法在 docker 上运行 nginx 但无法完成。

我对我的 css、js 和 react 感觉还行，做了一个小游戏，让一些东西可以工作，做了一些练习，但现在我有点卡住了。我非常感谢您提供的任何帮助或建议，以继续我的学习之路。

下面是我观看的视频教程：CSS https://www.youtube.com/watch?v=1Rs2ND1ryYc React https://www.youtube.com/watch?v=DLX62G4lc44

Answer 1

您可以使用docker-compose.yml文件来定义和运行多容器 Docker 应用程序。然后使用单个命令，您就可以构建和启动所有服务。您可以在Docker. Docker 为您的应用程序创建瘦虚拟环境。这是您想要的示例。这是文件夹结构：

|--client  
     |--Dockerfile
     |--components
     |--index.js
|--server
     |--Dockerfile
     |--index.js
|--nginx
     |-- Dockerfile
     |--default.conf
|--docker.compose.yml

Dockerfile 对于反应客户端：

FROM node:alpine as builder
WORKDIR '/app'
COPY ./package.json . /
RUN npm install
COPY . .
RUN npm run build

Dockerfile 对于 Nginx

FROM nginx 
COPY ./default.conf /etc/nginx/conf.d/default.conf

default.conf 对于 Nginx

upstream client {
    server client:3000;
}

upstream api {
    server api:5000;
}

server {
    listen 80;

    location / {
        proxy_pass  http://client;
    }
    location /sockjs-node {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass  http://api;
    }
}

Dockerfile 用于节点/快速服务器

FROM node:alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
CMD [ "npm", "run", "start" ]

docker-compose.yml文件。您可以使用要用于 api 的任何数据库切换 mongo。您可以docker-compose up --build从主项目目录（docker-compose文件所在的位置）构建和运行 evrything

version: '3'
services:
  nginx:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - '80:80'
  mongo:
    container_name: mongo
    image: mongo
    ports:
      - '27017:27017'
  api:
    restart: always  
    build:
      dockerfile: Dockerfile
      context: ./server
    volumes: 
      - /app/node_modules
      - ./server:/app
    links:
      - mongo
    ports:
      - '5000:5000'
    depends_on:
      - mongo
  client:
    build:
      dockerfile: Dockerfile
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
    links:
      - api