[React & Flask] Azure 에 배포해보기

엘리스 튜터님에게 받은 엘리스전용 애저 도메인과 비밀번호가 있습니다.

우리는 이 도메인과 비밀번호로 애저 가상머신에 접속할 수 있습니다.

바로 시작해봅시다.

우선 터미널을 켭니다.

터미널 사진

누가봐도 개발자들만 만질 것 같은 이렇게 검게 생긴 터미널 창을 켭니다.

여기에 ssh elice@도메인 을 입력합니다. 그러면

'너는 정말 연결을 원하느냐?!' 라는 질문을 할겁니다.

당연히 yes 해야겠죠?

 

그러면 password를 입력하라고 할겁니다.

비밀번호 입력

여기에다 비밀번호를 입력합니다.

비밀번호를 입력해도 아무것도 안뜰겁니다.

보안을 위해서 그렇게 설정해놨기 때문이죠ㅎㅎ

그치만 입력하는 내용은 그대로 입력이 되고 있으니까 걱정말고 오타없이 정확히 비밀번호를 입력해주세요. (신중하게 입력해야겠죠?)

 

접속 성공

자, 터미널에 이렇게 뜨고나면 가상머신에 성공적으로 접속했습니다. (박수 !!)

 

이제 무엇을 할 것이냐?

배포를 위해 가상머신에 환경을 설치해야합니다.

다음 명령어들을 입력해줍니다.

 

sudo apt update

sudo apt install npm -y

sudo apt install python3-pip -y

sudo apt install nginx -y

 

간단하게 설명을 드리자면 위에부터 순서대로

리눅스 패키지 관리자 업데이트, npm 설치, 파이썬 설치, nginx 설치입니다.

 

이제는 우리가 했던 프로젝트를 받아와 봅시다.

깃 클론을 합시다.

 

git clone 깃랩 주소

 

아마 username과 password를 입력하라고 할거에요.

여러분의 깃랩 이메일과 비밀번호를 입력하면 됩니다.

 

성공적으로 클론이 되었다면

git clone 이후

ls 라는 명령어를 입력했을 때 새로운 디렉토리 하나가 만들어진 것을 볼 수 있습니다.

저는 jeongheejae 라는 디렉토리가 생겼네요.

cd jeongheejae 입력해서 들어가 줍시다.

이 안에 여러분들께서 그동안 열심히 개발해온 내용들이 담겨있습니다.

 

자 그럼~ 먼저 리액트를 볼까요?

다들 디렉토리 구조가 다 다를겁니다.

cd [directory] : 해당 directory 로 접속한다.

ls : 현재 directory안에 있는 파일들의 목록을 보여준다.

위 명령어를 이용해서 package.json 이 있는 위치까지 이동합니다.

 

그리고 나서 다음 명령어를 순서대로 입력해줍니다.

 

npm install

npm run build

 

리액트 배포용 파일을 생성하는 과정입니다.

빌드 생성이 끝났으면

 

ls 를 한번 쳐봅시다.

npm run build 이후

위 사진과 같이 build 라는 디렉토리가 생겼습니다.

 

그러면 cd build 를 입력해서 들어가봅시다.

우리는 이 build 디렉토리의 경로를 알아야합니다.

pwd 를 입력하면 현재 위치의 경로가 출력됩니다.

저는 /home/elice/jeongheejae/Client/build 네요.

이 경로를 그대로 복사해서 잘 가지고 있어야합니다. 나중에 써먹어야 되거든요.

여기까지 리액트 배포를 위한 사전 작업은 끝났습니다!

 

 

이제 여러분이 작업했던 플라스크 환경을 가상머신에 그대로 입혀주기 위한 작업을 해볼거에요.

MySQL을 쓰신다면 아래 작업을 진행해주세요.

 

sudo apt install mysql-server

 

설치 과정에서 만약 비밀번호를 설정하라는 창이 뜬다면 비밀번호를 설정해주세요.

그런 창이 안뜬다면 그냥 진행하시면 됩니다.

 

sudo systemctl start mysql

sudo systemctl enable mysql

 

만약 비밀번호를 설정했다면) sudo mysql -u root -p

비밀번호 설정을 안했다면) sudo mysql -u root

 

use mysql;

update user set plugin='mysql_native_password' where user='root';

flush privileges;

 

비밀번호 설정을 안했다면) alter user 'root'@'localhost' IDENTIFIED BY 비밀번호;

비밀번호 설정을 안했다면) flush privileges;

 

이제 데이터베이스를 만들고 테이블을 생성합니다.

어떻게 하는지 기억 나시죠..?

 

CREATE DATABASE 데이터베이스 이름;

USE 데이터베이스 이름;

CREATE TABLE 테이블 이름(

 내용 ~~~

);

 

데이터베이스를 생성하고, 테이블을 생성하세요. (물론 여러분들이 작업했던 DB랑 똑같이)

만약 Migration 을 사용하신다면 이 작업은 건너 뛰셔도 됩니다. (Migration 사용할 수준이면 알아서 잘 만드실거라 믿습니다)

 

이제는 여러분이 백엔드 작업하면서 설치했던 모든 패키지들을 설치합니다.

flask, flask-sqlalchemy, pymysql, Flask-Bcrypt 이런것들 있잖아요?

다 설치 해줍니다.

pip3 install flask flask-sqlalchemy pymysql Flask-Bcrypt

위에 있는 것들 외에도 여러 분이 작업하면서 설치했던 패키지들을 모두 설치하셔야 합니다.

 

여기까지 하면 플라스크를 실행하기 위한 준비도 끝났습니다!

 

 

이제는 24시간 우리의 리액트 서버를 운영할 수 있도록 nginx 라는 것을 다뤄보겠습니다.

아래 명령어를 순서대로 입력해줍니다.

 

cd /etc/nginx/sites-available

sudo chmod 777 default

vi default

 

그럼 아래와 같은 모양이 나옵니다. (이 부분은 저희 코치님께서 올려주신 사진을 사용했습니다. 감사히 잘쓰겠습니다 코치님..ㅎㅎ)

vim 에디터를 이용해서 파일을 수정하겠습니다.

i 를 입력하면 수정모드로 변경됩니다.

여기 /var/www/html; 부분을

이런식으로 방금 전 복사해놓은 build 의 경로로 바꿔줍니다.

그리고 몇줄 밑으로 가면 

 

location / {

    대충 무슨 영어

    try_files $uri $uri/ =404;

}

 

라고 적혀 있습니다.

이 부분을 다음과 같이 바꿉시다.

 

이 부분은 각자 커스터마이징이 필요한 부분이니 잠시 설명을 하겠습니다.

우선 저는

$uri/ 라고 적혀 있는 곳 뒤에 /index.html 을 추가로 넣었습니다.

만약 여러분이 SPA로 웹페이지를 만들었다면 / 경로 외에 다른 경로로 접근했을 때 404 Not Found Error 가 발생할 수 있습니다.

즉 여러 분이 웹페이지를 여기 저기 돌아다니다가 만약 /main 이라는 위치에서 새로고침은 한 번 누른다?! 그 순간 404 Not Found Error 가 발생합니다. 이럴 경우 404 에러 페이지로 넘어가게 되는데, 이를 방지하기 위해 작은 트릭을 사용했습니다. 에러가 발생하면 404 에러 페이지가 아니라 index.html 를 띄워라! 여러분들이 만든 SPA는 기본적으로 index.html 에서 시작하기 때문에 아마 똑같이 적어주시면 해결 될겁니다.

 

그리고 밑에

location /api {

    proxy_pass http://localhost:5000;

}

을 추가했습니다.

proxy_pass는 같은 도메인에서 경로에 따라 다른 서버에 접근하고 싶을 때 사용합니다.

예를 들어 elice.com/A 에 접속할때는 A 서버에 요청을 보내고, elice.com/B 에 접속할때는 B 서버에 요청을 보내고 싶을 때가 있을 텐데, 그런 경우 proxy_pass를 사용합니다.

 

현재 우리는 도메인 하나에 클라이언트와 서버를 모두 배포해야 하는 상황입니다.

그렇기 때문에 클라이언트를 배포하고, 서버는 백그라운드로 실행 시켜서

한 도메인 안에서 모든 리퀘스트와 리스폰스가 이루어지도록 만들어야합니다.

 

위 코드를 설명하면 이렇습니다.

"도메인 뒤에 /api 라는 주소로 요청을 보내면 http://localhost:5000; 으로 요청을 전달해라."

이렇게 하면 우리는 '도메인주소/api' 로 보내는 요청은 모두 http://localhost:5000 으로 보내서 처리할 수 있습니다.

 

--- --- ---

여기서 주의할 점 !!

위 예시대로 코드를 똑같이 쳤을때 서버가 올바르게 동작하려면

다음과 같은 조건이 필요합니다.

 

여러분들이 만들어 놓은 API 주소들 있가 있을텐데, 그 API 주소들은 모두 /api 로 시작해야합니다.

예를들어 /user 경로에 접근했을 때 로그인을 해주는 API를 만들어 놨다고 하면, 경로를 /user 가 아니라 /api/user 로 바꿔야합니다.

 

@app.route('/user')

였던 것을

@app.route('/api/user')

이렇게 바꿔야해요.

 

만약 Blueprint 를 사용하셨다면

bp = Blueprint('bp', __name__, url_prefix='/api')

이렇게 Blueprint 선언부분만 수정해주면 쉽게 해결됩니다.

 

그리고 클라이언트 측도 코드 수정이  필요하겠죠

만약 여러분이 지금까지

axios.get("http://localhost:5000/user") 이렇게 요청을 보내셨다면

이제는 axios.get(도메인주소/api/user);

이렇게 보내야합니다.

--- --- ---

 

설명이 길어졌네요...

코드 수정을 마쳤으면 ESC 키를 누르고 :wq 를 입력해서 빠져나옵니다.

 

자 이렇게 nginx 파일 수정을 완료했습니다.

sudo service nginx restart

를 입력해서 nginx 를 재시작 해줍시다.

 

그리고 이제 서버를 실행시키기만 하면 끝이에요 !!

cd ~ 를 입력하면 유저 디렉토리로 이동합니다.

app.py 가 있는 곳으로 이동해서

python3 app.py &

입력해줍니다.

 

&는 무엇이냐? 파일을 백그라운드에서 실행한다는 뜻입니다.

저렇게 하면 터미널을 종료해도 여전히 서버가 살아있습니다.

 

이제 url 창에 여러분의 도메인 주소를 입력하면 !!

배포가 끝납니다!!

축하드려요ㅎㅎ