내 포트폴리오 사이트 만들어서 AWS에 올리기 1편. Django, startbootstrap, AWS, EC2

---

유튜브 - 

 

 

목차

2022.05.08 - [Study/python] - 내 포트폴리오 사이트 만들어서 AWS에 올리기 1편. Django, startbootstrap, AWS, EC2

2022.05.08 - [Study/python] - 내 포트폴리오 사이트 만들어서 AWS에 올리기 2편. docker, nginx, uwsgi 사용하기

 

github : mychew-blog/popol: 내 포트폴리오 사이트 만들어서 AWS에 올리기 https://cholol.tistory.com/564 (github.com)

 

 

 

이번 시간에는 유료 혹은 무료로 제공되는 html, css, js 템플릿을 장고에 적용해서 AWS에 올려보는 내용을 다루겠습니다. 흔히 '템플릿'이라고 부르는데 뭐 쇼핑몰이나 블로그와 같이 형식이 일정한 서비스의 경우 틀만 맞춰놓고 디테일은 각자 조금씩 수정하는 방향으로 많이 개발을 하곤 합니다. 이렇게 템플릿을 만드는 사람들은 html과 css, js 파일 세트를 제공을 해주게 되는데 이 파일들을 다운로드하여서 장고에 적용시켜서 AWS에 띄워보도록 하겠습니다.

 

템플릿을 판매하는 사이트는 다양한데 저는 Free Bootstrap Themes, Templates, Snippets, and Guides - Start Bootstrap 요기서 freelancer라는 템플릿을 사용하겠습니다.

 

freelancer 언어유희인듯

공짜 기도 하고 포트폴리오 형태로 되어있어 개발자들이 자기 포트폴리오 만들기도 좋은 예시라고 생각됩니다. 요즘엔 notion으로 많이들 하긴 하지만 역시 웹서비스로 띄워봤다와 notion으로 만들었다의 차이가 조금은 있으니까요 ㅋㅋ

 

해당 템플릿에 들어가서 다운로드를 누르고, 다운로드한 파일을 압축을 풀면 아래와 같은 파일이 나옵니다.

 

html, css, js 그리고 이미지들

 

html, css, js 그리고 홈페이지에 사용된 이미지 자료 같은 게 assets 폴더에 담겨있습니다. 요걸 바로 활용해서 Django로 포트폴리오 웹사이트를 만들어봅시다.

 

 

장고 프로젝트 만들기

* 장고에 대한 이해가 어느 정도 있는 분들을 대상으로 진행합니다. 제 블로그나 유튜브에 서버 개발자가 되는 법이나 장고로 restful api 만들기를 보셔도 되고, 장고로 뭔가를 만들어보셨으면 충분합니다.

 

일단 신규 프로젝트를 만듭니다.

 

pycharm pro 버전에서 생성

저는 파이참 프로버전을 사용하기 때문에 바로 장고 프로젝트를 만들 수 있습니다. 파이썬 버전은 3 버전대를 아무거나 사용하시면 됩니다. 저는 3.7로 생성

 

프로젝트가 생성되면 가장 먼저 python manage.py startapp을 이용해서 우리가 제공할 웹페이지를 따로 앱으로 만들어줍니다. 

 

webpage 앱 생성

그리고 djangorestframework 패키지를 설치해줍니다.

 

pip install djangorestframework

 

패키지 설치

자 이제 우리가 다운받았던 템플릿을 장고 프로젝트에 복사해야 합니다. 두 분류로 나누어서 저장을 해야 하는데, html 파일은 templates폴더에 넣고, 나머지 cs, jss, asset은 static이라는 폴더에 넣습니다. templates 폴더는 파이참이 알아서 만들어줬는데, 없으면 만드시면 되고, static폴더도 만들어줍니다.

 

폴더 두개로 분리

자 이제 index.html을 띄워볼텐데요, webpage폴더에 views.py에서 index.html을 띄울 수 있는 class를 하나 만듭니다.

 

# ~/webpage/views.py

from django.shortcuts import render
from rest_framework.views import APIView


class Main(APIView):
    def get(self, request):
        return render(request, "index.html")

 

render를 이용하면 templates 폴더에 있는 html 파일을 브라우저에 띄울 수 있습니다. 아까 설치한 djangorestframework의 APIView를 상속받은 클래스로 간단하게 get으로 호출하면 index.html을 보여주는 class를 만들었습니다. 이제 이 Main이라는 클래스를 url과 매핑해주기 위해 urls.py를 수정합니다.

 

 

요롷게

 

path를 ''으로 해주면 그냥 url만 입력했을 경우 Main이 실행됩니다. 그럼 Django프로젝트를 한번 실행해볼까요?

 

뜨긴 뜨는데.

html 파일이 있긴 있어서 페이지가 뜨긴 하는데, 깨져서 나옵니다. 이유는 css, js, asset 등을 못 읽어와서 그렇습니다. 로그가 찍히는 걸 보면 404 에러가 나는 것을 볼 수 있는데, /css/styles.css를 못 찾겠다~ 뭐 요런 느낌입니다.

 

그럼 이제 static폴더를 인식시켜주기 위한 코드를 추가해야 하는데요, 일단 settings.py에 가서 STATIC_URL이란 코드가 있는지 확인합니다.

 

STATIC_URL

 주석을 보시면 아시겠지만 여기에 CSS, JavaScript, Images를 넣어라~ 느낌이 들죠? STATIC_URL이 장고 어디 버전부터는 무조건 들어가는 것 같네요. 없으면 추가하고 있으면 그냥 쓰면 됩니다. 그리고 아래 한 줄을 추가해줍니다.

 

STATICFILES_DIRS인데 그냥 STATIC_URL만 있으면 static폴더는 인식하지만 그 안에 폴더들은 인식을 못하더군요. 요게 있어야 인식이 잘 됩니다. 

 

 

이걸 어디다가 쓰냐면 urls.py인데요, urls.py 코드 맨 아래 한 줄 추가합니다.

 

urlpatterns

 

요거를 추가하게되면 static폴더를 url경로로 접근할 수 있게 해 줍니다. 즉 static/assets/img/avataaars.svg 파일을 127.0.0.1:8000/static/assets/img/avataaars.svg로 접근할 수 있다는 것이죠

 

이렇게 이미지가 보입니다.

자 그럼 다시 실행해볼까요?

 

???

다시 실행해도 이미지가 안 나옵니다. 

이건 우리가 static을 경로로 잡아주었지만, 실제 index.html에서의 경로를 잡아주지 않았기 때문입니다. 개발자 모드로 이미지가 깨진 곳을 클릭해보면...

 

경로가 이상하다.

이렇게 /static/assets/~로 안되어있고 바로 assets/~으로 시작하는 경로로 이미지를 찾고 있습니다. assets으로 시작되는 애들을 찾아서 /static/assets/~으로 바꿔줍니다.

 

 

 

 

assets는 14군대있고, 중간에 css와 js가 하나씩 있는데 요것도 앞에 static/을 추가합니다. 그럼 다시 페이지에 들어가 볼까요?

 

포트폴리오 완성

 

자~ 포트폴리오가 잘 뜹니다 ㅎㅎ

 

이제 여기서 원하는 부분을 자기 나름대로 수정합니다. 이 부분은 html과 css이기 때문에 제가 알려드릴게 별로 없긴 한데,, 구글링 하셔서 이쁘게 바꾸시면 됩니다... ㅋㅋㅋㅋ 

 

일단 상단에 START BOOTSTRAP이라는 거 바꾸고 싶으면 index.html에서 직접 찾아서 바꾸면 됩니다.

 

요롷게요. 참 쉽죠? ㅋㅋㅋ

 

자 이제 내 컴퓨터에서 실행시켜봤으니 AWS에 한번 올려봅시다.

 

 

AWS에 올리기

 

AWS에 올리기 위해서는 일단 AWS에 가입을 해야겠죠? 가입을 할 때 신용카드 정보나 이것저것 입력해야 하고 첫 가입하면 1년 프리티어를 사용할 수 있습니다. 프리티어중에 EC2 t2.micro를 쓸 수 있기 때문에 공짜로 하고 싶으시면 첫 가입한 계정이 필요합니다 ㅎㅎ

 

가입은 다들 아실거라고 생각해서 패스~

 

AWS에 로그인하시면 처음에 대시보드 같은 화면이 뜹니다.

 

AWS 처음 화면

여기에는 최근에 사용했던 서비스나 요금등이 나오는데, 저는 사용하고 있기 때문에 나오지만 여러분은 빈 화면일 거예요. 여기서 우리는 EC2에 들어가 줍니다. 상단에 검색창에서 ec2를 검색하면 나옵니다.

 

EC2

EC2 메뉴

EC2에 들어가면 또 화면이 바뀝니다. EC2는 Elastic Compute Cloud의 약자인데, ECC인데 C가 두개라서 EC2라고 하는 것 같습니다 ㅋㅋ 쉽게 생각하면 그냥 AWS에 컴퓨터 한 대를 사용하는 서비스입니다. 참고로 저는 영어모드로 해놨는데 한글로 하셔도 됩니다. 근데 대부분의 블로그나 레퍼런스를 찾을 때 영어로 하는 게 더 편해서.. 한국어 번역이 쪼끔 어색합니다. 그래서 영어에 익숙해지는 걸 추천드립니다.

 

일단 좌측에서 instances를 눌릅니다.

실행중인 인스턴스가 나온다

저는 인스턴스 두 개를 이미 사용 중이어서 두 개가 나오지만 아마 처음 누르면 빈 화면이 나오거나 신규 인스턴스를 만들라는 화면이 나올 거예요. 좌측 상단에 Launch instances를 눌러줍니다. 

 

ec2 런칭화면

그럼 새 ec2를 만드는 메뉴로 넘어가는데, 음.. 옛날 UI에서 많이 바뀌었네요? 여기서 우리가 해야 할 건 이름 정하기, OS정하기, 인스턴스 타입 정하기, key pair 세팅하기 정도입니다. 나머진 디폴트로 충분하거든요 ^^

 

이름과 OS

이름은 뭐 아무렇게나 지어주시면 됩니다. OS는 ubuntu를 사용할 건데 18 버전을 사용할 예정입니다. 최근에 22버전까지 나왔네요? 근데 20버전부터 mysql 8.0을 써야해서 mysql5.7을 못씁니다. 아마 많은 회사들이 5.7을 쓰고있어서 ubuntu 18버전을 쓰고 있을 것 같은데 말이죱. 여기서는 db를 안 쓰기는 하는데 그냥 18 버전이 편하니까 18 버전으로 가겠습니다.

 

인스턴스타입과 키생성

제일 중요한 인스턴스 타입입니다. 내가 사용할 컴퓨터의 성능을 결정하는 부분인데 t2.micro가 무료 버전입니다. 다른 거 하면 돈나가융~ 옆에 Free tier eligible을 꼭 체크하세요.

 

그리고 중요한 게 key pair를 만들어야 하는데요, 이건 우리가 aws에 있는 컴퓨터로 접속을 할 때 필요한 키입니다. Create new key pair를 눌러서 새 키를 만듭니다.

 

키생성

 

어,, 옛날에는 ppk로 바로 만드는 게 없었는데, 이번에 생겼나 보네요. 윈도우에서 putty를 사용할 때는 .ppk로 이용하면 되고 그냥 터미널에서 ssh 접속하면 pem으로 만들면 됩니다. 저도 맥에서는 pem을 쓰는데, 윈도우에서는 putty를 쓰니까 ppk로 만들겠습니다. Create key pair를 누르면 만들어진 키가 다운로드됩니다.

 

만들어진 키파일

 

마지막으로 하나를 더 추가합니다. 우리가 서버에서 웹서버를 띄우면 80번 포트와 8000번 포트를 사용하기 때문에 보안 그룹(Security group)을 설정해야 합니다. 

 

보안그룹 설정

 

원래는 22번 포트만 열려있는데, 여기에 Add security group rule을 통해 80번과 8000번을 추가합니다. 80번은 http이기 때문에 type에서 http를 선택하면 알아서 됩니다. 8000번은 Custom TCP를 입력하고 8000번을 입력합니다. 이제 다 끝났습니다. launch를 누르면 아래와 같이 success가 뜹니다.

 

완료!

새 인스턴스 뜨는중

새 인스턴스가 열심히 실행 중인 게 보입니다. 요걸 선택하면 세부 정보가 나옵니다.

 

세부정보에서 public ip주소를 보자

 

세부 정보를 보면 Public IPv4 address가 있는데요, 요걸로 putty를 접속하면 됩니다. 아까 받은 키를 세팅하고 putty로 접속해봅시다.

 

putty Auth 설정

ip설정

key를 세팅해주고 ip를 세팅해주고 AWS에서 서버가 실행되길 기다립니다. 

상태를 잘 보자

서버가 정상적으로 Running 상태가 되면 putty로 접속을 해봅시다. Open을 누르면 접속!

 

첫 접속

처음 접속하면 위와 같은 경고가 나오는데 예를 누르고 넘어갑니다.

 

로그인

로그인을 하라고 나오는데 ubuntu의 경우 ubuntu라고 입력하면 됩니다.

 

접속 완료

자 이제 접속 완료했습니다. git과 python3가 기본적으로 설치되어있기 때문에 git으로 소스를 받은 다음에 바로 실행할 수 있습니다. 그러려면 우리가 로컬에서 만든 프로젝트를 github에 올려야겠죠?

 

github에 접속해서 새로운 repo를 만들어줍니다. 

 

repo 만들기

repo를 만들면 어떻게 프로젝트를 연동하는지 나옵니다.

 

친절한 설명

고대로 치시면 됩니다.

 

복붙

복붙 하면 알아서 한 줄 한줄 실행합니다. 완료되면 github에는 readme.md파일만 생기게 되는데 이제 나머지 파일도 commit 해서 올리면 됩니다. 그전에  venv폴더는 올리지 않아도 되기 때문에 gitignore를 이용해서 venv만 뺍니다.

 

.gitignore

 

이제 venv를 뺏으니 나머지 전부 git add . 해주고 git commit, git push를 해줍니다. (깃 사용법은 다들 아실 거라고 생각하고...)

 

git 완료

자 이제 github에 모든 소스를 올렸으니, putty에서 git clone을 해줍니다.

git clone

소스 파일 다운 완료

아항 requirement.txt를 만들어주지 않았네요. 설치된 패키지 정보를 txt로 만들어줘야 배포 시 편합니다. 다시 파이참으로 돌아가서 pip freeze -> requirements.txt를 해줍니다.

 

pip freeze

그럼 requirements.txt에 현재 프로젝트에 설치된 패키지가 나열되고, 이 파일을 이용해 ec2에서도 똑같이 설치합니다. 새 파일이 생겼으니 git commit과 git push를 해줍니다.

 

추가~

ec2에서는 git pull을 해서 새로 추가된 파일을 받아줍니다.

 

pull

이제 pip3 install -r requirements.txt를 이용해서 패키지를 설치합니다. 근데 pip3를 입력하니 설치하라고 나오네요?

WTF?

그럼 설치해줍니다. sudo apt install python3-pip.

또 그냥 설치하려니 에러가 나네요?

unable to locate package python3-pip 라고 나온다면 sudo apt-get update라는 명령어를 한번 쳐주고 다시 입력하면 마구마구 설치합니다.

 

 

자 이제 다시 pip3 install -r requirements.txt를 해줍니다. 

또다시 에러

에러가 또 나네요. asgiref 3.5 버전을 찾을 수 없다고 합니다. 저희가 로컬에서 만들 때 python 3.7을 쓴 거 같은데 서버에는 3.6.9가 기본으로 설치되어 있네요. ㅂㄷㅂㄷ,,, 그럼 requirements.txt를 조금 고쳐줍니다. 

 

3.5.0을 지웁니다

==3.5.0이라고 되어있는 부분을 지웁니다. 그러면 pip3가 알아서 알맞은 최신 버전을 설치합니다

 

한놈더

마지막에 typing_extensions=4.2.0도 못 찾는군요 얘도 지워줍니다.

 

드디어 설치 완료

 

자 이제 서버를 띄워보겠습니다.

 

python3 manage.py runserver 0.0.0.0:8000을 해봅시다.

 

서버 실행 완료

migrate를 안 했다는 경고가 나오긴 하는데, DB를 안으니까 상관없긴 합니다. 자 그럼 우리의 ip주소로 접속해봅니다.

 

?!?!

에러가 납니다. ㅋㅋㅋㅋ

로컬에서는 잘 됐는데 왜 안될까요? 위에 스샷에 적혀있지만 You may need to add 'xxxxxx' to ALLOWED_HOSTS라고 나옵니다. 외부에서 접속할 수 있도록 호스트를 추가해주어야 합니다. 다시 파이참으로 가서 settings.py를 손봐줍니다.

 

ALLOWED_HOSTS

어디서든 접속할 수 있도록 아스타를 추가해줍니다. '*'

 

자 이제 다시 commit push. 서버에서는 git pull

 

pull 다시 ㅎㅎ

자 이제 완벽합니다. 다시 실행해봅니다.

 

얄루~

 

자 드디어 떴습니다~!!!

 

 

도메인 연결

그런데 포트폴리오에 접속하려면 ip주소를 치고 들어가야 하는데 아주 번잡하지 않습니까? 도메인을 한번 입혀봅시다. 하지만 도메인 살 돈은 없으니까 무료 dns를 하나 땁니다. 제가 자주 애용하는 건 duckdns입니다. 

Duck DNS (www.duckdns.org)

Duck DNS

요기 들어가서 구글로 로그인하면 5개를 공짜로 만들 수 있습니다. http://xxxx.duckdns.org/ 요롷게 만들 수 있습니다.  

 

duckdns

add domain으로 도메인을 만들고 ip주소를 입력하면 됩니다. 우리 aws의 ip주소를 입력하고 update ip를 누르면 끝.

 

그럼 mychewpopol.duckdns.org로 접속을 할 수 있습니다.

 

안되는데요 선생님?

접속을 하면 안 됩니다.. 왜냐하면~! 우리가 띄워놓은 장고는 8000번 포트이기 때문이죠. 뒤에 8000번을 붙여볼까요?

 

8000을 붙이면 됩니다.

됩니다.

 

그런데 언제까지 8000을 붙여야 하나요? 우리가 아는 홈페이지에 뒤에 붙이는 건 없지 않나요? 

여기서 저희가 처음 EC2를 만들 때 8000번 포트와 80번 포트를 추가했다는 게 기억나실 겁니다. 80번 포트가 바로 http포트인데, 뒤에 숫자를 적지 않으면 80번 포트로 이동됩니다. 즉 장고를 80번 포트로 실행시키면 뒤에 포트번호를 적지 않고 도메인 이름으로만 접속이 됩니다.

 

장고에서 포트번호를 정하는 건 runserver 0.0.0.0:8000 명령어에서 인데, 여기에서 0.0.0.0:80으로 바꿔주면 됩니다.

 

80으로 띄우기

근데 python3 manage.py runserver 0.0.0.0:80을 해주면 권한이 없다고 나옵니다. 80번은 웹 포트이기 때문에 아무나 쉽게 쓸 수 있는 포트가 아니죵. 하지만 간단하게 sudo 권한으로 실행하면 실행이 됩니다. 앞에 sudo만 붙여주세요

 

만능 sudo

자 쉽쥬? 그럼 다시 도메인으로 접속해 볼까요?

 

짠

자 이제 번거롭게 포트번호를 입력하지 않아도 domain을 입력하면 접속이 됩니다. 이제 이력서나 친구에게 알려줄 때 번거롭게 숫자로 얘기하지 않아도 됩니다 ㅎㅎ

 

 

 

 

 

정리하기

자 이번 포스팅에서는 장고 프로젝트를 이용해 기존에 있는 템플릿을 적용해 보았고, AWS에 EC2를 만들어서 배포하고, 도메인까지 연결했습니다. 도메인으로 접속했을 때 우리가 만든 웹 페이지가 잘 뜹니다.

 

하지만, 완벽한 서비스는 아닙니다. 우리가 장고를 실행할 때 사용한 runserver는 개발용으로 실행하는 명령어라서 불안정합니다. (불안정하긴 해도 사실 접속이 많이 없기 때문에 이렇게 놔둬도 되긴 합니다..) 그래서 진짜 웹서비스처럼 만들려면 앞에 아파치나 nginx 같은 웹서버가 필요합니다. 도메인도 무료 도메인을 사용했는데, aws에서 제공하는 route53을 사용하면 원하는 도메인을 만들 수 있습니다. (유료긴 하지만요)

 

여기까지만 해도 포트폴리오 사이트로 충분하지만, 조금 더 웹서비스를 만져봤다는 말을 할 수 있도록, 다음 시간에는 웹서버를 띄우고 route53 사용법도 살펴보겠습니다. route53은 유료이기 때문에 하실 분만 ㅎㅎ. 아 그리고 docker이미지를 이용해서 배포하는 방식으로 바꿀 거라서, 다음 시간은 docker를 사용해 django, nginx를 띄우는 내용이 주가 될 것 같습니다.