[AWS10 분 자습서] ReactJS 애플리케이션 및 호스트(CI/CD) 배포

4097 단어 ReactAWS

개요


저는 회사 내에서 AWS를 사용하는 시스템 설계를 맡고 AWS의 서비스를 배우고 있습니다.
튜토리얼과 화면이 달라서 기사를 썼어요.
아래를 볼 수 있다면 다행이다.
[AWS10 분 튜토리얼] Docker 컨테이너 배포

교재


10분 강좌
https://aws.amazon.com/jp/getting-started/tutorials/
ReactJS 애플리케이션 배포 및 관리
https://aws.amazon.com/jp/getting-started/hands-on/deploy-react-app-cicd-amplify/

튜토리얼 개요


React 응용 프로그램을 만들고 GitHub 저장소로 밀어넣습니다.
그런 다음 저장소를 Amplify 콘솔에 연결
amplifyapp.com 은 도메인에서 관리되는 CDN(글로벌 컨텐츠 배포 네트워크)에 배포됩니다.

환경 구축


OS


win10 Pro

nodejs


nodejs를 설치합니다.
https://nodejs.org/ja/download/
node.경로에서 다음을 수행합니다.
검색 버전은 12.16.2입니다.
```
node -v
v12.16.2
```

git


다음 윈도우즈 설치를 참고하여 설치하십시오.
1.5 시작 - Git 설치

AWS Amplify 콘솔


AWS Amplify 콘솔은 Git 기반의 CI/CD 워크플로우를 제공하여 서버 백엔드가 없는 단일 웹 응용 프로그램이나 정적 사이트를 개발, 배치 및 관리합니다.Git 저장소에 접속하면 Amplify는 프런트엔드 프레임워크와 Amplify CLI로 구성된 서버 없는 백엔드 리소스의 구축 설정을 결정하고 모든 코드 커밋에서 업데이트를 자동으로 배포합니다.

1. 새 React 응용 프로그램 만들기


터미널에서 다음 작업을 수행합니다.
npx create-react-app amplifyapp
cd amplifyapp
npm start

git 저장소 만들기


git init
git remote add origin https://github.com/(username)/amplifyapp.git
git add .
git commit -m "initial commit"
git push origin master

Amplify에 애플리케이션 배포







URL을 클릭하면 AWS에서 React 응용 프로그램이 실행 중인지 확인할 수 있습니다.
and save to reload Part 2.상호 렌더링을 다시 시작합니다.

github에 push.
git add .
git commit -m "second commit"
git push origin master
그리고...URL에 액세스하면 표시가 변경됩니다.

이렇게 해서 CI/CD의 일부분을 접하게 됐어요.


GitHub와 통합하여 Amplify 콘솔을 사용하여 React 응용 프로그램을 클라우드에 배치합니다.
AWS Amplify 콘솔을 사용하면 애플리케이션을 클라우드에 지속적으로 배포하고 전역적으로 사용할 수 있는 CDN을 사용하여 호스트 배포를 수행할 수 있습니다.

좋은 웹페이지 즐겨찾기