장고 - 프론트엔드, 백엔드 AWS 배포

  • 이번 포스트에서는 백엔드 코드를 AWS에 배포하는 방법 외 프론트엔드 코드를 AWS에 배포하는 방법에 대해서 알아볼 것이다.

EC2에 웹서버 설정

1. EC2에 SSH로 접속

1
$ ssh -i ~/.ssh/[키 페어 파일 이름 .pem] ubuntu@[도메인 주소]

2. 패키지 최신 업데이트

1
$ sudo apt-get update

3. Nginx 설치

1
$ sudo apt-get install nginx

4. 서버 잘 동작하고 있는지 상태 확인

1
$ systemctl status nginx

5. EC2 인스턴스 주소로 접속하여 웹 서버 잘 동작하는지 확인

  • 웹 브라우저에 퍼블릭 DNS 주소 혹은 IP 주소 입력
  • Welcome to nginx! 라는 문구 표시되면 정상 동작중인 상태

6. Nginx 사용하면 static web server 생성하여 사용 가능

  • Nginx 사용할 때는 한 서버 컴퓨터에서 여러 사이트를 운영할 수 있다.

  • 사이트 별 설정파일 생성하여 수정 필요

    1
    2
    $ sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/front
    $ sudo vim /etc/nginx/sites-available/front
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    server {
        listen 80; 
        listen [::]:80;

        root /var/www/front
        index index.html index.htm index.nginx-debian.html;
        server_name [퍼블릭 DNS 주소 혹은 IP 입력]
        location / {
                try_files $uri $uri/ =404;
        }
    }

7. 설정 파일이 올바른지 확인(문법적 오류인지, 이 옵션이 정상 작동되는건지 확인)

1
$ sudo nginx -t

8. 해당 설정파일을 Nginx에 활성화

1
$ sudo ln -s /etc/nginx/sites-available/front /etc/nginx/sites-enabled/

9. /var/www 경로로 이동하여 front 폴더 생성

1
$ sudo mkdir /var/www/front

10. 브라우저 화면에 표시될 내용 작성

1
$ sudo vim /var/www/front/index.html
1
2
3
4
5
<html>
    <body>
        hello nginx!
    </body>
</html>

11. Nginx 재실행

1
sudo systemctl restart nginx
  • 설치를 마치면 EC2 인스턴스 재시작해도 자동으로 Nginx가 실행되도록 등록되어 있다.
  • 아래 명령어 참고
    • $ sudo systemctl stop nginx
    • $ sudo systemctl start nginx
    • $ sudo systemctl restart nginx
    • $ sudo systemctl status nginx

12. 웹 브라우저에 퍼블릭 DNS 혹은 IP 주소 입력

  • index.html에 작성한 내용이 정상 표시되는지 확인

13. 고정 IP 설정

  • EC2 > 네트워크 및 보안
  • 탄력적 IP 선택
  • 새 주소 할당 (새 주소 할당받고 인스턴스 선택안하면 과금될 수 있다.)
  • 목록에 있는 IP 우측 클릭
  • 주소 연결 > 인스턴스 선택 > 연결
  • IP 목록에서 Name 입력
  • IP 목록에 인스턴스 설정 확인
  • EC2 인스턴스 정보에서 탄력적 IP 표시되는지 확인

14. Route 53 이용하여 도메인 연결

  • 도메인 레코드 생성
  • 레코드 이름 설정
  • 탄력적 IP 입력
  • 생성

15. 도메인 이름 변경되었으므로, 사이트 설정파일 수정

1
$ sudo vim /etc/nginx/sites-available/front
1
2
...
server_name [고정 IP 설정한 도메인 이름 입력]

16. Nginx 재실행

1
$ sudo systemctl restart nginx

17. 웹 브라우저에 도메인 주소 입력하여 정상 작동하는지 확인


EC2에 장고 서버 연동

1. 장고를 위한 계정 추가

1
$ sudo useradd -g www-data -b /home -m -s /bin/bash django

2. 소스 코드 업로드할 폴더 생성

1
sudo mkdir -p /var/www/django

3. 소스 코드 폴더의 소유자 변경

1
2
$ sudo chown -R django:www-data /var/www/django
$ sudo chown -R django:www-data /var/www/front

4. 파일 업로드를 위해 ubuntu 계정을 www-data 그룹에 추가

1
$ sudo usermod -a -G www-data ubuntu

5. 소스 코드 폴더에 그룹 쓰기 권한 부여

1
2
$ sudo chmod -R g+w /var/www/django
$ sudo chmod -R g+w /var/www/front

6. 파이썬 관련 패키지 설치

1
$ sudo apt-get install python3-dev python3-venv python3-pip

7. 소스 코드 폴더 밑에 파이썬 가상환경 생성

1
2
$ pip3 install virtualenv
$ sudo python3 - m virtualenv /var/www/django/venv

8. 관리자 모드로 변경

1
$ sudo -s

9. 소스 코드 폴더에서 가상환경 활성화

1
2
$ cd /var/www/django
$ source venv/bin/activate

10. 가상환경에 장고 설치

1
$ pip install django

11. 장고 프로젝트 생성 및 settings.py 설정

1
2
3
$ django-admin startproject config .
$ cd config
$ vi settings.py
1
2
...
ALLOWED_HOST = ['*']

12. migrate 및 runserver 실행하여 django 연결되었는지 확인

1
2
$ python manage.py migrate
$ python manage.py runserver 0:8000

13. WSGI 모듈 중 하나인 uwsgi 설치

1
$ pip install uwsgi

14. uwsgi 잘 동작하는지 확인

1
$ uwsgi --http :8000 --home /var/www/django/venv/ --chdir /var/www/django/ --module config.wsgi

15. 관련 폴더 생성 및 설정(run, logs 폴더 생성)

1
$ sudo mkdir run logs

16. 폴더 소유권 변경

1
2
$ sudo chown django:www-data run
$ sudo chown django:www-data logs

17. ini 폴더 생성

1
$ sudo mkdir ini

18. ini 폴더 안에 uwsgi.ini 파일 생성

1
$ sudo vim ini/uwsgi.ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[uwsgi]
uid = django
base = /var/www/django

home = %(base)/venv
chdir = %(base)
module = config.wsgi:application
env = DJANGO_SETTINGS_MODULE=config.settings

master = true
processes = 5

socket = %(base)/run/uwsgi.sock
logto = %(base)/logs/uwsgi.log
chown-socket = %(uid):www-data
chmod-socket = 660
vacuum = true
~
~

19. uwsgi.service 파일 생성

1
$ sudo vim /etc/systemd/system/uwsgi.service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[Unit]
Description=uWSGI Emperor service

[Service]
ExecStart=/var/www/django/venv/bin/uwsgi --emperor /var/www/django/ini
User=django
Group=www-data
Restart=on-failure
KillSignal=SIGQUIT
Type=notify
NotifyAccess=all
StandardError=syslog

[Install]
WantedBy=multi-user.target
~
~

20. uwsgi.service 시작하고 시작프로그램으로 등록

1
2
$ sudo systemctl start uwsgi
$ sudo systemctl enable uwsgi

21. 기존 static web 서버에서 장고 애플리케이션 구동하기 위해 사이트 설정 파일 변경

1
$ sudo vim /etc/nginx/sites-available/front
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
upstream django {
    server unix:/var/www/django/run/uwsgi.sock;
}
server {
    listen 80;
    charset utf-8;
    access_log /var/www/django/logs/access.log;
    error_log /var/www/django/logs/error.log;
    server_name [도메인 주소];

    location = /favicon.ico { access_log off; log_not_found off; }

    location / {
        include  /etc/nginx/uwsgi_params;
        uwsgi_pass  django;
    }
}

22. static web 소스코드 및 django 소스코드 파일 생성

  • Filezilla 사용하여 /var/www/front, /var/www/django에 각 소스코드 복사

23. 소스 코드가 있는 폴더의 소유자와 권한 변경

1
2
3
4
5
$ sudo chown -R django:www-data /var/www/django
$ sudo chmod -R g+w /var/www/django
$ sudo chown -R django:www-data /var/www/front
$ sudo chmod -R g+w /var/www/front
# -R : Recursive 옵션; 하위폴더까지 계속 반복해서 적용

24. 소스 코드 파일 수정되었으므로, uwsgi 재실행

1
$ sudo systemctl restart uwsgi

25. 웹 브라우저 접속하여 사이트 구동여부 확인

Posted