Skip to content

Latest commit

 

History

History
198 lines (147 loc) · 7.67 KB

8.myWebServer2.md

File metadata and controls

198 lines (147 loc) · 7.67 KB
Raw

내가 운영하는 웹서버 심화

이전 시간에는 외부의 컴퓨터를 빌려서 우리의 웹페이지를 서비스 하는 방법을 배웠습니다.

그럼 이번에는 우리가 가진 컴퓨터를 이용해서 홈페이지를 서비스 해보는 방법을 배워보겠습니다.

우리가 사용하는 컴퓨터를 무한정 켜놓을 수 없기 때문에

대신 작은 컴퓨터인 라즈베리파이를 이용해서 웹 서버를 호스팅 해보겠습니다.

혹시 라즈베리파이가 처음이시라면? 라즈베리파이 설치하기

1부 - 라즈베리파이로 웹서버 만들기

  • 라즈베리파이로 웹서버 만들기 1부

    1부에서는 라즈베리파이와 플라스크를 사용해서 간단하게 웹서버를 호스팅 해보겠습니다.

    먼저 라즈베리파이에서 파이썬 코드로 만들어진 프로그램을 관리해주는 python pip라는 프로그램을 설치해주어야 합니다.

    라즈베리파이의 터미널을 연 후

    $ sudo apt-get install python-pip

    명령어를 입력합니다. 그 후에는 웹 서버를 호스팅 할 수 있게해주는 Flask를 설치 합니다.

    $ sudo pip install flask

    그리고 라즈베리파이 환경에서 코딩하는것은 불편하니까 'SSH'를 사용해서 우리의 노트북에 연결한 다음 원격으로 코드를 짜 보겠습니다.

    $ sudo raspi-config

    를 터미널에 치면 환경설정 창이 나옵니다. 여기서 Advanced Options >> SSH >> Enabel >> Finish 를 선택해 SSH를 사용할 준비를합니다.

    그리고 외부 에서 라즈베리파이에 접속하기위해서는 라즈베리파이의 ip주소를 알아야하는데요, 터미널에서

    $ ifconfig

    를 통해 라즈베리파이의 주소를 알 수 있습니다. 잘 기억해 놓읍시다.

    그 다음에는 우리의 노트북으로 돌아가 크롬을 켭니다. 그리고 여기에 접속해서 Secure Shell을 다운받습니다.

    Secure Shell을 실행 하셨나요? 그러면 창이 새로 뜹니다.

    여러개의 입력창이 있을텐데요, 그 중 username@hostname or free form text가 적혀있는 곳에

    유저네임과 라즈베리파이의 아이피주소를 pi@123.456.789.123의 형태로 입력합니다.

    그럼 라즈베리파이에 등록할거냐고 물어보는데, yes 를 입력하고, 패스워드도 입력하면 됩니다.(기본 패스워드는 raspberry입니다.)

    이제 라즈베리파이와 노트북을 연결했으니 본격적으로 웹 호스팅을 해봅시다.

    Secure Shell에서 그대로 작업하시면 됩니다.

    먼저 webapp이라는 폴더를 하나 만들고 폴더로 이동하겠습니다.

    $ mkdir webapp

    $ cd webapp

    위 코드를 순서대로 터미널에 입력하셨으면 webapp폴더에 들어가있는 상태인데요, flask 호스팅을 위해 app.py라는 파이썬파일을 하나 만들어줍니다.

    $ sudo nano app.py

    그리고 'app.py'파일 안에 코드를 작성해 줍니다.

    from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello FLask!'

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

    코드를 다 적었으면 Ctrl + x >> y 를 누르고 엔터를 치시면 저장후 종료됩니다.

    그럼 서버를 열어볼까요?``

    $ python app.py

    를 쳐봅시다.

    그럼 http://0.0.0.0:5000/이라고 나오는데요, 이는 이 IP주소에서 5000번 포트를 사용한다는 말입니다.

    바로 크롬창으로 가셔서 아까 위에서 확인했던 아이피주소 123.456.789.123:5000을 주소창에 입력합니다.

    그럼 위의 코드에서 적었던 Hello Flask!라는 글자를 확인할 수 있습니다!

2부 - URL과 템플릿 적용하기

  • 라즈베리파이로 웹서버 만들기 2부

    1부에서는 라즈베리파이로 서버를 열고, 간단하게 확인을 해봤습니다.

    그럼 2부에서는 간단한 페이지를 넘어서 세부 URL을 적용하고 템플릿을 추가하는 일을 해봅시다.

    다시 app.py파일로 들어가 봅시다.

    sudo nano app.py

    저번에는 여기서 @route('/')로 메인 URL을 지정했었는데요, 이번에는 cakes라는 URL을 만들어 봅시다.py

    @app.route('/')
def index():
  return 'Hello Flask!'

@app.route('/haedal')
def cakes():
    return 'Good morning haedal!'

    기존의 코드 아래에 새로운 코드 세줄만 추가해 줍니다. 이를 통해 우리는 123.456.789.123:5000/haedal라는 홈페이지를 새로 만들었습니다.

    1부에서와 마찬가지로 Ctrl + x를 눌러 저장해주시고 $ python app.py를 통해 서버를 열어봅시다.

    주소창에 123.456.789.123:5000/haedal를 입력해보셨나요? 새로운 페이지가 나올 것입니다. 세부 주소를 정하는 것을 라우팅이라 합니다.

    자 그럼 기본을 해봤으니 이떄까지 배운것들을 적용해 볼까요?

    먼저 HTML문서 템플릿을 적용하는 방법을 알아보겠습니다.

    HTML문서들을 넣을 templates폴더를 만들고 이동하겠습니다. templates폴더는 webapp폴더 안에 있어야합니다.

    $ mkdir templates
$ cd templates

    templates폴더에 들어 오셨으면 index.html파일을 하나 만들겠습니다.

    $ sudo nano index.html

    파일을 만들었으면 작성을 해볼까요?

    <html>
    <body>
        <h1> Hello Haedal! It's templates! <h1>
    </body>
</html>

    HTML 파일을 저장한 뒤 $ cd..을 통해 다시 webapp폴더로 나옵니다.

    이제 작성한 HTML파일을 주소와 연결해야겠죠? app.py로 이동합니다.

    from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/haedal')
def cakes():
  return 'Good morning haedal!'

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

    위와 같이 app.py파일을 변경하면 메인메이지 즉, 123.456.789.123:5000페이지가 우리가 방금 만든 HTML문서의 형태로 바뀝니다.

    물론 123.456.789.123:5000/haedal페이지는 그대로 남아있습니다.

    그럼 이번에는 CSS를 적용해볼까요?

    CSS파일을 넣을 static폴더를 만들고 폴더 안으로 이동한 뒤 style.css파일까지 만들어 봅시다.

    $ mkdir static
$ cd static
$ sudo nano style.css

    body{
  background: #848484;
  color: Lime;
}

    style.css를 작성하셨으면 적용을 해야겠죠? templates폴더로 가서 index.html파일을 수정합니다.

    <html>
  <head>
    <link rel="stylesheet" href='/static/style.css' />
  </head>
  <body>
      <h1> Hello Haedal! It's templates! <h1>
  </body>
</html>

    저장을 하고 난 뒤 서버를 켜보면 메인페이지의 배경이 회색이고 글씨의 색깔이 라임색으로 바뀌어 있음을 확인할 수 있습니다!

    지금까지 라즈베리파이를 이용한 웹서버 운영하기 강의였습니다.

    이를 이용하면 외부에 서버를 맡기지 않고도 나만의 서버를 안정적으로 구축하고 관리할 수 있습니다.