[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

angular project를 빌드한다

ng build --prod

그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다.

아마존 s3 콘솔로 이동

https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2

새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다.

버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다.

properties > static website hosting

Permission tab 에서 권한을 수정한다.

overview tab 에서 필요한 파일 업로드

dist 폴더 안에 있는 파일들을 업로드 한다.

bucket policy 설정

properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다

일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고

그것을 지금 이 angular 앱과 연결해야한다.

아직 어떻게 해야 할지는 모르겠음 계속 삽질 중.

그래도 angular app 하나 올라갔는데 재밌네

from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

이 블로그의 인기 게시물

1. Welcome to React!

1. Welcome to React! 본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다. 자바스크립트의 라이브러리 우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다. 참고하면 좋을만한 사이트 : https://opentutorials.org/course/743 Virtual Dom 필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다. 변한 부분만 다시 그린다. 이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자. 출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7 위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(

자세한 내용 보기

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃

자세한 내용 보기

개발자를 위한 React.js 툴 및 리소스

개발자를 위한 React.js 툴 및 리소스 개발자를 위한 React.js 툴 및 리소스 페이스 북이 2013 년에 라이브러리를 처음 공개 한 이후 React.js의 인기는 빠르게 증가하고 있습니다.이 프로젝트는 Github에서 다섯 번째로 가장 많이 출연 한 오픈 소스 프로젝트이며 React 개발자를위한 구인 광고도 크게 증가하고 있습니다. React는 사용자 인터페이스를 구축하기위한 간단한 JavaScript 프레임 워크입니다. 가장 두드러진 예로는 Facebook 및 Instagram이 있습니다. React는보다 간단한 구조와 성능 최적화에 중점을 둔 Angular 또는 Backbone과 같은 MVC 프레임 워크에 대한 대안을 제공합니다. React가 앞으로 몇 년 동안 웹 개발 환경을 확실히 정의 할 것이기 때문에이 기사에서는 React 개발 영역에 발을 딛는 데 도움이되는 개발자 툴킷을 제공하고자합니다. 공식 React.js 문서 Facebook은 개발자에게 React의 주요 개념에 대한 자세한 문서를 제공합니다. 문서 외에도 React를 사용하여 대화 형 틱택 토 게임을 구축하는 방법에 대한 훌륭한 자습서와 React 개발자를위한 토론 포럼을 찾을 수 있습니다. 문서는 오픈 소스이므로 원하는 경우 편집 할 수도 있습니다. 공식 페이스 북 문서 React.js Github Repo React Github Repo에서 필요할 때마다 React의 소스 코드를 확인할 수 있습니다. 현재 개발 상태에 대한 정보를 유지하려면 문제, 중요 시점 및 최신 풀 요청을 살펴볼 수도 있습니다. 문제가 발생하면 문제 해결 가이드를 약간 연구하는 것이 좋습니다. React.js Github Repo 안녕하세요 월드 스타터 코드 빠른 반응을 원한다면 Codepen에서이 "Hello World"대화식 데모로 시작할 수 있습니다. 필요한 모든 자산과 시작 코드도 포함되어 있습니다. Babel도 켜져 있으므로 ECMAScri

자세한 내용 보기

angular

이 블로그 검색