CRA + VITE + Next.js 프로젝트 정적 웹 호스팅 방법!

CRA 웹 호스팅 방법

이전 제 최근글을 참고하시면 여기까지 오는법은 알거라 생각합니다.

기존 연습했던 필요없는 버킷은 지워주고 새로 실습할 버킷을 이전과 동일하게 생성합니다~

 

권한탭을 눌러서 버킷 정책 편집을 이전과 동일하게 진행합니다~

"Principal": "*",  왼쪽처럼 값을 변경해주시고~

변경사항 저장!

 

그리고 속성탭 젤 아래 정적 웹 사이트 호스팅 편집을 아래와 같이 설정해줍니다.

인덱스 문서 index.html 다시 따라치세요~!

그리고 visualcode에서 npx create-react-app myfirstaws-web을 생성 후(또는 본인이 올린 파일)

npm run build를 통해 빌드파일을 만들고 그 폴더를 올리는것이 아닌 그 내부에 있는 파일들을 드래그해서 올리면 끝!

 

 

 

 

VITE 프로젝트 웹 호스팅 방법!

위와 동일하다.

다만 npm run build를 진행했을때 dist폴더로 생긴다.

그 폴더안에 파일들을 올리면 끝~!

 

 

Next.js 프로젝트 웹 호스팅 방법!

next.js는 동적 웹페이지와 정적 웹페이지를 선택해서 배포할 수 있다.

하지만 S3로는 정적 웹페이지만 웹 호스팅이 가능하니 정적으로 셋팅해보겠습니다.

 

next.config.mjs 파일을 눌러 

 

const nextConfig = {
	output: 'export'
};

export default nextConfig;

 

이 코드를 작성 후 저장 후에

npm run build를 통해 빌드한다.

그럼 이제 out이란 폴더가 생기는데 그 폴더 안에 파일들을 위의 과정과 동일하게 S3에 올리면 끝난다~!