1. node js 다운로드
- LTS로 다운하자,,, 최신 버전은 정보도 없고 오류도 많은 걸?
2. yarn 다운로드
- yarn 버전을 확인 하려는 데 yarn을 못찾는다고 나옴. [ yarn.psl 파일을 로드 할 수 없습니다 ]
- 사용하는 터미널의 권한을 Remotesigned 으로 변경
- 내 권한 확인 : Get-ExecutionPolicy
- 권한 세팅 : Set-ExecutionPolicy Remotesigned
3. 리액트 프로젝트 설치 및 실행 시켜보기
npx create-react-app frontend
cd frontend
yarn start
4. Dockerfile 생성
- 위치 : frontend 바로 아래
- 도커에 올릴 이미지를 만들어주기 위한 파일
5. docker-compose.yaml 생성
- 위치 : 프로젝트의 root dir 아래, 제 경우 frontend 바로 위
- 이거 뭐임?
- 도커에 올릴 이미지에 대한 좀 더 자세한 내용을 기술하는 파일 인 것으로 보임
- yaml 파일은 정말 오타를 조심해야 한다.. command를 comman으로 잘 못 써서 30분 날림.
- 이걸 사용하기 위해서는 docker-compose build 라는 명령어로 build해줘야한다.
- Dockerfile만으로 build 하려면 docker build .
- build 하려니깐 in the default daemon configuration on windows the docker client must be run with elevated privil 어쩌고 저쩌고 에러 뜸. 도커 기동 안해주고 build 시킴ㅎㅎㅎㅎ... docker desktop 한번 눌러줌. -> 해결
- 기동 : docker-compose up
6. 할당해준 포트로 로컬호스트 들어가서 정상 작동 확인
- docker -ps
참고자료
2. 작업환경 준비 · GitBook
2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토
react.vlpt.us
리액트 기초부터 알고 싶다면 벨로퍼드!
[Docker] 1. React로 Docker 실행시켜보기 (Docker-compose)
🏃 0. Start!├──frontend | ├──public/ | ├─src/ | ├──Dockerfile //리액트 도커파일 | ├──package.json | └──package-lock.json └──docker-compose.yaml //컨테이너를 실행시키기 위한 docker-compose파일
night-knight.tistory.com
도커 + 리액트를 기초부터 차근차근 알려주시는 블로그
'프로젝트 > 남는 노트북을 개인 서버로' 카테고리의 다른 글
| 도커에 올린 리액트 웹서버 외부에서 접근하기 (0) | 2023.07.11 |
|---|---|
| 윈도우 10에 wsl2를 이용한 도커 설치 (0) | 2023.07.10 |
| 타임라인 정리 - 남는 윈도우 노트북으로 개인 서버 만들기 (0) | 2023.07.10 |
