전에 만들었던 나홀로 일기장 LV2 버전을 만들어보자
이전에 추가할 것들
- 사진 선택하기
- 카드에 이미지나오게하기
나홀로일기장 Lv.2 만들기(생김새)
- 카드에 이미지 넣기, 폼 부분에 업로드 넣기
static 폴더에 이미지를 저장해서 img태그를 넣어준다
let temp_html = `<div class="card">
<img src="../static/monet.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
</div>`
$(`#card-box`).append(temp_html)img src를 card-body가 위에 넣어줬다. 지금은 저장한 이미지가 monet사진 하나뿐이라서 같은 사진으로만 나온다.
파일 업로드모양을 추가해줬는데 저 간격을 약간 벌리기 위해서
스타일 태그 안에서 이런식으로 들어간다는것을 알게되었다.
안에 > 요롷게ㅎㅎ
browse를 누르고 파일을 업로드하는데, 업로한파일의 이름이 뜨기 위해서
자바스크립트에서 파일업로드 라이브러리와 파일업로드 코드를 추가했다
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
//파일업로드 라이브러리
bsCustomFileInput.init()
//파일업로드 코드
$(document).ready(function () {
bsCustomFileInput.init()
listing()
})
//listing전에 넣어줬다.틀은 완성되었다!
- 파일 업로드 되게 만들기
file = request.files["file_give"]
save_to = 'static/mypicture.jpg'
file.save(save_to)
서버쪽 받기 코드
function posting() {
let title = $('#title').val()
let content = $("#content").val()
let file = $('#file')[0].files[0]
let form_data = new FormData()
form_data.append("file_give", file)
form_data.append("title_give", title)
form_data.append("content_give", content)
$.ajax({
type: "POST",
url: "/diary",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}클라이언트쪽 보내는 코드
파일을 업로드하는 형식은 조금 다르다. 새로운 것들이 많이 추가가 되었는데
$('#file')를 console창에 입력하면 여러가지 속성들을 품고있다.
여기서 [0]번째 즉 $('#file')[0]가 id를 붙인 태그하나가 나온다.
추가로 $('#file')[0].files를 console창에 입력하면 들어가있는 파일들의 개수가 나온다!
처음에는 0으로 나오지만 파일을 업로드해주면 length가 1개로 나온다.
이때 $('#file')[0].files[0]입력하면 방금 업로드한 파일의 정보를 가져온다.
그리고 form_data에 file, title, content를 한번에 실어서 보내준다.
파일을 보내는데 기본세팅이 최적화 되어있지 않기때문에 그냥 false로 설정해준다.
이렇게하면 파일을 업로드해주면! 업로드한 사진이 mypicture이란 파일명으로 static폴더 에 들어온다!
이제 뭘 해줘야하까?
내가 설정한 파일명으로 static폴더에 들어가는 것과, 이 사진이 업로드 되도록 설정해줘야한다.
- 파일이름 변경해주기
-
먼저 문법을 배워가자
-
f-string 문법
파이썬에서 번거롭지않게 바로바로 변수값을 출력할 수있는 문법이다. -
datetime 함수
from datetime import datetime
now = datetime.now()
print(now)
출력하면 초까지 다나오기 때문에 원하는 형태로 바꿔서 사용한다.
date_time = now.strftime("%Y-%m-%d-%H-%M-%S")
print(date_time)Y M D H M S 등 내가필요한 정보만 입력해서 사용할수있다.
- 파일이름 변경하고 저장하기
extension = file.filename.split('.')[-1]extension 안에 filename를 .을 기준으로 나누어서 위에있는것을 담아준다
예를 들면 123.jpg면 jpg를 담는다.
save_to = f'static/{filename}.{extension}'
file.save(save_to)이런식으로 새로운 이름으로 저장해준다.
- db에도 저장해준다!
doc = {
'title':title_receive,
'content':content_receive,
'file':f'{filename}.{extension}',
}
db.diary.insert_one(doc)aws 배포하기
- ec2접속
인스턴스를 생성했다.
왜 ? 배포할 때 내 컴퓨터를 항상 켜둘수없으니, 가상의 컴퓨터를 구매해서 사용하려는 것이다!
- 내가 산 컴퓨터로 원격접속을 하려면? git bash를 이용해보자
ssh -i 키페어 @ubuntu@ 인스턴스ip주소를 입력하면 원격접속이 가능하다.
- 포트 열어주기
몇가지를 열어줘야 사람들이 들어와서 우리가 주려는 정보를 받아갈수있다!
-
ec2보안그룹 설정해주기
인바운드 규칙추가를 해주면서 포트값을 추가해준다
5000은 Flask, 80은 http의 기본포트주소, 27017은 몽고db 포트넘버이다. -
EC2 세팅하기
filezilla 접속후 SFTP, HOST:인스턴스IP, PORT는 22번으로 고정하기
USER은 설정했던사용자이름과 저장했던 pem파일을 넣어주고 connect해주기
왼쪽은 내 컴퓨터이고 오른쪽은 가상컴퓨터의 환경이다.
끌어다 옮겨주면 된다!
initial_ec2를 통해서 라이브러리아 db계정설정하는 것들도 다 포함해놓았다.
(다음에 또 사용하려면 아이디 알맞게 적용해서 사용할 것!)
끌어서 오른쪽 가상컴퓨터에 넣어준다.
입력해주면서 가상컴퓨터에 파이썬에 필요한 환경들을 설치해주는 것이다.
-AWS 배포하기
몽고DB에서 새로운DB를 생성한다. ADRESS는 IP입력해주고 Authentication에서 알맞은 name과 password를 입력해주고 test후 save connect를 누르면 접속이 잘 된다.
client = MongoClient('localhost', 27017) //내 컴퓨터 디비접속
#client = MongoClient('mongodb://test:test@localhost', 27017)보통 비밀번호가 없는 내 컴퓨터에 있는 몽고디비에 접속하는 코드인데
배포시에는 암호를 설정한 몽고디비로 접속하는 코드를 입력해준다.
다시 gitbash로 돌아가서 sparta 폴더에 app.py, static, template 폴더를 옮겨준다.
app.py를 실행해준다. 근데 실행 안될거다 왜? flask, pymongo 라이브러리가 안깔렸거든~
pip install flask
pip install pymongo 를 입력하면 설치해준다!
그리고 python app.py 입력하면 실행된다
그래서 콘솔창에 아이피주소:5000을 입력하면 제대로 나온다.
과제까지 완료한 사진!
