UBUNTU - ESP3D로 서버 연동 웹사이트 만들기(4. 백앤드 서버 구축)

- 지금까지 한것에서 네이버에 이미치를 요청 하는것만으로는 더이상 진행이 불가능 합니다.

- 그 이유는 내 컴퓨터에 있는 index.html 파일을 브라우저로 연 다음 브라우저가 네이버에 이미지를 요청 하게 되면 브라우저가 연 index.html 의 위치와 이미지를 요청한 위치가 달라져서 "CORS"  위반이기 때문에 에러코드가 뜰것 입니다.

- 이를 해결 하는 여러 방법중 저는 백앤드 서버를 이용하는 방법을 통해 해결 해 보겠습니다.

- 백앤드 서버에 있는 index.html 을 내 컴퓨터에서 열고 네이버에 이미지를 요청하는 작업도 백앤드에서 수행 하게 되면 index.html 의 위치와 네이버에 요청해서 받아온 이미지의 위치도 같기 때문에 "CORS" 위반을 피할 수 있습니다.

 

1. 처음부터 개발 하는것은 제 취행이 아니기 때문에 이번에는 "Wordpress" 라는 CMS 를 이용해서 백앤드를 구축 해 보겠습니다.

 

 

2. Wordpress 에 대해서 간단히 설명 하면 "PHP" 기반의 서버인 "아파치 웹서버" 에서 돌아가는 CMS 입니다. 당연히 사용하기 위해서는 PHP와 Apache 를 설치 해 주어야 하며 Wordpress 는 DBMS 가 추가적으로 필요 한데 이는 Mysql 을 이용 하도록 하겠습니다.

 

 

3. 우선 Apache2 를 설치 하고 Apache 서버를 실행 해 보겠습니다.

# apache2 설치
$ sudo apt install apache2

# 아파치 서버 시작
$ sudo service apache2 start

# 아파치 서버 중지
$ sudo service apache2 stop

# 아파치 서버 재시작
$ sudo service apache2 restart

    3-1.실행 한다음 브라우저에 ubuntu 서버 주소를 치면 다음과 같은 화면이 뜰겁니다.(주소를 모르면 ifconfig 치시면 나옵니다.)

 

 

4. 다음으로 PHP를 깔아 보겠습니다. (아래는 보통 자주 사용 하는 익스텐션 이기 때문에 나중에 불편함을 줄이기 위해 미리 깔아 줍시다.)

$ sudo apt install php libapache2-mod-php php-mysql

# 자주 설치하는 익스텐션
$ sudo apt install php-{bz2,imagick,imap,intl,gd,mbstring,pspell,curl,readline,xml,xmlrpc,zip}

 

 

5. 그 다음으로는 Mysql 을 설치 하고 설정을 해 보겠습니다.(참고로 두번째 보안 스크립트 붙여 넣기 할때 출처 같이 안 들어가게 조심 하세요!), (이거 안될때도 있는데 안될때 아래 링크 참고 해 보세요http://javaatpoint.com/solved-failed-error-set-password-has-no-significance-for-user-rootlocalhost-as-the-authentication-method-used-doesnt-store-authentication-data-in-the-mysql-server-please-consider-using/)

# Mysql 설치
$ sudo apt install mysql-server

# Mysql 보안 스크립트 초기화 
$ sudo mysql_secure_installation

    5-1. 보안 스크립트 초기화 명령을 주게 되면 다음과 같은 글자가 나올건데 처음은 "Validate Password" 즉 강한 비밀번호를 사용 할것인지 물어 봅니다. 

    5-2. 두번째는 얼만큼 강한 비밀번호로 설정할것인지 강도를 정하는 화면 입니다.

    5-3. 조건에 맞는 비밀번호를 설정 해 주고 y 를 입력 해 줍니다.

    5-4. 그 후 "Mysql"을 웹에서 편하게 관리 하기 위해서 "phpMyAdmin" 을 설치 해 줄겁니다.

https://www.phpmyadmin.net/

phpMyAdmin

    5-5. 위 사이트에서 Download 버튼을 우클릭 해서 "링크 주소복사" 를 누르고 ubuntu 로 가서 wget 을 통해 설치 해 주면 됩니다.

$ wget https://files.phpmyadmin.net/phpMyAdmin/5.2.0/phpMyAdmin-5.2.0-all-languages.zip

    5-6. 이제 압축을 풀어 주고 보기 편하게 이름을 "mysql" 로 고쳐 줄겁니다.

$ unzip phpMyAdmin-5.2.0-all-languages.zip
$ mv phpMyAdmin-5.2.0-all-languages mysql

    5-7. 이 mysql(phpMyAdmin)을 웹상에서 열기 위해서는 설정을 조금 바꾸어 주어야 합니다.

$ sudo vi /etc/apache2/sites-enabled/000-default.conf

# 기존에 있는 내용을 모두 커맨트 처리 하고 아래 내용을 추가
<VirtualHost *:80>
    ServerAdmin takeflame@gmail.com
    DocumentRoot /home/lsh/WEB
    <Directory /home/lsh/WEB>
        AllowOverride All
        <IfModule !mod_authz_core.c>
            # For Apache 2.2:
            Order allow,deny
            Allow from all
        </IfModule>
        <IfModule mod_authz_core.c>
            # For Apache 2.4:
            Require all granted
        </IfModule>
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

       -저는 잴 마지막에 추가 해 주었습니다.

    5-8. 아파치 웹서버를 재 실행 하고 mysql 로 접속 하면 설정 페이지가 잘 뜨는것을 확인 할 수 있습니다.

 

 

 

6. 본격적으로 "Mysql" 설정을 해 보겠습니다.

    6-1. 사용자 명에 "root" 를 주고 비밀번호는 위에서 설정한 비밀 번호을 입력 해 줍니다.

    6-2. 만약 계정 이름을 "root" 가 아닌 다른걸로 하고 싶다면 "사용자 계정" 을 누른뒤 사용자 계정을 눌러 다음과 같이 생성 해 주시면 됩니다.

로그아웃 후 새로 만든 계정으로 다시 로그인한 장면

    6-3. 이제 "Wordpress"에서 사용할 DBMS 를 만들어 봅시다. 위 새 계정 만드는것과 비슷 해 보이지만 "전체적 권한"을 체크 하지 않았고 "동명의 데이터 베이스....." 를 체크 해 주었습니다.

 

 

7. 이제 필요 한게 모두 준비 되었으니 "Wordpress" 를 설치 해 봅시다. 

    7-1. phpMyAdmin 설치때와 비슷하게 아래 주소로 가서 설치 버튼에 우클릭 하고 링크 복사 해서 wget 으로 설치 하고 압축을 풀어 주면 됩니다.(저는 보기 편하게 이름을 MyBackend 로 바꾸어 주었습니다.)

$ wget https://ko.wordpress.org/latest-ko_KR.zip

$ unzip latest-ko_KR.zip

    7-2. 프로젝트 관리가 편하게 mysql 을 Mybackend 안으로 넣어 주고 위에 설정을 고쳐 주겠습니다.

# mysql 을 MyBackend 안으로 넣고
$ mv mysql/ MyBackend/

# 위에서 수정 했던 000-default.conf 파일을 다시 열어서
$ sudo vi /etc/apache2/sites-enabled/000-default.conf

# DocumentRoot부분과 Directory 부분을 고쳐 준다(MyBackend 안으로 들어 갔으니 마지막에 MyBackend 추가)

    7-3. apache2 서버를 다시 실행 해 준 후 브라우저에서 "localhost/wp-admin" 을 입력 해서 들어 가면 다음과 같은 화면이 뜹니다. "시작합니다!" 를 눌러 주고 6단계에서 만들었던 mysql 의 정보를 넣어 줍니다.

    7-4. 그러면 다음과 같은 화면이 뜰텐데 이건 웹에서 접속 하는 User 에게 쓰기 권한이 없기 때문입니다. 따라서 아파치 설정에서 접속 하는 사람에게 쓰기 권한이 있는 사용자 권한을 줘야 합니다. (우측에 드래그 해 둔 부분처럼 사용자 이름으로 변경 해 줍니다.)

$ sudo vi /etc/apache2/envvars

 

    7-5. 아파치 서버를 다시 실행 해 주고 다시 정보를 입력 해 주면 정상적으로 작동 됨을 알 수 있습니다.

    7-6. 설치 진행을 눌러 주고 입력 하라는 정보를 입력 하면 아파치 웹 사이트가 완성 됩니다.

다음엔 이 서버를 백앤드로 이용해서 네이버에서 이미지 정보를 불러 오는 작업을 해 보겠습니다.