[웹개발] 서버세팅 및 도메인 연결

https://chanytv.tistory.com/140

[웹개발] 개발 전 프로그램 설치 및 HTML,CSS 기초

https://chanytv.tistory.com/141

[웹개발] 부트스트랩 & 폰트 / Javascript 기초

https://chanytv.tistory.com/144

[웹개발] jQuery & Ajax

https://chanytv.tistory.com/146

[웹개발] 파이썬 & mongoDB

https://chanytv.tistory.com/150

[웹개발] Flask / API

[웹개발] 서버세팅 및 도메인 연결

---

5주차 대망의 마지막

 

공부를 하다보니 벌써 5주차 마지막까지 왔다. 역시 배우고자 하는 마음이 강하면 시간이 빨리가는 건가? 시간이 정말 빨리 갔다. 오히려 너무 빨리 가서 아쉬움까지 들었다. 이정도로 기초가 생겼다 할 순 없겠지만 어렵게만 느껴졌던 코딩이란 장벽을 조금 더 낮출 수 있는 과정이였던 것은 분명했다.

 

5주차엔 4주차에 했던 것을 한 번 반복을 하고 내가 만든 결과물을 서버와 도메인을 구매하여 다른 사람들도 볼 수 있게끔 셋팅하는 작업을 공부했다.

---

4주차 복습

 

마지막 복습은 '버킷리스트'를 만들어 봤다.

 

환경 구성은 아래와 같다.

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

static, templates 폴더를 만들고 app.py와 index.html 파일을 만들었다.

추가로 flask와 pymongo, dnspython을 설치해 줬다.

 

이번 복습에서는 다른 건 다 4주차에 배웠던 것이고 업로드한 내용에 번호를 부여해 차후에 해당 번호를 찾아 밑줄을 긋는 기능을 새로 배웠다. 해당 내용 아래 파일별 코드로 확인해보자.

 

index.html

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form["bucket_give"]

    count = db.bucket.find({},{'_id':False}).count()
    num = count + 1

    doc = {
        'num':num,
        'bucket': bucket_receive,
        'done':0
    }

    db.bucket.insert_one(doc)
    return jsonify({'msg':'등록 완료!'})
    
function done_bucket(num){
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {'num_give':num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

<button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button>

app.py

function save_bucket(){
    let bucket = $('#bucket').val()
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {bucket_give:bucket},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

---

서버 연결 해보기

 

서버는 AWS(아마존 웹 서비스)를 통해 구성했다. EC2를 구매하여 Ubuntu Server를 설치하고 gitbash를 이용해 서버를 실행시켜 주면 된다. EC2도 마찬가지로 환경구성을 해줘야 한다. 폴더도 만들어주고 파이썬 등도 설치를 해줘야 한다.

# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

환경 구성이 끝났다면, filezila를 통해 서버에 접속해보자. 외부 접속이 가능하게 포트번호도 열어주고 하면 이제 진짜로 내 홈페이지는 누구나 들어올 수 있게 된다. 이제 도메인까지 부여하면 완벽한 홈페이지가 된다.

'가비아'에 접속해 1년짜리 저렴한 도메인을 하나 구매한다. 이후에 가비아에 DNS설정을 해주면 도메인까지 완성 된다.

 

아래는 최종 결과물이다.