개인 웹사이트를 만들어보려고 한다. 이것저것 개발한 것들을 git에만 남겨두기는 아까워서 실제로 돌리며 서비스를 해볼까한다.
구축환경은 구름IDE에서 django 웹 프레임워크를 기반으로 만들어보려고 한다.
웹구축에 대해 정확하게 아는 게 아니기 때문에 완벽히 설계해서 구축하는 것이 아니라 일단 돌아가게 만들고 문제가 있을때마다 수정하는 방식으로..
사실 django 관련한 레퍼런스는 차고 넘쳐나기 때문에 이론을 배울 곳은 많지만.. 나는 이론보단 일단 돌아가는 게 목표이다.
문제생기면 나중에 수정하면 되겠지..
개발환경은 구름IDE에서 컨테이너를 생성하고 django 프로젝트를 만들었다.
서비스할게 많아지면 유료나 다른 개발환경으로 가야하겠지만 일단 구름ide에서 시작했다.
구름IDE에서 컨테이너 생성하기
www.goorm.io/ > IDE > 대시보드 > 새 컨테이너 생성
goorm
구름은 클라우드 기술을 이용하여 누구나 코딩을 배우고, 실력을 평가하고, 소프트웨어를 개발할 수 있는 클라우드 소프트웨어 생태계입니다.
www.goorm.io
1) 소프트웨어 스택에 django를 넣으면 편하게 프로젝트를 만들 수 있지만 그냥 blank로 지정했다.
공부할 겸 기본부터 차근차근 구축하기로 했다.
1-1) 구름ide은 브라우저에서 개발을 할 수도 있지만 ssh로 접근하여 개발하는 것도 가능하다.
나중에 되면 브라우저가 편하겠지만 오늘은 개발환경만 구축할 거기 때문에 ssh로 작업을 진행한다.
* 굳이 ssh로 하지 않고 브라우저에서 해도 상관없다!
구름ide ssh 설정방법
- 컨테이너 실행 후 왼쪽상단 [컨테이너] - [ssh 설정]에서 명령어, 비밀번호를 볼 수 있다.(비밀번호는 발급을 해야한다)
- 터미널 혹은 ssh 툴 실행 후 위에서 본 [명령어] 복붙하면 비밀번호 입력창이 뜬다 - 비밀번호도 복붙해주면 접속을 할 수 있다. (중간에 fingerprint 어쩌구저쩌구 나오면 그냥 yes를 입력해주면된다.)
- ssh로 접속 시 기본 폴더와 브라우저에서 보이는 기본 폴더와 다르다. 이왕이면 브라우저에서 사용할 수 있게 작업폴더를 변경해주자
cd /workspace/[컨테이너이름]
구름ide 브라우저에서 터미널
2) 컨테이너가 생성되면 django를 설치하자!
* 소프트웨어 스택을 blank로 하면 pip3가 없다.. pip3도 설치해주자
** django는 파이썬 3 버전에 설치하였다. django는 파이썬 2.7 버전에서 동작하는 릴리즈 버전이 있지만 앞으로 지원이 종료될 예정이라고 하니 파이썬 3 버전에서 django를 설치하는 것이 마음에 편할 거 같다.
django 설치하기
root@goorm:/workspace/windyroom# python3 --version Python 3.6.8 root@goorm:/workspace/windyroom# pip3 install django -bash: pip3: 명령어를 찾을 수 없음 root@goorm:/workspace/windyroom# apt-get install python3-pip root@goorm:/workspace/windyroom# pip3 install django Collecting django ------------------------------------------------ root@goorm:/workspace/windyroom# django-admin startproject funky root@goorm:/workspace/windyroom# ls funky |
3) django 프로젝트에서 앱을 생성해주자 - 파이썬 3버전에 설치하였으므로 python3로 실행한다.
꼭 있어야할 거 같은 이름인 home과 common을 만들어두었다.. 언제가는 쓰이겠지
2)에서 만든 프로젝트 폴더 안에서 실행해주자!
$ python3 manage.py startapp [app] root@goorm:/workspace/windyroom# cd funky root@goorm:/workspace/windyroom/funky# python3 manage.py startapp common |
4) 여기까지 해주면 프로젝트의 구조는 아래와 같다.
root@goorm:/workspace/windyroom/funky# ls common funky home manage.py root@goorm:/workspace/windyroom/funky# apt-get install tree ----------------------------------------------------- root@goorm:/workspace/windyroom/funky# tree -a . . ├── common │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── funky │ ├── __init__.py │ ├── __pycache__ │ │ ├── __init__.cpython-36.pyc │ │ └── settings.cpython-36.pyc │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── home │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py └── manage.py
6 directories, 22 files |
5) 앱을 추가했으니 약간의 세팅이 필요하다.
funky 프로젝트에 있는 funky 폴더로 이동 후 settings.py 로 연다. 4)의 tree의 빨간색 파일
- settings.py에 INSTALLED_APPS에 아래와 같이 추가해준다.
*3)에서 생성한 app이름을 가지고 '[app이름].apps.[app이름(첫글자는 대문자)]Config'로 추가해주면 된다.
# funky/settings.py
# Application definition
INSTALLED_APPS = [
'common.apps.CommonConfig',
'home.apps.HomeConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
서버에 접속도 허용해야한다. 모두 허용하게 ALLOWED_HOSTS를 아래와 같이 수정해주자!
# funky/settings.py ALLOWED_HOSTS = ["*"]
다음, 3)에서 생성한 각각의 app 폴더에 urls.py를 생성해주어야 한다. 그냥 funky에 있는 파일을 복사해주어도 된다.
root@goorm:/workspace/windyroom/funky/funky# cp urls.py ../home/ root@goorm:/workspace/windyroom/funky/funky# cd .. . ├── common │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py ├── funky │ ├── __init__.py │ ├── __pycache__ │ │ ├── __init__.cpython-36.pyc │ │ └── settings.cpython-36.pyc │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── home │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ ├── urls.py │ └── views.py └── manage.py
6 directories, 24 files |
6) hello world를 해보자!
6-1) urls.py 파일
간단하게 살펴보면, 각각의 app에는 urls.py와 views.py가 존재한다. - funky 폴더에는 없지만 views.py를 만들고 사용해도 된다.
- urls.py 파일은 웹사이트 접속 후 url에 따라 기능을 파싱?해주는 역할을 한다.
- views.py는 urls.py에서 파싱된 함수가 있는 파일이다.
즉, 웹사이트에 접속하면 서버는 urls.py를 보고 어떤 함수를 실행할 지 판단 후 views.py에 있는 함수를 실행하여 반환한다.
사실 설명보단 직접해보는 게 이해가 빠르다. 나도 설명을 어떻게 해야할 지 모르겠다.
먼저, funky/urls.py 를 작업해준다.
~~~~.com/[??]에서 ??가 home이나 common이면 여기 말고 home, common 폴더(app)의 urls.py를 참고하라는 말이다.
#funky/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('common/', include('common.urls')),
path('home/', include('home.urls')),
]
그 다음, home, common 폴더의 urls.py로 수정해준다. - 아래 예시는 home/urls.py 이다.
~~~~.com/home/~이라는 url이 오면 views.py에 있는 fn_main을 실행하라는 이야기이다.
- common/urls.py 에도 아래와 같이 수정해주자(단, from home import views 대신 from common import views)로 변경해야 한다.)
# home/urls.py
from django.urls import path
from home import views # from [app 폴더 이름]
urlpatterns = [
path('', views.fn_main, name='main'),
]
6-2) views.py 파일
views.py는 urls.py에서 온 요청에 따라 수행할 함수가 있다.
간단하게 요청에 따라 hello world를 반환할 수 있게 함수를 만들어주자
csrf_exempt는 외부에서 오는 요청을 처리하는 식별자? 권한? 뭐라고 해야할 지 모르겠지만, @csrf_exempt가 선언된 함수 앞에 있어야 request를 처리할 수 있다.
- common/views.py도 동일하게 수정해주자
# home/views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.
@csrf_exempt
def fn_main(request):
return HttpResponse("Hello, world. I am home.")
7) 서버에 접속하자!
서버 실행은 아래와 같이 명령어를 치면 된다. funky 폴더(프로젝트 폴더)에서 실행해주자!
WARNINGS: 는 무시해주자 나중에 수정하면 되겠지...
참고로 8000번 포트로 실행했는데 본인이 원하는 것으로 하면 되기는 한다.(다만 충돌만 안나게)
root@goorm:/workspace/windyroom/funky# python3 manage.py migrate System check identified some issues:
WARNINGS: ?: (2_0.W001) Your URL pattern '^$' [name='main'] has a route that contains '(?P<', begins with a '^', or ends with a '$'. This was likely an oversight when migrating to django.urls.path(). ?: (2_0.W001) Your URL pattern '^$' [name='main'] has a route that contains '(?P<', begins with a '^', or ends with a '$'. This was likely an oversight when migrating to django.urls.path(). Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying auth.0012_alter_user_first_name_max_length... OK Applying sessions.0001_initial... OK
root@goorm:/workspace/windyroom/funky# python3 manage.py runserver 0.0.0.0:8000 Watching for file changes with StatReloader Performing system checks...
System check identified some issues:
WARNINGS:
System check identified 2 issues (0 silenced). -------------------------------------------------------------------------------------------------------------- Django version 3.1.5, using settings 'funky.settings' Starting development server at http://0.0.0.0:8000/ Quit the server with CONTROL-C. |
이제 웹브라우저 접속을 위해 구름ide에 약간의 세팅이 필요하다.
포트포워딩을 통해 만든 웹사이트에 접속해보자 [컨테이너]-[포트포워딩 설정] 클릭 후
내부 포트에 [python3 manage.py runserver 0.0.0.0:8000]에서 설정한 포트 번호를 적어준 뒤 등록을 눌러준다.
그 다음 명령어 쪽 ip와 포트를 복사 후 브라우저 주소창에 입력해주면 된다.
hello world 대신에 이상한 화면이 떳다면 정상적이다.
urls.py에서 ~.com/home이나 ~.com/common 인 경우는 처리해주었지만, ~.com로만 오면 어떤 처리를 해 줄 지 지정해주지 않아서이다.
즉, 메인페이지가 나와야하는데 아직 메인페이지에 대한 처리를 지정해주지 않아 에러가 발생하는 것이다. 이 부분은 다음 시간에 개발하는 것으로 하고 오늘은 home과 common에서 hello world를 봐야된다.
위에서 접속한 주소 뒤에 /home/이나 /common/을 붙여서 접속해보면 아래와 같이 나온다. 성공!
만든 웹사이트에 접속이 되었으면 이제 이 웹사이트 기능만 넣어주면 된다. views.py에 필요한 기능을 넣고, urls.py에서 해당 기능을 실행하기 위한 url을 지정해주고, 너무 복잡해진다싶으면 app을 추가해주면 된다.
** 참고로 구름ide에서 ssh나 포트포워딩 주소는 컨테이너를 킬때마다 달라진다. 매번 컨테이너를 킬때마다 ssh 접속 설정과 포트포워딩 주소(웹사이트 주소)를 새로 받아와야하지만 공짜니까!