[웹개발] 웹서비스 런칭

Sohyun An·2021년 10월 31일
0

SpartaCodingClub

목록 보기
18/18

💡 웹서비스 런칭 기본 개념

  • 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜 봅시다.
  • 언제나 요청에 응답하려면,
    1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
    2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야해요.
  • 서버는 그냥 컴퓨터입니다. 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있습니다.
  • 우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 겁니다.
  • 사실 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있어요. 우리가 아는 URL 은 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소를 알파벳으로 바꾼 거에요. 이렇게 변환해주는 시스템을 DNS (Domain Name System) 라고 합니다.

IP 주소 (IP): 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소라고 생각하면 됩니다. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호입니다. 서버는 하나의 주소를 가지고 있습니다.
포트 (port): 하나의 IP에 여러 포트가 있습니다. 하나의 포트에 하나의 프로그램을 실행시킬 수 있습니다.

💡 AWS 서버 구매하기

AWS EC2 서버 구매하기

EC2 콘솔페이지 (링크텍스트)로 이동하여 다음과 같은 프로세스를 거치면 됩니다.





코드를 입력하세요

AWS EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)

대상 인스턴스에 마우스 우클릭 > '인스턴스 상태' 를 클릭합니다. 중지 또는 종료 중 하나를 클릭하면 명령을 실행합니다.

AWS EC2 서버 접속하는 방법

SSH(Secure Shell Protocol)

  • 다른 컴퓨터에 접속할 때 쓰는 프로그램입니다. 다른 것들 보다 보안이 상대적으로 뛰어납니다.
  • 접속할 컴퓨터가 22번 포트가 열려있어야 접속 가능합니다. AWS EC2의 경우, 이미 22번 포트가 열려있습니다. 확인해볼까요?

Mac은 ssh가 있어서, 명령어로 바로 접근 가능한데요. 우선 터미널을 열고 방금 받은 내 Keypair의 접근 권한을 바꿔주어야 합니다.

sudo chmod 400 받은키페어를끌어다놓기 

SSH로 접속합니다.

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피

아래와 같은 리눅스 명령어로 리눅스 OS에 익숙해지는 것이 좋습니다.

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

💡 Filezilla

  • 파일질라 실행, 다음과 같이 설정
  • 정보들을 입력하고, ok 누르면 서버의 파일들을 볼 수 있음
    (Host: 내 EC2서버의 ip // User: ubuntu 로 입력)
  • 마우스로 드래그 해서 파일을 업로드/다운로드하면 됩니다!
    (자, 그럼 이제 간단한 파이썬 파일을 하나 만들어서 업로드 해볼까요?)

💡 서버 환경 세팅

우리는 지금 막! 컴퓨터를 구매한 상태예요. 여기에 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리하답니다.
그 명령어들을 모아 놓은 코드(파일명: initial_ec2.sh)는 다음과 같습니다.

# UTC to KST
sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
pip3 --version
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

# MongoDB - install
wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
sudo apt-get update
sudo apt-get install -y mongodb-org

sudo mkdir -p /data/db

# MongoDB - run
sudo service mongod start
sleep 7
netstat -tnlp

# MongoDB set user, set conf file
mongo admin --eval 'db.createUser({user: "test", pwd: "test", roles:["root"]});'
sudo sh -c 'echo "security:\n  authorization: enabled" >> /etc/mongod.conf'
sudo sed -i "s,\\(^[[:blank:]]*bindIp:\\) .*,\\1 0.0.0.0," /etc/mongod.conf

sudo service mongod stop
sudo service mongod start
sleep 5
netstat -tnlp

자 이제는 다음과 같이 명령하면 python file을 실행할 수 있습니다.

python [test.py](http://test1.py)

[한 걸음 더] 서버 환경 세팅

1. 한국시간 세팅

EC2 컴퓨터의 시간대를 한국으로 맞추는 명령어

sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

2. 파이썬 (python3 → python)

python3 명령어를 python으로 사용할 수 있게 하는 명령어

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

3. pip (pip3 → pip)

1) pip3 설치
2) pip3 명령어를 pip으로 사용할 수 있게 하는 명령어

# pip3 설치
sudo apt-get update
sudo apt-get install -y python3-pip

# pip3 대신 pip 라고 입력하기 위한 명령어
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

4. mongoDB 설치

    1. mongoDB 설치 코드
wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

sudo apt-get update

sudo apt-get install -y mongodb-org
    1. mongoDB 실행하기
# 실행. 아무 반응이 없으면, 잘 실행된 것!
# 리눅스는 보통 잘 되면 아무것도 안나와요!^^;
sudo service mongod start
    1. mongoDB 접속 계정 생성하기
      =우리가 만든 mongoDB를 외부에 열어주기 전에, 접속에 필요한 아이디와 비밀번호를 세팅해봅시다! (설정 안하면 누구나 DB정보를 볼 수 있다는..!)
mongo

좌측에 '>' 표시가 나오면 성공적으로 MongoDB에 접속한 것입니다! 다음 명령어를 순차적으로 입력해주세요.
test, test 자리에 내가 넣고 싶은 아이디/비밀번호를 넣으면 됩니다. (영어로..!)

# admin으로 계정 바꾸기
use admin;

# 계정 생성하기
db.createUser({user: "test", pwd: "test", roles:["root"]});

아래와 같은 화면을 보면 완성!

# 나오기
exit

# MongoDB 재시작
sudo service mongod restart
    1. mongoDB를 외부에 열어주기
      mongoDB는 디폴트로 내부에서만 접속을 허용하고 있습니다. 이 작업은 외부에서 접근이 가능하도록 잠금을 풀어주는 것입니다.
      리눅스 자체 에디터(고급 메모장 정도로 생각!)인 Vim이 등장합니다.
      a 를 눌러야 입력 모드가 되고, :wq 를 눌러야 저장하고 나올 수 있습니다.
sudo vi /etc/mongod.conf

# sudo: 관리자(SuperUser) 권한으로 다음을 실행
# => "관리자 권한으로 /etc 폴더 아래 mongod.conf 파일을 Vim으로 켜줘!"라는 뜻입니다

위 명령어를 실행하신 후, 아래 방향 화살 키를 누르시면 다음과 같은 내용이 보입니다.

# 입력 모드 전환
i

# 내용 저장하고 에디터 종료하기. esc 누르고 다음 입력.
:wq

# 재시작
sudo service mongod restart
    1. Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속하기
      - 좌측 상단 빨간 상자 내 아이콘을 클릭합니다.

      - Create 클릭!

      - 접속 정보를 세팅합니다.

      - 상단 Authentication 탭을 클릭합니다.
      1. Perform authentication 체크박스를 클릭합니다.
      2. 생성한 계정의 아이디와 비밀번호를 입력하고, 'save'를 클릭합니다.

5. 포트포워딩 (80포트 → 5000포트)

80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

💡 Flask 서버 실행해보기

  • filezilla를 통해 EC2에 업로드한 다음, 실행해봅니다.
    이 때, pip로 패키지를 설치하여야 에러가 나지 않습니다.
pip install flask
  • 이후, AWS에서 5000포트를 열어주어야 합니다.
    EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도,
    AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있습니다.
    → 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 합니다.
    일단, EC2 관리 콘솔로 들어갑니다. 그리고 보안그룹(영문: Security Group)을 눌러 들어갑니다. 여기선 launch-wizard-1 이라고 쓰여 있네요

    해당 보안 그룹을 클릭합니다.

    Edit inbound rules를 선택합니다.

    세 가지 포트를 추가해봅니다.

    → 80포트: HTTP 접속을 위한 기본포트
    → 5000포트: flask 기본포트
    → 27017포트: 외부에서 mongoDB 접속을 하기위한 포트

  • 서버 실행이 되면, 크롬에서 접속을 해봅니다.
크롬 브라우저 창에 아래와 같이 입력합니다.

http://[내 EC2 IP]:5000/

💡 원페이지쇼핑몰 업로드해보기

Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속해봅시다.

  • 좌측 상단 빨간 상자 내 아이콘을 클릭합니다.
  • Create 클릭!
  • 접속 정보를 세팅합니다.
  • 상단 Authentication 탭을 클릭합니다.
  1. Perform authentication 체크박스를 클릭합니다.
  2. 생성한 계정의 아이디와 비밀번호를 입력하고, 'save'를 클릭합니다.

원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드해봅니다.
그 전에! MongoDB 접속 세팅을 바꿔주세요!
AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 우리의 pymongo에도 아이디와 비밀번호를 입력해주어야 합니다! 그래야 pymongo가 올바르게 DB에 접근할 수 있습니다.
app.py 파일을 열어서,
아래 처럼 가운데 한 줄을 바꿔주세요!

client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)

파일질라에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드합니다

💡 완성본 실행하기

  • pymongo 패키지를 설치하기
# 설치하기
pip install pymongo
  • 실행하려고 시도하기
# home 디렉토리로 이동
cd ~

# 해당 폴더로 이동해서 아래 코드를 실행합니다.
python app.py
  • 브라우저에서 접속하기
http://내AWS아이피:5000/

💡 포트포워딩

포트 번호를 떼고 접속해보는 것을 해봅시다.

  • 지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
  • http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
  • 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
  • 리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.

💡 nohup

Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있습니다. 그러나 우리가 원격접속을 끊어도, 서버는 계속 동작해야겠죠?

  • 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다
nohup python app.py &
  • 서버 종료하기 - 강제종료하는 방법
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]
  • 다시 켜기
nohup python app.py &

SSH 접속을 종료한 뒤, 브라우저로 접속해도 연결이 잘 됩니다.

💡 도메인 구입하기

  • 도메인을 구매한다는 것은,
    네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것입니다. 한국 또는 글로벌 업체 어디든 상관 없지만, 우리는 한국의 '가비아'라는 회사에서 구입해보겠습니다.
  • 구입 후 아래 화면을 띄워주세요 링크텍스트 (DNS 관리툴 클릭)

    (도메인 연결 클릭)

    (DNS 설정 클릭)

    (호스트 이름에 @, IP주소에 IP주소를 입력합니다)


    네임서버에 내 도메인-IP가 매칭되는 시간이 필요합니다.

내 IP주소로 지금 flask 서버가 잘 돌고 있나요? 먼저 확인해봅니다.

http://내AWS아이피/

약간의 시간을 가진 후, 내 도메인으로 접근하면, 접속이 됩니다.

http://내도메인/

💡 og 태그

내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록,
미리 꾸며주는 og 태그를 만들어 봅시다.

static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 head 태그 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있습니다.
1. "내 사이트의 제목" 입력하기
2. "보고 있는 페이지의 내용 요약" 입력하기
3. 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800x400인 이미지를 구글에서 검색!)

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
profile
Love studying

0개의 댓글