[Nginx/Gunicorn] 웹페이지 배포하기

※ github 에 있는 인프런 클론코딩 프로젝트를 이용했습니다

※ CentOS8 가상머신 2대 사용

 

☆ 개요 정리 ☆ 

① 프론트엔드 : React → Nginx 서버에 배포

② 백엔드 : Django → Gunicorn 서버에 배포

③ 프론트엔드 & 백엔드 서버 연동

 

[ Nginx ]

※ 참고 : CentOS에서 NginX 설치, 설정하는 방법 | 써드아이시스템 기술문서 (3rdeyesys.com)

CentOS에서 NginX 설치, 설정하는 방법

※ 참고 : React.js - 배포를 위한 빌드하기 "npm run build" (tistory.com)

React.js - 배포를 위한 빌드하기 "npm run build"

 

 

● yum-utils 설치

yum install yum-utils

 

● /etc/yum.repos.d/nginx.repo  파일 설정

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

 

● Nginx 설치

yum install nginx

 

● React 코드가 담긴 프론트엔드 코드를 Nginx 서버가 설치된 가상머신으로 옮겨주기

》 FileZilla 이용

 

● 해당 폴더로 이동해 빌드하기

npm run build

》 npm 명령어가 설치되어 있지 않다면 :  yum  install  npm

build 파일 생성!

 

● /etc/nginx/conf.d/default.conf  파일 설정

server {
    listen       80;
    server_name  localhost;

	# build 까지의 파일 경로 써주기 (홈 디렉토리 경로 설정)
    root /test/build;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ = 404;
    }

	# 에러 페이지 설정
    error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /test/build;
    }

	#.htaccess 파일 접근 금지 설정
    location ~ /\.ht {
        deny  all;
    }
}

 

● Nginx 실행

#실행
systemctl start nginx
#상태 확인
systemctl status nginx

 

☞ 확인하기~ ☜

》 Nginx 서버 ip 로 접속

배포 성공~

 

[ Gunicorn ]

※ 참고 : https://velog.io/@jiyoung/GunicornNginx-%EB%A6%AC%EB%88%85%EC%8A%A4-%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Gunicorn+Nginx 리눅스 서버에서 배포하기

 

 

● Gunicorn 서버에 django 프로젝트 파일 옮기기

》 FileZilla 이용

 

● 가상환경 생성

virtualenv venv

》 virtualenv 명령어 없을 시 :  yum  install  virtualenv

 

● venv 실행

source venv/bin/activate

 

● 서버 접속 확인

python manage.py runserver [서버 ip]:8000

¿ 에러 발생 : ModuleNotFoundError: No module named 'django'

¡ 해결 ¡

pip install django

 

¿ 에러 발생 : ModuleNotFoundError: No module named 'ckeditor'

¡ 해결 ¡ 

pip install django-ckeditor --upgrade

 

● Gunicorn 설치

pip install Django gunicorn

》 Gunicorn 서버 접속 확인

gunicorn --bind [서버 ip]:8000 [wsgi.py 있는 폴더명].wsgi:application

 

● /etc/systemd/system/gunicorn.service  파일 설정

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

[Service]
User=root	#사용자
Group=root	#사용자
WorkingDirectory=/guni	#manage.py가 위치한 폴더 경로
ExecStart=/guni/venv/bin/gunicorn \	#gunicorn 경로
        --workers 3 \
        --bind unix:/guni/gunicorn.sock \
        inflearn.wsgi:application	#[wsgi.py가 위치한 폴더명].wsgi

[Install]
WantedBy=multi-user.target

 

● 실행

#실행
systemctl start gunicorn
#상태 확인
systemctl status gunicorn

 

☞ 확인하기~ ☜

》 Gunicorn 서버 (venv) : python manage.py runserver [서버 ip]:8000 명령어 실행

》 웹 브라우저 : [Gunicorn 서버 ip]:8000 으로 접속

배포 완료~

 

[ Nginx & Gunicorn 연동 ]

※ 참고 : https://seowoosung.github.io/architecture/2020/05/11/nginx.html

3. nginx 웹서버와 Gunicorn 연동 · Woosung

 

 

● Nginx 서버 파일 설정

》 /etc/nginx/nginx.conf 

events {}
http {
  server {
       listen 80;
       server_name 0.0.0.0;

       charset utf-8;

       location / {
         proxy_pass http://200.200.200.136:8000; #Gunicorn 서버 ip 작성!
       }
  }
}

 

● Nginx 새로 설정한 파일로 실행

nginx -s stop
nginx -c /etc/nginx/nginx.conf	#nginx.conf 경로

 

● Gunicorn 서버 파일 설정

》 Django 의 settings.py

ALLOWED_HOSTS = ['Nginx ip'] 
#혹은 '*' (모든 ip 접속 허용)

 

☞ 확인하기~ ☜

》 Nginx 서버 접속 시 Django의 페이지가 보임

연동 성공~

 

※ 주의사항 ※ 

》 네트워크 설정

》 방화벽 해제

》 setenforce 0

》 파일 설정 후엔 재시작