Question

我正在运行这个项目https://github.com/postlight/headless-wp-starter。我已经能够使一切正常进行。后端工作正常，但是前端有一个错误。

在说明中说要运行yarn start来启动前端服务器，该服务器应该为next.js。现在，从技术上讲它可以正常运行，并且可以在localhost:3000上运行。但是，当我在scss中修改一个frontend/src/styles文件时，它不会在外壳中重新呈现，并且浏览器中也不会进行热重载，即使单击刷新也不会显示样式更改。但是，如果我停止使用ctrl + c进行操作，然后再次使用yarn start运行它，我的样式将显示在浏览器刷新中。

我正在Windows下的docker下运行所有程序，所以不知道这是一个限制还是一个错误。我已经在他们的github上发布了一个问题，但也认为在此处进行检查也无济于事。

我能想到的唯一共享代码是package.json，就在这里。提前谢谢。

{
    "name": "frontend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "next build",
        "start": "node server.js",
        "docker:build": "docker build -t frontend .",
        "docker:clean": "docker rm -f frontend || true",
        "docker:run": "docker run -p 3000:3000 --name frontend frontend",
        "docker:stop": "docker stop frontend",
        "docker:start": "docker start frontend && yarn run docker:logs",
        "docker:logs": "docker logs -f frontend",
        "deploy":
            "yarn run docker:build && yarn run docker:clean && yarn run docker:run"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.16.2",
        "isomorphic-unfetch": "^2.0.0",
        "next": "latest",
        "react": "^16.0.0"
    },
    "devDependencies": {
        "autoprefixer": "7.1.5",
        "babel-plugin-module-resolver": "^2.7.1",
        "babel-plugin-wrap-in-js": "^1.1.0",
        "glob": "^7.1.2",
        "node-sass": "^4.4.0",
        "normalize.css": "^7.0.0",
        "postcss-easy-import": "^3.0.0",
        "postcss-loader": "^2.0.7",
        "raw-loader": "^0.5.1",
        "react-dom": "^16.2.0",
        "sass-loader": "^6.0.6",
        "webpack": "^3.10.0"
    }
}

更新：由于似乎热重装是Windows的问题，所以我的主要问题是是否有一种方法可以运行不热重装的任务，而我只能刷新浏览器靠我自己，否则我将无法在Windows上进行开发，而无需停止并重新启动每一次更改的服务，这将是无能为力的事情。

Answer 1

值得尝试的是不使用docker容器内部的前端堆栈（nodejs，yarn等）。请按照下列步骤操作：

后端服务

在3000文件中禁用端口docker-compose.yml，您可以删除- "3000:3000"行，也可以更改它。因为这   该端口将由您在Docker外部运行的yarn使用   容器。如果未更改或删除，则导致端口冲突。

从项目的根运行：docker-compose up -d以启动docker服务，

使用3000确认端口docker ps空闲，

将bash输入docker容器docker exec -it wp-headless /bin/bash，然后运行yarn install。仅首先运行此步骤一次   设定。实际上，此处的命令yarn install与   反应前端。它只是为wordpress和后端进行设置   依赖性。所有安装完成后，退出容器。

前端服务

您应该已经在计算机中安装了所有必需的前端工具（nodejs，yarn等）。

将工作目录更改为前端：cd frontend，

安装前端程序包依赖项：yarn install，

启动前端开发服务：yarn start，

现在，您的前端工作流堆栈将正常运行（没有docker）。请记住，您现在使用的yarn在外部   docker容器和完全分开的东西。

希望有帮助。

Answer 2

涉及两件事-Web服务器何时反映来自更新后的CSS的更改（以便浏览器可以使用），其次是浏览器重新加载页面。

yarn start

启动Web服务器，但是可能没有任何内容告诉Web服务器重新加载修改的文件。这可能就是为什么您需要重新发出“ yarn start”命令的原因。

我看到了有关热装的问题-请参阅此链接

How can I add live-reload to my nodejs server

尝试让无头的WordPress根据yarn start命令进行热重装

2 个答案: