= AWS Amplify를 사용하여 React 애플리케이션을 배포하는 방법 =
== AWS Amplify를 사용한 React 애플리케이션 배포 가이드 ==
소프트웨어 엔지니어로 컨설팅을 시작한 이후로 저는 다음을 보여주는 포트폴리오 웹사이트를 만들고 싶었습니다.
내가 작업한 개인적이고 전문적인 프로젝트. 이번 겨울 방학 동안 포트폴리오 사이트를 설계, 개발 및 배포하는 데 시간을 보냈으며 이 기사에서는 AWS Amplify를 사용하여 배포한 방법을 안내합니다. 웹사이트는 dan-murphy.com에서, 코드는 GitHub에서 볼 수 있습니다.
= 간략한 배경 =
대부분의 전문 작업에는 데이터 기반 애플리케이션 구축 및 데이터 파이프라인 간소화가 수반됩니다. 이러한 작업을 수행하기 위해 저는 정기적으로 Python과 Ruby를 사용하고 모든 프런트엔드 작업에 JavaScript를 통합합니다. React에 더 익숙해지기 위한 노력의 일환으로 저는 이 프레임워크를 사용하여 제 포트폴리오 웹사이트를 구축하기로 결정했습니다.
= 애플리케이션 설정 =
내가 취한 첫 번째 단계는 애플리케이션을 구성하는 방법을 결정하는 것이었습니다. 나는 활용했다
create-react-app을 내 디렉토리의 기본 템플릿으로 사용한 다음 몇 개의 추가 폴더로 애플리케이션을 재구성했습니다. 최종 설정은 다음과 같습니다.
소스
구성 요소
âÃÂÃâ아카이브
âÃÂÃÂ추가
âÃÂÃÂ데이터
이미지
페이지
âÃÂÃÂ내용
âÃÂÃÂ데이터
스타일
테스트
비품
눈에 띄는 변경 사항 중 일부는 다음과 같습니다.
**구성 요소**
, 그리고
**페이지**
디렉토리.
**스타일**
,
: 애플리케이션의 모든 구성 요소를 저장하는 곳입니다. 구성 요소를 중앙 집중식 폴더에 저장하면 내 코드를 더 쉽게 재사용하고 리팩터링할 수 있으며 다른 사람이 이해하기 더 직관적입니다. 내 포트폴리오 웹 사이트를 구성하는 일부 구성 요소는 다음과 같습니다.
구성 요소
머리글,
바닥글 및
프로젝트 사이드바.
: 여기에서 애플리케이션에 대한 개별 페이지를 빌드합니다. 에서 필요한 구성 요소를 가져옵니다.
페이지
폴더를 만든 다음 집계하여 페이지를 디자인합니다. 다음은 내가 이 작업을 수행한 방법의 예입니다.
구성 요소 홈페이지:
: 여기에서 응용 프로그램의 전역 CSS 스타일을 정의합니다. 나는 사용하는 것을 좋아한다
스타일
styled-componentsfor 개별 구성 요소이지만 각 페이지에서 사용할 수 있는 전역 스타일을 구축하는 것이 유용하다는 것도 알게 되었습니다.
마지막으로 요청을 올바른 페이지에 매핑하기 위해 다음을 사용합니다.
react-router-dom. 경로는
App.js 파일은 아래와 같습니다.
이것은 매핑됩니다
홈페이지,
/프로젝트 요청
프로젝트 페이지,
/요청에 대해
정보 페이지 및
/bookshelf 요청
BookPage. 이제 애플리케이션 개발이 완료되었으므로 다른 사람들이 사용할 수 있도록 배포해야 합니다!
/요청
= AWS Amplify로 배포 =
== 개요 ==
React 웹사이트를 배포하는 방법에는 여러 가지가 있지만 가장 간단한 방법 중 하나는
**AWS Amplify Amplify는 확장 가능한 모바일 및 웹 앱을 구축하는 가장 빠르고 쉬운 방법으로 설명됩니다. 이를 달성하기 위해 AWS는 서버 설정, 종속성 설치, 웹 사이트 프로덕션 빌드 생성의 모든 복잡성을 추정하므로 직관적인 UX 구축에만 집중할 수 있습니다. 데이터 기반 애플리케이션(특히 **프론트엔드** 및 **백엔드가 있는 웹사이트)에 대해 AWS Amplify가 제공하는 기능에 대해 자세히 알아보려면 설명서를 확인하십시오.
== 저장소 연결 ==
AWS Amplify에서 웹 앱을 호스팅하려면 먼저 소스 코드가 포함된 리포지토리를 연결해야 합니다. 이렇게 하려면 다음으로 이동할 수 있습니다.
*AWS Amplify* *시작하기* **My Web App을 호스팅하고 **앱 리포지토리 *페이지 연결, 스크롤 *페이지, 스크롤 
그러면 소스 코드가 포함된 저장소를 연결할 수 있는 별도의 페이지로 리디렉션됩니다. 이 예에서는 GitHub를 선택하지만 AWS Amplify는 BitBucket, GitLab, AWS CodeCommit도 지원하고 Git 공급자 없이도 배포할 수 있습니다.
인증에 성공하면 배포할 리포지토리를 선택하고 AWS Amplify가 프로덕션 빌드에 사용할 브랜치를 선택할 수 있습니다.
그 후, 클릭
**다음** 및 AWS는 *빌드* 및 *테스트* 설정을 구성하도록 요청합니다. AWS에서 제공하는 기본 템플릿은 아래와 같습니다.
버전: 1
프런트엔드:
단계:
사전 빌드:
명령:
- npm 설치 빌드:
명령:
- npm 실행 빌드
아티팩트:
baseDirectory: 빌드
파일:
-
은닉처:
경로:
- node_modules
또한 아래에서
**고급 설정** 토글, 환경 변수 및 사용자 지정 빌드 컨테이너를 설정할 수 있습니다.
마지막으로 애플리케이션 설정을 검토한 후
**저장 및 배포 **및 **AWS가 애플리케이션 구성 및 배포를 시작합니다. AWS 배포가 완료되면 Amplify 홈 페이지로 이동하여 새로 배포된 애플리케이션을 확인할 수 있습니다. AWS가 애플리케이션 구성 및 배포를 시작합니다. AWS 배포가 완료되면 Amplify 홈 페이지로 이동하여 새로 배포된 애플리케이션을 볼 수 있습니다.
이제 다음을 사용하여 URL을 맞춤설정해 보겠습니다.
**AWS Amplify 도메인 관리
== 맞춤 도메인 추가 ==
맞춤 도메인 추가를 시작하려면 왼쪽 사이드바로 이동하여
**도메인 관리 
**도메인 관리**설정.
그런 다음 선택
**도메인 추가 **도메인 구성 **도메인 이름 입력(아래 참조), 클릭**도메인 이름 입력(아래 참조), 클릭 
그런 다음 도메인에 필요한 모든 리디렉션을 설정할 수 있습니다. 예를 들어 다음 예에서는 httpsdan-murphy.com에서 httpswww.dan-murphy.com으로 리디렉션을 생성합니다.
마지막으로 사용자 지정 도메인이 올바르게 구성되면 AWS에서 다음을 제공합니다.
**검증 인증서 AWS Certificate Manager 콘솔에서도 이 인증서를 볼 수 있습니다.
== CNAME 레코드 추가 ==
사용자 지정 도메인 구성의 마지막 단계는 CNAME 레코드를 추가하는 것입니다. 다음 예에서는 Google Domains를 사용하지만 기본 개념은 여러 도메인 등록기관에서 동일하게 유지됩니다.
먼저 아래로 스크롤하여
Google Domains의 **커스텀 리소스 레코드**. 모든 하위 도메인을 AWS Amplify 도메인으로 가리키는 *CNAME *레코드를 생성합니다. 이름: 하위 도메인 이름을 입력합니다. 하위 도메인이 www.domain.com인 경우 를 입력합니다. www app.domain.com인 경우 app을 입력합니다. 데이터: 도메인 관리 페이지에서 작업을 클릭한 다음 DNS 레코드 보기를 선택합니다. 그런 다음 DNS 공급자 구성에서 사용 가능한 AWS Amplify 도메인을 입력합니다. 
**도메인 관리**페이지에서 **작업 **DNS 레코드 보기**를 선택합니다.
전체적으로 사용자 지정 리소스 레코드는 다음과 같습니다.
다음으로 하나 더 추가
*CNAME* AWS Certificate Manager 검증 서버를 가리키는 레코드. 검증된 AWS Certificate Manager는 애플리케이션에 대한 TLS를 처리합니다. 이름: 검증 서버의 하위 도메인을 입력합니다. 도메인 소유권 확인을 위한 DNS 레코드가 _1234.example.com인 경우 _1234만 입력합니다. 데이터: ACM 검증 인증서를 입력합니다. 검증 서버가 _1234.abcdefg.acm-validations.aws.인 경우 _1234.abcdefg.acm-validations.aws를 입력합니다.
검증 인증서에 대한 모든 정보는 AWS Certificate Manager 콘솔에서 찾을 수 있습니다. 두 번째 후
*CNAME*이 추가되면 사용자 정의 레코드는 다음과 같이 표시됩니다. 
마지막으로
**종합 레코드**에서 하위 도메인 전달 설정: 하위 도메인: 도메인 URL 입력: www. 
= 마무리 =
전반적으로 이 기사에서는 React 애플리케이션을 구성하고 AWS Amplify를 사용하여 배포하는 방법을 배웠습니다. 먼저 반응 애플리케이션을 다음과 같이 모듈화하는 방법에 대해 논의했습니다.
*구성 요소* *페이지* 폴더. 그런 다음 **AWS Amplify**와 이를 통해 정적 및 데이터 기반 애플리케이션을 배포하는 방법에 대해 배웠습니다. 마지막으로 **AWS Amplify Domain Management** 및 **Google Domains **를 사용하여 애플리케이션의 도메인을 사용자 지정하는 방법에 대해 배웠습니다. **그리고**그리고
이 기사 또는 내 포트폴리오 사이트에 대한 질문, 우려 사항 또는 피드백이 있는 경우 언제든지 댓글을 달거나 이메일을 보내주십시오.
*
[email protected]*. 읽어 주셔서 감사합니다!
공유 웹 호스팅#7
