웹개발 플러스 1주차 개발일지

웹개발 종합반에서 배운 내용을 복습하기 때문에, 중요한 부분 위주로 정리하려고 한다.

Flask>

HTML과 MongoDB를 연동하여 서버를 만든다.
자신의 클라이언트로 자신의 서버를 들어가는 것을 Local host 개발환경이라고 한다.

서버를 구동시켜주는 편한 코드들을 모아둔 것을 Flask Framework라고 한다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return '내용'

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)

포트 5000의 localhost 서버에서 초기 페이지(route)에 '내용'을 띄운다.

Flask 서버는 두 개의 기본 폴더가 필요하다. static은 css나 img 파일을 담아둘 때 사용한다. templates는 html을 담아둔다. 이후 다음 코드를 사용하면 폴더 속 ingredients를 불러온다.

from flask import Flask, render_templates

def home():
   return render_template('index.html')

GET을 요청하는 API 코드는 다음과 같다. request, jsonify의 import도 필요하다.

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

POST를 요청하는 API 코드는 다음과 같다.

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

웹 제작 과정은 다음 순서대로다.

1. 클라이언트 서버 확인하기
2. 서버 만들기
3. 클라이언트 만들기
4. 확인하기

Time>

스크립트를 실행하는 순간의 시간을 가져오기 위해 다음 코드를 작성한다.

today = datetime.now()
mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

Image>

클라이언트로부터 이미지를 받아 서버로 전송하기 위해서는 약간의 작업이 추가로 필요하다.

우선 부트스트랩에서 이미지를 받아오는 스크립트를 작성한다.

<div class="custom-file">
                    <input type="file" class="custom-file-input" id="file">
                    <label class="custom-file-label" for="file">사진 선택하기</label>
                </div>

그리고 받아온 사진을 서버와 연결시킨다.

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)

form_data로 이미지와 함께 title과 content를 받아오기 때문에 ajax에서 요청하는 데이터도 form_data일 것이다.

app.py에서는 다음 코드를 작성한다.
받아온 사진은 '시간.확장자'로 DB에 저장된다.

extension = file.filename.split('.')[-1] //확장자

filename = f'file-{mytime}'

file = request.files["file_give"]

save_to = f'static/{filename}.{extension}'
file.save(save_to)

Server>

프로젝트에 대해 언제나 수신, 응답을 하려면 항상 서버가 켜져 있어야 하고, 서버를 구동 중인 컴퓨터가 항상 켜져 있어야 한다. 어떤 컴퓨터든 가능하기 때문에, 내 웹서비스를 대신 구동해주고 보안이 좋은 클라우드 환경의 서버를 구입하는 것이 좋다.
한번 AWS로 서버를 구동해본다.

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

아래와 같은 방법으로 서버에 원격 접속을 한다.

$ ssh -i 'pem경로' ubuntu@13.125.35.89

mkdir - 폴더 만들기
ls - 폴더 보기
cd - 들어가기

파이썬 파일을 FileZilla를 통해 AWS에 넣은 후 Git에서 다음 명령어를 쓰면 실행된다.

python3 '이름'.py

sh 파일에 권한을 주기 위해 다음 명령어를 작성한다.

sudo chmod 755 '이름'.sh
./'이름'.sh

만약 서버에 라이브러리가 없다면 Git에 다음 명령어를 쓴다.

pip install '라이브러리 이름'

서버의 password를 설정하려면 ec 실행 파일에서 수정 가능하다.
(연습에서) mongoDB를 서버에서 접속시키려면 다음의 코드를 app.py에 삽입한다.

client = MongoClient('mongodb://test:test@localhost', 27017)

CMD를 꺼도 서버를 돌아가게 하기 위해 다음 코드를 Git에 입력한다.

nohup python app.py &

서버를 끌 때는 다음 코드를 입력한다.

 ps -ef | grep 'app.py'
 kill -9 'process number'