728x90

프로젝트를 진행하며 거의 2주간 삽집을 해낸끝에 https적용을 끝냈다.

프로젝트간 react-drf 스택으로 연동을 했기때문에 많은 분들이 도움을 얻어갔으면 좋겠다....

처음엔 도커를 이용하여 배포를 진행하려 했으나 이번 프로젝트 완성이 뭔가 지체되고 있는 느낌이 들어서 일단은 도커를 사용하지 않고 배포 진행하였다.

 

 

(0)인증서 발급 및 방화벽 개방

sudo apt update
sudo apt install snapd
// 재부팅 필수
sudo reboot

sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot certonly --nginx

위에 해당하는 명령어를 그대로 수행하면 인증서를 발급받을수 있고 자신의 도메인을 입력해주셔야합니다.

해당 명령어를 수행하면 /etc/letsecrypt/live/도메인명/ 경로에 fullchain.pem(도메인 인증서와 Let's Encrypt Chain 인증서 결합)와 privkey.pem(개인키)가 저장됩니다.

 

aws를 이용하신다면 아래와 같이 443포트또한 개방해주셔야 합니다. 다르게 배포하시는 분들도 443포트는 반드시 개방해주셔야 합니다!!

 

(1)gunicorn 설치 

aws의 내 프로젝트 디렉터리 내부에서 가상환경내부에 gunicorn을 설치한다.

pip install gunicorn

사실 처음엔 가상환경 설치하기가 귀찮아서 서버에 라이브러리를 직접 설치하여 진행했는데 프로젝트 관리나 암튼 여러모로 가상환경은 필수니 모두 가상환경내부에 가상환경 실행후 설치를 진행해야한다.

 

(2)폴더에 권한 부여

이부분을 가장 많이 삽질했는데 추후 gunicorn 서비스 등록할때 이용할 유저와 그룹에 대해 권한을 부여해줘야한다.

sudo chown ubuntu:www-data 디렉토리명

aws에서 호스팅해서 사용하시는분들은 대다수 기본 계정이 ubuntu일테니 위와같이 해주시면 됩니다.

ls -alF

위의 명령어를 입력하면 위 사진과 같이 권한이 변경된걸 알수 있습니다. 꼭 django프로젝트가 있는 폴더에 설정해주셔야합니다.

 

(3)정적 파일 수집

기존 python manage.py runserver로 서버를 구동시키는것과는 달리 웹서버를 통해 배포할시 정적 파일을 수집해줘야합니다.

#settings.py
DEBUG=False

...

STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

위와같이 설정을 변경해준뒤

python manage.py collectstatic

명령어를 실행해주시면 프로젝트 디렉터리에 static파일이 생성된걸 확인하실수 있습니다.

 

(4)서비스 등록 스크립트 생성

/etc/systemd/system/gunicorn.service

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=ubuntu
Group=www-data
WorkingDirectory=/home/ubuntu/Getit/Server
ExecStart=/home/ubuntu/Getit/Server/venv/bin/gunicorn \
        --workers 3 \
        --bind unix:/home/ubuntu/Getit/Server/gunicorn.sock \
        apis.wsgi:application

[Install]
WantedBy=multi-user.target

이해를 돕기위해 프로젝트 디렉터리 명까지 그대로 복붙했는데 /home/ubuntu/Getit/Server 부분을 manage.py가 위치한 자신의 프로젝트 디렉터리 주소를 입력해주시면 됩니다.

 

/etc/nginx/sites-available/getit

server {
        listen 80;
        server_name 도메인;
        charset utf-8;


        location / {
                return 301 https://$host$request_uri;
        }
}

server {
        listen 443 ssl http2;
        server_name 도메인;
        charset utf-8;

        ssl_certificate /etc/letsencrypt/live/도메인/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/도메인/privkey.pem;


        location / {
                include proxy_params;
                proxy_pass http://unix:/home/ubuntu/Getit/Server/gunicorn.sock;
        }

        location /static/ {
                root /home/ubuntu/Getit/Server;
}

        location /media/ {
                root /home/ubuntu/Getit/Server;
        }

}

위에서 도메인은 자신이 구입한 도메인을 쓰면되는데 앞의 http나 https는 붙이지 말고 적어주셔야 합니다.  react와 연동할경우 리액트에서 api서버에 요청하는 그 도메인을 입력해주셔야합니다.

 

간단히 설명 하자면 기존의 http로 접근하는 부분에 대해서는 인증서가 적용된 https 즉 443포트로 요청을 가게 해뒀고 https에서는 전에 발급한 인증서를 토대로 서버를 구성한다는겁니다. 이부분은 프로젝트마다 다를수도 있긴 하지만 별다른 설정이 필요없는경우 위에서 경로만 조금씩 수정해주시면 됩니다. 제프로젝트에서 set_cookie를 사용하는 부분이 있어 nginx에서 별도의 설정이 필요할줄 알았는데 따로 설정할 필요는 없었기 때문에 보통의 상황에서는 별로 추가할 부분은 없을껍니다.

 

(5)사이트 추가

sudo ln -s /etc/nginx/sites-available/getit /etc/nginx/sites-enabled

전단계에서 생성해주었던 nginx관련 설정들을 링크를 걸어줍니다. 따로 이해가 안된다면 일단 그대로 복붙하시면됩니다. getit부분의 파일명은 본인이 설정한것으로 변경해주셔야 합니다.

 

(6)서비스 등록

gunicorn, nginx같은경우 단계를 수행할때마다 등록을 해줬어야 했는데 따로 한번에 등록해줘도 문제는 없습니다.

sudo systemctl start gunicorn
sudo systemctl enable gunicorn
sudo systemctl start nginx

위의 명령어로 서비스를 등록하고 웹서버를 실행시켜줍니다. 

문제가 있다면 서비스가 제대로 등록되었나 아래의 명령어로 확인해줍니다.

sudo systemctl status gunicorn
sudo systemctl status nginx

# 변경사항이 있을경우 무조건 아래의 명령어를 실행시켜줍니다.
sudo systemctl daemon-reload
sudo systemctl restart nginx
sudo systemctl restart gunicorn

프로젝트를 배포하며 https적용에 있어 엄청 어려움을 겪었고 2주간 삽질을하며 많은 시간을 소비했습니다. 정말 힘들게 https를 적용하게 되었는데 만약 위의 내용을 따라 했는데도 문제가 생긴다면 댓글 달아주세요!! 정성스럽게 답변해드리도록 하겠습니다. django는 다른 프레임워크에 비해 한글로된 레퍼런스가 많이 부족하니.. 서로서로 도와서 발전해야겠습니다ㅎㅎ 긴글읽어주셔서 감사합니다.

 

따로 추가 부연설명은 안하고 글을 작성하게 되었는데 좀더 튜토리얼 형식으로 하나씩 해보고 싶으시면 아래의 블로그들 참고 하시면 충분히 도움되실껍니다!

 

도움을 받은 블로그

아래의 순서로 일단 http적용하며 감을 익히고 ssl인증서 발급및 적용해보시면 됩니다!

-nginx gunicorn설정

 

EC2 + Nginx + gunicorn + Django 배포하기

gunicorn 설치 잘 작동되는지 확인 service 파일 등록 Nginx 설치 server (enables, available) 등록 시작 django debug = False로 변경 STATIC_ROOT 설정 collectstatic 실행

velog.io

 

03) Nginx, Gunicorn 배포

[TOC] # 시스템 구성 예시 * 우분투 16.04 * Django * nginx * Gunicorn 다음 설치 예제는 실제 물리서버가 아닌 vultr.com의 가상 ...

wikidocs.net

-인증서 발급 및 nginx gunicorn 스크립트 등록

 

UNLUCKY STRIKE

It's long way to the top if you wanna rock n roll

unluckystrike.com

 

 

728x90
728x90

전날 목표

GETIT 프로젝트

  • DJANGO CHANNELS를 이용한 알림 기능 구현

chnnels라는 라이브러리를 통해 알림기능 구현완료 하였다! 아직 프론트엔드와 통신테스트 진행하긴 해야하는데 일단은 클라이언트쪽에서 개발할때 기다렸다 테스트하며 수정해가야겠다.

 

이분의 블로그가 정말 큰도움이 되었다.

 

Django로 웹 소켓 통신 channel 사용하기 : 두번째

#Django #웹소켓 #channel #채널 #두개의화면을띄우기 #소켓통신 이전 포스팅 ⭐⭐ 참조해야할 블로그 ⭐...

blog.naver.com

 

인턴

  • ESXI환경에서 VM ON/OFF자동화

pyVmomi라이브러리? 암튼 vmware에서 공식적으로 추천하고있는 라이브러리를 활용하여 자동화를 성공하였다. BUT 라이선스가 ESXI내부 조회만 가능하고 기능동작의 경우에는 다른라이선스를 구입해야 한다고하여 이부분은 내일 프로젝트 공유회의때 말씀드려봐야한다.

 

GitHub - vmware/pyvmomi: VMware vSphere API Python Bindings

VMware vSphere API Python Bindings. Contribute to vmware/pyvmomi development by creating an account on GitHub.

github.com

 

 

GitHub - vmware/pyvmomi-community-samples: A place for community contributed samples for the pyVmomi library.

A place for community contributed samples for the pyVmomi library. - GitHub - vmware/pyvmomi-community-samples: A place for community contributed samples for the pyVmomi library.

github.com

위 깃허브 링크인데 시키는대로하고 

si = SmartConnectNoSSL(
        host='xx.xxx.xxx.xx',
        user='xxxxx',
        pwd='xxxx')

연결부분은 si라는 변수로 연결하여 활용하면된다. 연결하는 방법을 몰라서 엄청 애먹었는데 대부분의 코드는 samples 레포지토리에 있는 것을 참고하여 커스터마이징 하면되고 위의 코드처럼 연결하여 사용하면 된다. 이부분때문에 밤샌건 안비밀...

 

  • VM과 로컬PC 통신 및 WEBSOCKET을 통한 로그 실시간 기록
  • 웹서버 구축 및 컨트롤러 프로토타입 개발

이두가지는 묶어서 진행했다. 일단 결론은 반은 성공 반은 실패이다...

drf로 api를 만들고 controller부분에서 react로 통신을 하게 되었다. 나는 react를 사용안해봐서... 일단 사용법 익히는데 반나절을 날렸다 하하.. 벨로퍼트라는 블로그를 같이 프로젝트하는 형에게 추천받아 보게 되었다. 아주유용한 블로그다.

 

VELOPERT.LOG

  react-redux v7.1 alpha 에 드디어 Hooks 기능이 지원되었습니다. 아직 alpha 이기에 프로덕션에서 사용하기엔 아직 이르지만 한번 사용법을 알아봅시다. 정식 릴리즈 때 많은 변화가 없었으면 좋겠네

velopert.com

그리하여 간단하게 페이지를 꾸미고 rest 통신으로 데이터를 받아오는것까지는 성공했다. 그리고 socket통신으로 데이터를 받아오는것까지도 1.5일 밤새며 초췌해진 모습으로 성공해냈다... 서버단은 getit프로젝트 할때처럼 블로그참조했고, 컨트롤러부분은 websocket을 이용하여 연결하였다. 아래 블로그 참조하여 react활용했다.

 

WebSockets tutorial: How to go real-time with Node and React - LogRocket Blog

Editor’s note: This WebSockets tutorial was updated on 1/19/2021. What is WebSocket? The web has traveled a long way to support full-duplex (or two-way) communication between a client and server. This is the prime intention of the WebSocket protocol: to

blog.logrocket.com

자자.. 여기까지 들어보면 다한거 아냐?라고 할수 있다.. but 한가지 간과했던건 server부분은 스냅샷을떠서 한번 이용하고 버리고 이런식으로 진행한다. db를 영구적으로 이용하는것이아니라는것이다. 프로젝트 성격상 그래야하기 때문에 뭘 어떻게 바꿀수가 없다. 즉, 클라이언트부분에 react로 데이터를 받고 db에 저장해야 한다는건데 이부분 고려를 못해 기획방향이 좀 틀어졌다. 그리고 이부분은 전적으로 나의 큰 잘못인데 분명 내전의 인턴분이 만들어 두셨던 코드를 활용해 이번 프로젝트 큰 기능중 하나에 활용하기로 하여 예전에 테스트까지 끝내둔건데 이번에 활용을 하다보니 엄청꼬인다... 엄청나게 많이.. 인턴 초반 이기능테스트에 오래걸릴수 있다는 리드님의 말씀과는달리 한주만에 테스트가끝나서 엄청 위풍당당하게 말씀드렸었는데 지금 좀 많이 당황스럽다.. 허허....

 

푸념..

그리하여 나는 매우 멘붕상태 그자체다.. 내일 아니 오늘 오전 11시에 리드님과 프로젝트 공유회의를 진행한다. 지난주에 비해 분명 발전사항은 있었지만 가장 목표로 삼았던 핵심기능 구현에 현재 실패중이다. 블로그글을 게시하고 다시 고칠수 있을지는 모르겠지만 현재 socket통신부분도 좀 수정해야 할부분이 많아서 리소스가 있으려나 모르겠다. 현재 3일동안 5시간을 잤다 이부분이 가장큰 문제인것 같다. 집중도 안되고 그렇다고 잠을 자기에는 일정을 지키지못해서 마음이 좋지 못하다! 그래서 잠깐 나말고 다른 코린이 개발자들은 어떻게 지내나 유튜브를 봤다. 굉장히 유익하다.

다들 취업전에 현업에서 일한 경험이 좋은 스펙이 될거라고 했는데 처음엔 실력이 그만큼 늘어서 도움이 되겠구나 라고 생각했는데 요즘드는 생각은 물론 그부분도 있겠지만 신입이 가져야할 마음가짐과 습관을 미리 알수 있는 정말 좋은 기회 때문이 아닐까? 라는 생각이 든다.

 

다음 목표는 일단 중단이다. 지금은 일단 이프로젝트 진행이 가장 우선이다. 행운의 사진 투척후 내일이나 모래 til다시 작성하겠다~

728x90
728x90

새롭게 프로젝트를 시작하며 개발전 1주일간 3파트로 프로젝트 사전 준비를 하였다.

(1) 프론트, 백엔드 통신방법

(2) 기술스택 선정, 협업 노하우

(3) token, django user, 소셜로그인

위의 3가지를 사전지식으로 먼저 조사하고 시작하기로 하였다.

RESTAPI


API는 데이터베이스와 사용자 인터페이스 즉, 프론트엔드 영역 사이에서 중간다리 역할을 해준다고 생각하면 된다. 백엔드단에서 만든 JSON,XML과 같은 형식의 데이터를 URI에 나타내어 프론트엔드는 URI에 있는 데이터를 가져다 쓰는 역할을 하는것이다. RESTAPI는 HTTP Method(GET, POST, PUT, DELETE)로 표현된 행위와 /accounts/2와 같은 주소를 합쳐 GET accounts/2와 같이 나타내어 프론트엔드가 데이터를 쓰도록 도와준다. 그리고 HTTP응답을 상태코드로 나타내는데

상태 코드 의미
200 클라이언트의 요청을 정상적으로 수행함
201 클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨을 의미
400 클라이언트의 요청이 부적절할때
401 클라이언트가 인증되지 않은 상태에서 리소스를 요청할때
403 유저인증상태와 관계없이 응답하고 싶지 않은 리소스를 요청할때
405 클라이언트가 사용불가능한 리소스를 요청할때(ex.계정, 인증관련)
301 클라이언트가 요청한 리소스에 대한 URI가 변경되었을때
500 서버에 문제가 있을경우

위와 같은 상태코드로 나타낸다.

즉, RESTAPI는 

1.HTTP METHOD

2.데이터 주소

3.상태코드

크게 3가지를 통해 데이터를 표시하고 프론트가 적절하게 사용하게끔 도와주는 역할을 한다.

DjangoRESTFramework가 바로 RESTAPI인것이다.

 

 

프론트와 백엔드 연동방식(REACT-DRF)


-연동원리

1. 장고와 데이터베이스를 연결합니다.

2. 장고 ORM을 통해 데이터를 받습니다.

3. 받아온 데이터를 DjangoRESTFramework를 활용해 json객체로 만들어줍니다.

4. json객체를 특정 url에 뿌려줍니다.

5. React에서 fetch를 통해 특정 url로부터 json객체를 받아옵니다.

6. 받아온 데이터를 리액트식 문법으로 가공/사용하여 프론트엔드단을 꾸밉니다.

 

-연동방법

이를 실습으로 연결하는것은 실제 프로젝트를 진행하며 포스팅하기로 하고 8000포트의 django서버, 3000포트의 react서버를 사용하는 두프레임워크를 연결하기위한 사전준비에 대해 다뤄보려한다. 크게 2가지인것 같다.

1. django

- cors 문제를 해결하기 위해 django-cors-header 설치

-setting.py

  • INSTALLED_APPS에 ‘corsheaders’ 추가
  • MIDDLEWARE에 ‘corsheaders.middleware.CorsMiddleware’ 추가(가장 위에 놓으라는 말도 있고 CommonMiddleware 위나 밑에 놓으라는 말도 있다.)
  • CORS_ORIGIN_WHITELIST = [‘http://127.0.0.1:3000’ ,’http://localhost:8000’] 추가

2. react

app/package.json 하단에 proxy를 사용해 localhost:8000의 /api에 접속할수 있도록 해준다.

"proxy": {
	"/api": {
		"target": "http://localhost:8000"
}

위의 2가지 방식중 한가지로 설정을 하면 3000포트에서 8000포트에 있는 데이터를 자유자재로 가져올수 있다.

 

이후부터는 프론트단에서 axios통신을 사용해 fetch로 데이터를 가져와 행위에 맞게 데이터를 사용하면된다.

(프로젝트를 진행하며 계속 추가하도록 할 예정입니다.)

 

 

 

참고

 

REST API 제대로 알고 사용하기 : NHN Cloud Meetup

REST API 제대로 알고 사용하기

meetup.toast.com

 

 

프로젝트 지식(1) - Django React 연동

웹개발과 데이터 사이언스를 공부하는 공부일지

kgw7401.github.io

 

728x90

'프로젝트' 카테고리의 다른 글

프로젝트 협업시 준비  (0) 2022.01.09
프로젝트(2)기술스택 선정(feat. NginX, Redis...)  (0) 2021.09.04
협업에 관하여  (0) 2021.05.15

+ Recent posts