bestsource

헤드리스 워드프레스로 실 시작 명령에 핫 재장전을 시도하는 중

bestsource 2023. 9. 21. 20:39
반응형

헤드리스 워드프레스로 실 시작 명령에 핫 재장전을 시도하는 중

저는 이 프로젝트 https://github.com/postlight/headless-wp-starter 를 운영하고 있습니다.저는 모든 것을 어느 정도까지 진행시킬 수 있었습니다.백엔드는 정상적으로 작동하지만 프론트엔드에 버그가 있습니다.

지침에는 실행하라고 되어 있습니다.yarn start프론트엔드 서버를 시작합니다.next.js. 이제 기술적으로 잘 작동하고 작동합니다.localhost:3000. 하지만 내가 a를 수정할 때scss줄을 지어 들어오다frontend/src/styles, 셸에서 다시 render되지 않으며 브라우저에서 핫 리로딩도 없으며 새로 고침을 눌러도 스타일이 변경되지 않습니다.하지만 만약에 내가 실을 멈추면,ctrl + c그리고 다시 실행합니다.yarn start브라우저 새로고침에 제 스타일이 나타납니다.

윈도우용 도커로 모든 것을 실행하고 있기 때문에 이것이 제한인지 버그인지 알 수 없습니다.저는 그들의 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"
    }
}

업데이트: 윈도우에서 핫 리로딩이 문제가 되는 것 같기 때문에, 제 주요 질문은 핫 리로딩이 되지 않는 작업을 실행할 수 있는 방법이 있는지, 아니면 변경할 때마다 서비스를 중지하고 다시 시작하지 않으면 윈도우에서 개발할 수 없고, 이는 아무것도 할 수 없습니다.

시도해 볼 만한 것은 프론트엔드 스택(노드즈, 원사 등)을 도커 컨테이너 내부에서 사용하지 않고 정상적으로 사용하는 것입니다.다음 단계를 따릅니다.

백엔드 서비스

  1. 포트 사용 안 함3000인에docker-compose.yml파일, 당신은 삭제할 수 있습니다.- "3000:3000"줄을 긋거나 변경합니다.포트가 사용될 예정이기 때문입니다.yarn당신이 도커 컨테이너 밖으로 도망간다는 것.변경 또는 삭제되지 않은 경우 포트 충돌을 야기합니다.
  2. 프로젝트 실행의 루트에서:docker-compose up -d도커 서비스를 시작하기 위해,
  3. 해당 포트 확인3000를 사용하면 무료입니다.docker ps,
  4. bash to docker 컨테이너 입력docker exec -it wp-headless /bin/bash, 그다음에 달리다yarn install. 이 단계는 첫 번째 설정 시에만 한 번 실행합니다.실지령yarn install반응 프론트엔드와는 상관이 없습니다워드프레스와 백엔드 의존성에 대한 설정을 하는 것 뿐입니다.모든 설치가 완료되면 컨테이너에서 종료합니다.

프론트엔드 서비스

  1. 컴퓨터에 필요한 모든 프론트엔드 도구(nodejs, yarn 등)를 이미 설치해야 합니다.
  2. 로 변경: :cd frontend,
  3. 합니다를(를) 합니다.yarn install,
  4. 인 합니다를 yarn start,
  5. 이제 프론트엔드 워크플로우 스택이 정상적으로(도커 없이) 실행됩니다.하세요를 하세요.yarn지금 사용하실 물건은 도커 컨테이너 밖에 있고 완전히 분리되어 있습니다.

도움이 되길 바랍니다.

웹 서버가 언제 업데이트된 CSS의 변경 사항을 반영하는지(브라우저에서 사용 가능하도록), 두 번째는 페이지를 다시 로드하는 브라우저입니다.

yarn start 

는 웹 서버를 시작하지만 수정된 파일을 다시 로드하도록 웹 서버에 지시할 사항이 없을 수도 있습니다.이것이 '야른 시작' 명령을 재발행해야 하는 이유일 수 있습니다.

핫 리로딩에 관한 질문을 보았습니다 - 이 링크 참조

nodejs 서버에 실시간 재로드를 추가하려면 어떻게 해야 합니까?

언급URL : https://stackoverflow.com/questions/53918370/trying-to-get-a-headless-wordpress-to-do-hot-reloading-on-yarn-start-command

반응형