개인프로젝트 1-3 S3에 Vue.js static 리소스 올리기 (v0.dev)

정적 리소스 S3에 업로드

개발을 다 완전히 마치고 올리면 좋겠지만, 그래도 AWS 사용법을 익히며 개발하는 것이 나에게 더 도움되기 때문에 기본으로 제공되는 index 파일을 S3에 올려보려고 한다.

Vue.js는 클라이언트 사이드 렌더링 방식이어서, 정적 리소스들을 S3에 올려 웹서버가 클라이언트의 요청이 있을 때마다 제공하고, 그 뒷단의 다른 동적인 액션들은 웹 애플리케이션 서버가 처리하도록 한다.

관련 내용을 이전 포스트에서 다룬 적이 있다.

 

 

Vue.js를 S3에 올리는 단계까지를 설명해주는 블로그들은 많다. 이거보고 참고했다.

 

Vue2를 AWS S3에 배포하고 운영해보자

 

$ npm run build

 

위 명령어로 빌드하고, static 내의 파일들을 S3에 올려주고 접근 설정들을 조금 바꾸면 된다고 한다.

깨알지식으로 dist 파일명은  distribution, 즉 배포의 줄임말이다

 

 

 

다른 분들이 한거 잘 따라하면 아래처럼 나온당

정적 리소스 올리는 것까진 이해했고, 이제 각 클릭 이벤트에서 발생하는 리퀘스트를 동적으로 처리할 어플리케이션 서버를 AWS 상에 구축해 연동하는 것도 연습하면 된다.

이 때 웹 어플케이션 서버를 인스턴스 상에 배포할지, 람다를 사용해 서버리스 식으로 구축할지 고민되지만 결국엔 둘 다 해볼 계획이다.

 

추가 실습

프론트엔드 코드 생성 서비스로 v0 이 있다.

코드를 짜면서 바로 옆에서 레이아웃을 보여준다. 예쁘게 짜주더라..

바퀴를 다시 발명하지 말란 말이 있자나요.. 개발자들은 이제 뭘 만들어야하나요

 

무튼 짜준 코드 빌드해서 S3로 올렸다. 

요기에 http://seungmin-resume.s3-website.ap-northeast-2.amazonaws.com

 

프론트엔드 static 코드를 배포하는 방법으로는 아래의 세 가지 방법이 있다.

• vercel
• AWS S3
• AWS Amplify

vercel을 통해서 하는건 매우 쉽다. 그냥 deploy를 누르면 알아서 배포해서 url을 던져준다.

이번엔 S3를 해봤고, 다음엔 Amplify를 사용해보려한다.