헤드리스 워드프레스로 실 시작 명령에 핫 재장전을 시도하는 중
저는 이 프로젝트 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"
}
}
업데이트: 윈도우에서 핫 리로딩이 문제가 되는 것 같기 때문에, 제 주요 질문은 핫 리로딩이 되지 않는 작업을 실행할 수 있는 방법이 있는지, 아니면 변경할 때마다 서비스를 중지하고 다시 시작하지 않으면 윈도우에서 개발할 수 없고, 이는 아무것도 할 수 없습니다.
시도해 볼 만한 것은 프론트엔드 스택(노드즈, 원사 등)을 도커 컨테이너 내부에서 사용하지 않고 정상적으로 사용하는 것입니다.다음 단계를 따릅니다.
백엔드 서비스
- 포트 사용 안 함
3000
인에docker-compose.yml
파일, 당신은 삭제할 수 있습니다.- "3000:3000"
줄을 긋거나 변경합니다.포트가 사용될 예정이기 때문입니다.yarn
당신이 도커 컨테이너 밖으로 도망간다는 것.변경 또는 삭제되지 않은 경우 포트 충돌을 야기합니다.- 프로젝트 실행의 루트에서:
docker-compose up -d
도커 서비스를 시작하기 위해,- 해당 포트 확인
3000
를 사용하면 무료입니다.docker ps
,- bash to docker 컨테이너 입력
docker exec -it wp-headless /bin/bash
, 그다음에 달리다yarn install
. 이 단계는 첫 번째 설정 시에만 한 번 실행합니다.실지령yarn install
반응 프론트엔드와는 상관이 없습니다워드프레스와 백엔드 의존성에 대한 설정을 하는 것 뿐입니다.모든 설치가 완료되면 컨테이너에서 종료합니다.
프론트엔드 서비스
- 컴퓨터에 필요한 모든 프론트엔드 도구(nodejs, yarn 등)를 이미 설치해야 합니다.
- 로 변경: :
cd frontend
,- 합니다를(를) 합니다.
yarn install
,- 인 합니다를
yarn start
,- 이제 프론트엔드 워크플로우 스택이 정상적으로(도커 없이) 실행됩니다.하세요를 하세요.
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
'bestsource' 카테고리의 다른 글
WordPress 포스트 메타데이터(사용자 정의 필드) 포스트 링크별 업데이트 (0) | 2023.09.21 |
---|---|
AngularJS에서 CREATE 컨트롤러와 EDIT 컨트롤러를 결합하는 것이 좋은 방법입니까? (0) | 2023.09.21 |
jquery clear 입력 기본값 (0) | 2023.09.21 |
C의 함수에서 2D 배열을 반환하는 방법은? (0) | 2023.09.21 |
jwordpress를 사용하여 WordPress에 게시물 게시 (0) | 2023.09.16 |