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

Question

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

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

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

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

Answer 1

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

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

Dockerfile 用于 react 客户端：

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