8 2020년 React 어플리케이션 배포 및 호스팅 솔루션
카탈로그
* 1. Firebase Hosting
* 2. Github Pages
* 3. Netlify
* 4. Heroku
* 5. Now
* 6. Surge
* 7. AWS S3
* 8. Roast
* Conclusion
유용한 팁: Bit는 공유 어셈블리에서 팀워크를 지원합니다.모든 구성 요소는 응용 프로그램에서 독립적으로 개발하고 테스트하며 사용할 수 있다.공유 프로그램을 구축하면 전체 생명 주기 중의 모든 구성 요소를 잘 처리할 수 있다.
하나의 그룹으로 공유할 때 코드 구성 요소를 다시 사용할 수 있습니다
프로젝트와 응용 프로그램 사이에서 재사용 가능한 구성 요소를 쉽게 공유하여 팀 구축 속도를 높인다.공동 개발...
조금.덕부
1. Firebase 호스팅
Firebase Hosting is part of the many services Google’s firebase offers like authentication, storage, cloud functions and even database. This is basically a static site hosting that would be perfect for any frontend react application, it also supports SSL, CDN and custom domains.
To use firebase hosting:
§ Ensure you have a google account
§ Login to Firebase Console
§ Create a project
§ Navigate to the hosting tab and click get started.
After this, you proceed to install firebase cli on your terminal with this line of command:
npm install -g firebase-tools
This would install firebase tools globally and you can now deploy using these commands sequentially in your terminal:
// cd to your project folder
firebase init firebase deploy
Firebase would deploy your application to yourProjectName.firebaseapp.com
React applications by default when you build out for production gives you github pages as a great deployment option. Github pages is a deployment service by github that builds and deploys your react application straight from the application repository with a smooth git integration, it is such a breeze to use. When you run:
yarn build
React builds out your application for production and afterward shows you a suggestion if you choose to use github pages. Copy the homepage description given, it would look like this:
“homepage” : “ https://yourgithubname.github.io/yourreponame ",
그것을 너의 소포 안에 넣어라.json 파일 다음build 명령을 다시 실행합니다.
사선 성형
소포를 가지러 가다.json 스크립트에 새 줄 추가
배치: "gh 페이지 - d 구축"
그런 다음 명령을 사용하여 배포합니다.
npm 운영 배치
브라우저에서 홈 페이지를 열고 react 프로그램이 활성 상태인지 확인합니다.
Netlify 배치를 사용하는 것은 react 프로그램을 세계에서 가장 유행하는 방식 중의 하나입니다.Netlify는 매우 부담스럽지 않고 사용하기 쉬운 인터페이스를 제공합니다. 옵션을 클릭하고 선택하며 배치를 설정하고github 등 메모리 라이브러리의 개발 환경에서 응용 프로그램을 구축할 수 있습니다. 심지어 배치를 테스트할 수 있고 같은 사용자 인터페이스에서 a/B 테스트에 대한 지원을 받을 수 있습니다.
시작하기
§ netlify 계정 만들기
§ 생성된 계정에 로그인
§ 오른쪽 상단git의 new site를 클릭합니다.
§github 선택 (당신의 프로젝트가 거기에 있다면)
§ 지침에 따라 탐색 및 테스트 배포 추가
§ 배포 사이트 버튼 클릭
이것도 터미널에서 몇 개의 명령을 통해 수동으로 실현할 수 있습니다
npm 설치 netlify cli-g netlify 배치
너는 넷라이프가 하나 있을 거야.com 프로젝트가 성공적으로 배치되었습니다.
Heroku는 업계에서 앞장서는 클라우드 플랫폼 즉 서비스 회사로 대량의 클라우드 기반 조작을 처리하는데 응용 프로그램의 구축, 관리와 배치를 포함하여react 응용 프로그램을 배치하기에 좋은 곳이다.create react app를 사용하여 react 응용 프로그램을 구축하려면 heroku에 설치하는 간단한 방법이 있습니다.
§heroku 계정 만들기
§ 생성된 계정에 로그인
이제 터미널을 열고 다음 명령을 실행할 수 있습니다.
npm 설치-g react 프로그램 만들기
react 응용 프로그램 만들기
내 응용 프로그램
초기화
heroku create-bhttps://github.com/mars/create-react-app-buildpack.git
git add.
git commit-m "Heroku에 응용 프로그램 만들기"
git push heroku 마스터
헤로쿠 오픈
그 다음에react 프로그램을 성공적으로 배치했습니다. 계기판의 프로그램 링크를 확인하십시오.
Ziet's Now는 react 응용 프로그램에서 노드 응용 프로그램까지의 모든 응용 프로그램을 포함하는 혁명적인 서버 없는 배치 서비스입니다.또한 CLI에 강력한 지원을 제공하며 github와 원활하게 통합됩니다.시작하기
§ 지금 여기에 데스크탑 설치(cli 도구와 함께 제공)
또는 npm 사용:
npm 설치 - 즉시 설치
§ 지금 새 계정 생성
§ 새로 생성된 계정으로 로그인합니다.
react 응용 프로그램을 배치하려면 프로젝트를 생성하는 루트 폴더로 이동하여 터미널에서 now 명령을 실행합니다.
지금--당신의 프로젝트 이름을 말해 보세요.
지금json 파일은 다음과 같이 루트 폴더에 표시되어야 합니다.
{
버전: 1,
유형: 정적
정적:
다시 쓰기: [
{
출처: **,
목적지:/index.html
}
]
}
}
알림에 따라 프로그램을 성공적으로 배치할 것입니다.
Surge는 매우 인기 있는 위탁 관리 서비스로 정적 응용 프로그램, 예를 들어react 응용 프로그램에 적용되며 그 목표 고객은 전방 웹 개발자이다.무료 계획은 사용자 정의 영역을 지원하여react 프로그램을 배치하는 데 아주 좋은 선택이 됩니다.시작하기
§ npm로 서지 설치
npm 설치-g 서지
§react 응용 프로그램 구축
cdreact 프로젝트 npm 실행 구축
§ 생성 폴더로 이동
cd 구축
§ 급증하는 운영
격증
알림에 따라react 프로그램이 있는 급증 URL을 얻을 수 있습니다.
Amazon 웹 서비스에는 소프트웨어 개발 주기의 모든 부분을 지원하는 클라우드 서비스가 있습니다.그들은 웹 응용 프로그램을 배치하는 데 사용되는 두 가지 서비스가 있는데, S3는 사용하기에 그리 복잡하지 않은 서비스 중의 하나이다.많은 아마존 웹 서비스들이 사용의 유연성을 위해 입문의 단순성을 희생했다고 흔히 말한다.그러나 지역사회 구성원들은 react 응용 프로그램을 s3cmd라는 아마존 s3 서비스에 쉽게 배치할 수 있는 cli 도구를 구축했다.시작하기
§aws 서비스 등록
§ 생성된 계정에 로그인
§ 원하는 데이터 포인트/센터에 따라 s3 스토리지 통 열기
§ s3cmd 다운로드
참고: Amazon 웹 서비스에는 AWS CLI 도구가 있지만 이 문서에서 사용하는 도구는 s3cmd 도구입니다.
또는 자체 제작 소프트웨어가 있는 경우 다음 명령줄을 사용하여 설치할 수 있습니다.
brew 설치 s3cmd
다음 단계는 통 열쇠가 필요합니다.키를 가져오려면 이 설명서를 참조하십시오.
키를 획득한 후 다음 명령줄을 실행하여 사용할 수 있습니다.
s3cmd - 구성
프롬프트가 나타나면 기존 키를 붙여넣습니다.계속해서 다음 명령을 사용하여 모든 스토리지 통을 나열합니다.
s3cmd ls
이제 리얼리티 프로그램을 구축합시다
사선 성형
구축 폴더를 s3 저장소 통과 동기화하려면 다음 명령을 실행합니다.
s3cmd 로컬 디렉터리 동기화 s3://BuCKET [/PREFIX]
react 프로그램은 자동으로 s3 메모리 통에 성공적으로 배치됩니다.변경한 후 다음 명령만 다시 실행하면 됩니다.
사선구축s3cmd동시구축/*s3://reactApp
이 명령을 가방에 추가할 수 있습니다.json 파일, 이렇게 하면 실 명령처럼 그것을 실행할 수 있습니다
'구축배치':'사선구축과 &s3cmd동시구축/*s3://reactApp과 &echo'성공배치'
Carast는 콘텐츠 납품 네트워크 정적 웹 호스트로react 응용 프로그램을 배치할 수 있습니다.그것의 구축은 속도와 단순성을 고려하여https와 전체 페이지 서버를 제공했다.시작하기
§ 여기에 베이킹 관련 계정 만들기
§ 새 계정으로 로그인합니다.
§ CLI 도구 설치
npm설치-g
그런 다음 react 응용 프로그램을 만듭니다.
사선 성형
리디렉션 파일을 추가합니다.여기 안내서를 보세요.완료되면 다음 명령줄을 실행하여 react 응용 프로그램을 배치할 수 있습니다.
불고기
react 프로그램에 구운 URL이 있는 것을 볼 수 있습니다.
본고에서 우리는react 개발자가react 응용 프로그램을 배치할 때 알아야 할 간단한 옵션을 상세하게 소개했다.최종적으로 로컬 호스트의 편안한 구역을 벗어나 응용 프로그램을 배치해서 전 세계가 볼 수 있도록 할 수 있다.즐거운 코딩!👏
Reference
이 문제에 관하여(8 2020년 React 어플리케이션 배포 및 호스팅 솔루션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/deveshprojectwork/8-react-application-deployment-and-hosting-solutions-for-2019-4eb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
