버글버글
[React] code-server에서 build한 프로젝트 nginx로 열기 본문
새로운 포트 열고나서 nginx의 code-server에 업로드한 react프로젝트를 컴파일(build) 하면, nginx서버에서 자동으로 컴파일된 파일을 찾아서 열어주게 Nginx서버를 설정하는 방법
1. 새로운 포트 열어주기
- 자세한 사항은 아래 글 참고해서 포트를 열어주면 된다.
[Linux] CentOS 7 방화벽 포트 열기/닫기
방화벽서비스 추가하기 1. PowerShell 열어서 로그인하기 ssh 계정명@서버주소 2. port 추가하기 firewall-cmd --permanent --zone=public --add-port=포트번호/tcp 3. reload 해주기 firewall-cmd --reload 4. 추가되었는지 확
hyo-s.tistory.com
2. nginx서버에 project 업로드 하기
- 자세한 사항은 아래 글 참고해서 업로드 해주면 된다.
[PuTTY] PuTTY란? / windows → Linux 파일 전송
PuTTY란? (1) 윈도우 운영체제에서 사용되는 무료 오픈 소스 터미널 에뮬레이터이다. (2) SSH, Telnet, Rlogin 및 시리얼 연결 프로토콜을 지원하며, 사용자가 원격 서버에 안전하게 연결하고 명령을 실
hyo-s.tistory.com
3. code-server에서 react 프로젝트 build 해주기
(1) 우측상단 메뉴바 눌러서 통합터미널 열기 ( Ctrl + Shift + ` )
(2) 터미널에 npm run build 입력 해서 build 해주기
npm run build
4. nginx서버 설정파일 수정하기
(1) PuTTY나 cmd, PowerShell을 사용하여 ssh에 접속
ssh 계정명@서버IP(2) 접속 한뒤에, 서버 설정 파일을 열어준다.
vim /etc/nginx/nginx.conf(3) 추가한 port 번호에 대한 서버 설정 해주고, root를 react프로젝트가 build되는 경로로 설정 해 주면 된다.
(4) 설정 후에 [esc] 를 입력하고, :wq 를 입력하고 나오면 된다. ( 나중에 안 사실이지만 :q는 저장하지 않고 종료한다는 뜻! )
자세한 글
5. nginx서버 재 시작 해주기
(1) 아래 코드 입력해서 nginx 서버 재 시작
service nginx restart
(2) nginx 서버가 실행되고 있는지 확인하기
service nginx status
위사항을 모두 하고 서버주소 : port번호로 접속하면 컴파일된 react projcet를 볼수있다.
'React > react 공부기록' 카테고리의 다른 글
| [React] axios로 pdf 다운로드 받기 (0) | 2023.05.23 |
|---|---|
| [React] React에서 Font Awesome 사용하기 (0) | 2023.05.22 |
| [React] mui DataGrid를 통한 API 호출 CRUD (4) Update (0) | 2023.05.08 |
| [React] mui DataGrid를 통한 API 호출 CRUD (3) Delete (0) | 2023.04.27 |
| [React] mui DataGrid를 통한 API 호출 CRUD (2) Create (0) | 2023.04.26 |
