Ch03 서버리스 어플리케이션 개발
06. Front
07. Front
08. S3
09. S3
Front 작업
getmdl.io/구글에서 개발한 디자인 프레임워크를 사용하여 화면을 구성한다.
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience
getmdl.io
라이센스를 확인하고 오픈소스 프로젝트를 사용할 경우 꼭 라이센스에 대한 문서를 포함하도록 한다.
초기 index.html 기초는 아래와 같다 meterial design light의 라이센스와 css와 script를 추가한 상태이다.
<!--
Copyright 2015 Google Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
All code in any directories or sub-directories that end with *.html or
*.css is licensed under the Creative Commons Attribution International
4.0 License, which full text can be found here:
https://creativecommons.org/licenses/by/4.0/legalcode.
As an exception to this license, all html or css that is generated by
the software at the direction of the user is copyright the user. The
user has full ownership and control over such content, including
whether and how they wish to license it.
-->
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FastCampus: Serverless Web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
</body>
</html>
meterial design light 에서 component의 layout을 추가하도록 한다. header, footer, tab을 추가한뒤 card를 추가하여 form을 구성한다. codepen.io/hidekuma/pen/ExxRjJd 를 참고하여 작성하도록 한다.
tab1에는 폼을 작성하고 tab2에는 참가내역을 볼 수 있는 화면으로 구성한다. list로 사용자 정보와 dialog를 사용하여 참가증을 확인할 수 있는 기능을 추가한다. jquery를 추가하여 마무리 한다.
S3를 웹서버로
s3버킷을 생성한다. 버킷이름과 리전을 선택한다.
퍼블릭 액세스 차단을 해제한다.
s3생성 후 작업후 작업한 html, css, js파일을 업로드한다.
fonts, imgs폴더를 추가한다.
버킷에 대한 권한 설정을 추가한다.
버킷 정책을 편집한다.
정책 생성기를 클릭한다.
s3를 선택, action은 "get object"를 선택한다.
json 형식으로 권한 정책을 생성해 준다.
s3 화면으로 돌아가서 정책 json을 입력한 뒤 저장한다.
업로드한 개체를 확인하면 퍼블릭 권한이 부여되어 열어 볼 수 있다.
~.com/index.html 로 끝나는 주소를 ~.com 으로 접속했을때 연결하는 설정을 추가한다.
오브젝트 관리를 위해 버전관리 기능을 활성화 한다.
이제 s3를 사용하여 웹페이지를 서비스 할 수 있게 되었다.
awscli를 사용법을 알아보자 s3목록을 확인해본다.
# py37 가상환경 활성화
source ~/venv/py37/bin/activate
# awscli를 사용하여 s3 obejct목록 출력
aws s3api list-objects facamp2020cfawscli를 사용하여 파일을 업로드 한다.
aws s3api put-object --bucket facam2020cf --key dir1/test.txt --body ./test.txt
16일 차 마무리
s3를 사용하여 웹페이지를 제공하는 방법을 학습했다. EC2를 사용하여 서버를 설정 할 수 있지만 s3를 사용 할 경우 실제 업무에 집중 할 수 있는 환경을 제공하기에 업무 효율에 큰 이점을 준다.
현재 수강 중인 강의는 아래와 같다
올인원 패키지 : AWS/Docker 클라우드 서버구축👉https://bit.ly/3bFlm0e
