React 앱으로 HostGator 웹 호스팅!

HostGator? 예! 또한 이것에 대해 처음 들었고 여러분과 공유하고 싶습니다!

저는 현재 사업주와 함께 프리랜서 프로젝트를 진행하고 있으며 이제 배포 단계에 이르렀습니다. 내 고객은 이전에 다른 서비스를 사용했으며 현재 HostGator로 이전하고 있습니다. 그들의 비율은 훌륭하고 소프트웨어 개발과 관련하여 새로운 제품을 배울 수 있는 이 기회에 만족합니다.

이 블로그에서는 계정을 만들고 모든 것을 준비한 후 웹 앱을 배포한 방법을 보여 드리겠습니다.

시작하기

HostGator 계정 설정을 완료하거나 계정에 연결된 도메인을 입력하면 표시되는 방문 페이지입니다.

공포에 질리지 말 것! 그 로그인 페이지는 결제를 위한 것입니다! 다음으로 할 일은 계정 정보와 관련하여 그들이 보낸 이메일을 확인하는 것입니다. 사용자 이름, 도메인, 첫 번째 이름 서버 등과 같은 많은 정보를 나타내야 합니다.

CPanel

해당 이메일에서 원하는 것은 '귀하의 제어판'입니다. 이메일은 다음과 같아야 합니다.



제어판이라는 링크를 클릭합니다. 형식은 다음과 같습니다.

Your Control Panel: https://gator###.hostgator.com:###

로그인하면 모든 종류의 대시보드에 있게 됩니다! 파일 관리자에 초점을 맞출 것입니다.

짓다

파일 관리자를 탐색한 후 public_html 라고 표시된 폴더를 엽니다. 몇 개의 파일이 있어야 합니다. cgi_bin 와 같은 빈 폴더를 삭제할 수 있습니다.

이제 코드에.

VSCode 또는 텍스트 편집기로 돌아가서

npm start를 테스트하고 모든 것이 작동하는지 확인하십시오.

그런 다음 모든 것이 제대로 작동하면 package.json를 열고 다음을 추가합니다.

"homepage" : "<your domain here>"
//this keeps your public url be your domain.
//Some says you can also set it to "." so it will take any endpoint.

이를 수행하는 또 다른 방법(문제 해결 후 발견)은 npm install dotenv를 실행하고 루트 폴더에 .env 파일을 추가한 다음 다음 코드 줄을 입력하는 것입니다.

export PUBLIC_URL=https://yourdomain.com/

세 번째 옵션(나에게 가장 효과적임)은 PUBLIC_URL 변수를 사용하여 package.json 파일에 "homepage"를 추가하는 대신 "build-staging"을 추가하는 것입니다.

"build_staging": "PUBLIC_URL=https://yourdomain.com/ react-scripts build"

휴!
나와 함께 여기서 맨손으로! 거의 다 왔습니다!

빌드 .. 진짜.

실행npm run build - 파일용 빌드 폴더를 생성합니다. zip 폴더와 같습니다.

올바른 빌드를 받았는지 확인합니다.
귀하의 도메인이 호스트 사이트로 표시되어야 합니다.

빌드 폴더가 만들어지면 로컬 시스템에서 파일 관리자를 열고 해당 빌드 폴더로 이동하여 내부의 모든 파일을 압축합니다.

zip 파일을 다시 받으면 HostGator 계정에 업로드됩니다. 업로드가 완료되면 public_html 폴더 안에 파일 압축을 풉니다.

마지막으로 default.html 파일을 삭제합니다. (백업용으로 보관하고 싶으신 분들은 다운받아서 편리하게 보관하세요. 열면 익숙한 페이지임을 알 수 있습니다.)

비올라!!! 도메인을 확인하면 제대로 작동합니다!!
예이! 오늘 우리가 성공적으로 정복한 또 다른 도전!

다음은 내가 재설계한 웹사이트의 낮은 키 뻔뻔한 플러그입니다. Sucia Charters - Seattle

HostGator와 관련이 있습니까? 개발자가 이것을 더 쉽게 활용할 수 있도록 공유할 수 있는 트릭이 있습니까? 아래 댓글로 알려주세요!

다음까지!

참조: