如何为ReactJS创建停靠开发环境

我已经通过includes live服务器开发了一个react应用程序并进行了部署。作为代理服务器，我使用的是nginx，它还为后端和前端提供一些静态和媒体文件

特别是为了测试静态和媒体文件的服务，我希望有一个固定的本地测试环境

这是我的问题： 在我的测试环境中，我不希望每次更改代码时都创建一个新的构建（

npm run build

-用于create react app）。理想情况下，我将有能力通过绑定挂载热重新加载

---

这意味着我必须通过nginx为开发服务器提供服务。有可能吗？我已经为这个问题苦思冥想了好几天，寻找一种传统的方法来解决它。

将开发服务器与HMR对接不是一件小事

即使是预配置的项目（HMR和docker就绪），如果没有额外的调整，也可能无法在beggining工作。F.e.HMR需要

localhost

路径，而您可以让应用程序在另一个IP/端口上工作（CORS问题）。有些调整可能是在构建过程中动态地对包进行硬修补

在尝试设置dream配置之前，请尝试运行ready project。您始终可以为不同的部件（在不同的端口上）运行不同的服务器

首先，它包含node.js api/后端部分，但可以与外部部分（可配置）一起使用

---

您可以在Docker Hub上搜索其他react HMR就绪解决方案。尝试，获得灵感和知识。。。玩得开心。

其实还不错，只需使用如下nginx配置：

events {}

# assuming you want to serve your app on localhost:8080
# and assuming your webpack dev server runs on port 3000
http {
    include /etc/nginx/mime.types;
    server {
        # assuming you want to serve the app on localhost:8080
        listen 8080;
        client_max_body_size 50m;

        # webpack dev server
        location / {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            # use your port for your webpack dev server
            proxy_pass http://host.docker.internal:3000/;
        }

        # this is specifically needed for hot reload with webpack dev server
        location /sockjs-node {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;

            # 'host.docker.internal' is a docker dns record for your host machine's localhost,
            # and '3000' should be the port of your webpack dev server
            proxy_pass http://host.docker.internal:3000;

            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
   }

    access_log /etc/nginx/access.log;
    error_log /etc/nginx/error.log debug;
}

并使用如下所示的

/nginx.sh

运行nginx：

events {}

# assuming you want to serve your app on localhost:8080
# and assuming your webpack dev server runs on port 3000
http {
    include /etc/nginx/mime.types;
    server {
        # assuming you want to serve the app on localhost:8080
        listen 8080;
        client_max_body_size 50m;

        # webpack dev server
        location / {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            # use your port for your webpack dev server
            proxy_pass http://host.docker.internal:3000/;
        }

        # this is specifically needed for hot reload with webpack dev server
        location /sockjs-node {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;

            # 'host.docker.internal' is a docker dns record for your host machine's localhost,
            # and '3000' should be the port of your webpack dev server
            proxy_pass http://host.docker.internal:3000;

            proxy_redirect off;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
   }

    access_log /etc/nginx/access.log;
    error_log /etc/nginx/error.log debug;
}

#/usr/bin/env bash
#应用程序的生成目录的路径
APP_BUILD_DIR=/path/to/my APP/BUILD
#包含nginx配置的目录的路径
NGINX_CONF_DIR=$（pwd）
#nginx conf文件的名称，相对于nginx_conf_DIR
NGINX_CONF_FILE=NGINX.CONF
#nginx为您的应用程序提供服务的端口
端口=8080
#docker运行文档：https://docs.docker.com/engine/reference/run/
#这将运行名为“nginx”的nginx容器作为守护进程，
#并将NGINX_CONF_DIR装入容器中
docker run-d--名称nginx\
-v=$NGINX\u CONF\u DIR:/etc/NGINX\
-v=$APP\u BUILD\u DIR:/opt/base/my-APP\
-p=$PORT:$PORT nginx\
nginx-c/etc/nginx/$nginx_CONF_FILE-g“守护进程关闭”

还有一个

mime.types

文件，它位于该目录中，看起来像

因此，您的目录结构应该如下所示：

dir/
-- nginx.sh
-- nginx.conf
-- mime.types
-- ...

我假设你是在你的机器上运行你的网页开发服务器，而不是在docker容器中？根据我的经验，我真诚地建议你这样做

npm

（或

Thread

）的工作做得非常好，以至于我没有必要在本地容器中运行我的React应用程序，即使我通过

nginx

容器提供它们

额外好处：如果您想运行相同的应用程序，但要提供静态捆绑包而不是webpack dev服务器，这里有一个nginx配置：

events {}

http {
    include /etc/nginx/mime.types;
    server {
        # assuming you want to serve the app on localhost:8080
        listen 8080;
        client_max_body_size 50m;

        location / {
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Host $host;
            root /opt/base/my-app;
            try_files $uri /index.html;
        }

        # matches things like http://localhost:8080/build/static/js/2.d63c51de.chunk.js
        location /build/static/ {
            alias /opt/base/my-app/static/;
            try_files $uri $uri/;
        }
   }

    access_log /etc/nginx/access.log;
    error_log /etc/nginx/error.log debug;
}

---

参考：

要从本地文件系统热部署到docker，请指定以下选项。以下是使用powershell在windows 10上运行的docker：

Set the environment variable
-e CHOKIDAR_USEPOLLING=true

Mount the volume of local machine into work directory in the container
-v ${pwd}:/<workdir in container>
 
E.g. : docker run -it --rm -p 5000:3000 -v /app/node_modules -v ${pwd}:/app -e CHOKIDAR_USEPOLLING=true <image id>

设置环境变量
-e CHOKIDAR_USEPOLLING=true
将本地计算机的卷装入容器中的工作目录
-v${pwd}：/
例如：docker run-it-rm-p5000:3000-v/app/node_modules-v${pwd}:/app-E CHOKIDAR_USEPOLLING=true

嘿，非常感谢你抽出时间！我会测试这个，并接受答案，只要我有它的工作：）谢谢。现在，通过在容器中运行dev服务器，我有了一个可行的解决方案。这里的优点是，我可以使用docker dns并将开发服务器定义为nginx中的上游服务器。不在容器中运行节点服务器有什么好处吗？我喜欢在容器外部本地构建前端。这似乎更容易。对于需要与其他服务（如数据库）对话的节点服务器（webpack dev server除外），我可以看到使用docker运行该服务器的好处，因为它具有网络优势。docker的魅力在于它真的取决于你。但是你会注意到那行写着

proxy\u passhttp://host.docker.internal:3000;？该
host.docker.internal
位是真实
localhost
的docker dns记录。我希望这能为你澄清一些事情。