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

Posted 2023-02-22

【中文标题】如何在 Windows 上将 docker nginx 与 express 和 react 应用程序连接起来

【英文标题】：How to conect docker nginx with express and react app on windows

【发布时间】：2020-05-15 18:58:34

【问题描述】：

我找到了很多关于这些的教程，但没有一个将它们中的 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

【参考方案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

【讨论】：

感谢您的回答。我有一些疑问，我可能需要一段时间才能把我认为的所有事情都做对。所以首先我必须找到一些关于 docker compose 文件的教程，对吗？第一个 dockerfile 是否像 dockerfile.yml 一样终止，或者我只是创建一个“文件”名称 Dockerfile 并粘贴该文本？ Webstorm 在终端中右键打开，那我应该如何运行这些命令？让我们看看我是否理解正确，我打开 Windows Power shell 更改目录到我的应用程序并输入“docker-compose up --build”是吗？这会创建文件夹结构吗？

不，它不会创建文件夹结构。这是构建和运行 Dockerfiles 。 docker-compose 文件很有用，因为有了它，您就可以为要运行的所有服务提供一个入口点。你可以很容易地阅读文档。这是我的代码库，我从中获取了代码并对其进行了轻微修改。您可以克隆它并从那里开始。有点不同，因为有Dockerfile.devs 用于开发阶段，而常规Dockerfiles 用于假定部署；）这里是github.com/ConstantineGochev/react-docker-multi