웹사이트 검색

Ubuntu의 LAMP 서버에 HTML5 웹 사이트를 배포하는 방법

이 시리즈의 이전 두 기사에서는 Linux 데스크톱 배포판에서 Netbeans를 웹 애플리케이션 개발을 위한 IDE로 설정하는 방법을 설명했습니다. 그런 다음 페이지를 모바일 친화적이고 반응형으로 만들기 위해 두 가지 핵심 구성 요소인 jQuery와 Bootstrap을 추가했습니다.

  • Netbeans를 사용하여 Ubuntu에서 기본 HTML5 프로젝트를 만드는 방법 – 1부
  • JQuery와 Bootstrap을 사용하여 모바일 친화적인 앱을 작성하는 방법 - 2부

개발자로서 정적 콘텐츠를 거의 다루지 않으므로 이제 파트 2에서 설정한 기본 페이지에 동적 기능을 추가하겠습니다. 시작하려면 전제 조건을 나열하고 계속 진행하기 전에 이를 해결해 보겠습니다.

전제 조건

LAMP 서버에 배포하기 전에 개발 시스템에서 동적 애플리케이션을 테스트하려면 일부 패키지를 설치해야 합니다.

이 시리즈를 작성하기 위해 Ubuntu 데스크톱을 사용하고 있으므로 귀하의 사용자 계정이 이미 sudoers 파일에 추가되어 필요한 권한이 부여되었다고 가정합니다.

패키지 설치 및 DB 서버에 대한 액세스 구성

설치 중에 MySQL 루트 사용자의 비밀번호를 입력하라는 메시지가 나타날 수 있습니다. 강력한 비밀번호를 선택했는지 확인한 후 계속하세요.

Ubuntu 및 파생 제품(다른 Debian 기반 배포판에도 해당):

sudo apt update && sudo apt install apache2 php php-common php-mysql mysql-server filezilla

Fedora/CentOS/RHEL 및 기타 RHEL 기반 배포판용):

sudo yum update && sudo yum install httpd php php-common php-mysql mysql-server filezilla

설치가 완료되면 mysql_secure_installation 명령을 실행하여 데이터베이스 서버를 보호하는 것이 좋습니다.

sudo mysql_secure_installation

다음 정보를 입력하라는 메시지가 표시됩니다.

  • 루트 비밀번호를 변경하시겠습니까? [예/아니요]. MySQL 루트 사용자의 비밀번호를 이미 설정한 경우 이 단계를 건너뛸 수 있습니다.
  • 익명 사용자를 제거하시겠습니까? [Y/n] y.
  • 원격으로 루트 로그인을 허용하지 않으시겠습니까? [Y/n] y (로컬 개발 환경이므로 원격으로 DB 서버에 연결할 필요가 없습니다).
  • 테스트 데이터베이스를 제거하고 이에 액세스하시겠습니까? [Y/n] y
  • 지금 권한 테이블을 다시 로드하시겠습니까? [Y/n] y.

샘플 데이터베이스 생성 및 테스트 데이터 로드

샘플 데이터베이스를 생성하고 일부 테스트 데이터를 로드하려면 DB 서버에 로그온하세요.

sudo mysql -u root -p

MySQL 루트 사용자의 비밀번호를 입력하라는 메시지가 표시됩니다.

MySQL 프롬프트에서 다음을 입력합니다.

CREATE DATABASE tecmint_db;

Enter를 누르세요.

이제 테이블을 만들어 보겠습니다.

USE tecmint_db;
CREATE TABLE articles_tbl(
   Id INT NOT NULL AUTO_INCREMENT,
   Title VARCHAR(100) NOT NULL,
   Author VARCHAR(40) NOT NULL,
   SubmissionDate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY ( Id )
);

샘플 데이터로 채웁니다.

INSERT INTO articles_tbl (Title, Author) VALUES ('Installing Filezilla in CentOS 7', 'Gabriel Canepa'), ('How to set up a LAMP server in Debian', 'Dave Null'), ('Enabling EPEL repository in CentOS 6', 'John Doe');

웹 서버 디렉토리에 심볼릭 링크 추가

Netbeans는 기본적으로 현재 사용자의 홈 디렉토리에 프로젝트를 저장하므로 해당 위치를 가리키는 심볼릭 링크를 추가해야 합니다. 예를 들어,

sudo ln -s /home/ubuntu/NetBeansProjects/TecmintTest/public_html /var/www/html/TecmintTest

/home/gabriel/NetBeansProjects/TecmintTest/public_html을 가리키는 TecmintTest라는 소프트 링크를 추가합니다.

이러한 이유로 브라우저에서 http://localhost/TecmintTest/를 가리키면 파트 2에서 설정한 애플리케이션이 실제로 표시됩니다.

원격 FTP 및 웹 서버 설정

9부 – Tecmint에서 RHCSA 시리즈의 보안 FTP 및 웹 서버 설치 및 구성에 제공된 지침을 사용하여 FTP 및 웹 서버를 쉽게 설정할 수 있으므로, 여기서 반복하지 마세요. 계속 진행하기 전에 해당 가이드를 참조하세요.

애플리케이션을 Dynamic One으로 전환

이전에 데이터베이스에 추가한 샘플 데이터로는 많은 작업을 수행할 수 없다고 생각할 수도 있으며, 맞습니다. 그러나 PHP 코드 삽입의 기본 사항과 MySQL DB에 대한 쿼리 결과를 배우는 것만으로도 충분합니다. HTML5 페이지에서.

먼저, 애플리케이션의 기본 문서 확장자를 html 대신 .php로 변경해야 합니다.

mv /var/www/html/TecmintTest/index.html /var/www/html/TecmintTest/index.php

그런 다음 Netbeans에서 프로젝트를 열고 몇 가지 수정을 시작해 보겠습니다.

1. 백엔드 PHP 애플리케이션을 저장할 includes라는 프로젝트에 폴더를 추가합니다.

2. includes 내에 dbconnection.php라는 파일을 만들고 다음 코드를 삽입합니다.

<?php
    $host = "localhost";
    $username = "root";
    $password = "MyFancyP4ssw0rd";
    $database = "tecmint_db";

    //Establish a connection with MySQL server
    $mysqli = new mysqli($host, $username, $password,$database);

    /* Check connection status. Exit in case of errors. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $mysqli -> query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'");

    $records = array();
    $query = "SELECT Title, Author, SubmissionDate FROM articles_tbl;";
    $result = $mysqli->query($query) or die($mysqli->error);
    $data = array();

    while ( $row = $result->fetch_assoc() ){
        $data[] = json_encode($row);
    }
    echo json_encode( $data );
?>

다음 이미지에 표시된 대로:

이 파일은 데이터베이스 서버에 연결하고, 쿼리하고, 해당 쿼리 결과를 약간 수정하여 프런트엔드 애플리케이션에서 사용할 JSON과 같은 문자열로 반환하는 데 사용됩니다.

일반적으로 이러한 각 작업을 수행하기 위해 별도의 파일을 사용하지만 단순화를 위해 해당 기능을 모두 하나의 파일에 포함하기로 선택했습니다.

3. index.php에서 여는 body 태그 바로 아래에 다음 스니펫을 추가합니다. 이는 웹 문서가 준비되었을 때, 즉 로드될 때마다 외부 PHP 앱을 호출하는 jQuery 방식입니다.

<script>
    $(document).ready(function(){
        $.ajax({
            url: 'includes/dbconnection.php',
            datatype: 'json',
            type: 'POST',
            success: function(data){
                var output = $.parseJSON(data);
                for(var i =0;i < output.length;i++)
                {
                  var item = output[i];
                  $("#title").append("<br>"+item.Title);
                  $("#author").append("<br>"+item.Author);
                  $("#submissiondate").append("<br>"+item.SubmissionDate);
                }
            }}
        );
    });
</script>

4. 이제 행 클래스가 있는 div의 각 줄에 고유 ID(위의 for 루프 내부와 동일)를 추가합니다. index.php 하단:

<div class="row">
    <div class="col-md-4" id="title" style="text-align: center"><strong>Titles</strong></div>
    <div class="col-md-4" id="author" style="text-align: center"><strong>Authors</strong></div>
    <div class="col-md-4" id="submissiondate" style="text-align: center"><strong>Published on:</strong></div>
</div>

이제 프로젝트 실행을 클릭하면 다음이 표시됩니다.

이는 앞서 MySQL 클라이언트 프롬프트에서 쿼리를 실행할 때 반환된 정보와 기본적으로 동일합니다.

Filezilla를 사용하여 LAMP 서버에 배포

대시 메뉴에서 Filezilla를 실행하고 원격 FTP 서버의 IP와 자격 증명을 입력하세요. 그런 다음 빠른 연결을 클릭하여 FTP 서버에 연결합니다.

/home/gabriel/NetBeansProjects/TecmintTest/public_html/로 이동하여 콘텐츠를 선택한 후 마우스 오른쪽 버튼으로 클릭하고 업로드를 선택합니다.

물론 이는 사용자 이름에 표시된 원격 사용자가 원격 디렉토리에 대한 쓰기 권한을 가지고 있다고 가정합니다. 업로드가 완료되면 브라우저를 원하는 위치로 지정하면 이전과 동일한 페이지가 표시됩니다. (로컬 MySQL 데이터베이스를 원격 호스트에 설정하지 않았지만 다음 단계에 따라 쉽게 설정할 수 있습니다. 이 튜토리얼의 시작 부분).

요약

이 문서에서는 jQuery와 약간의 JavaScript를 사용하여 웹 애플리케이션에 동적 기능을 추가했습니다. 자세한 내용은 공식 jQuery 문서를 참조하세요. 이는 더 복잡한 애플리케이션을 작성하기로 결정한 경우 매우 유용할 것입니다. 마무리하면서 FTP 클라이언트를 사용하여 원격 LAMP 서버에 애플리케이션을 배포했습니다.

이 기사에 대한 귀하의 의견을 듣고 싶습니다. 아래 양식을 사용하여 언제든지 문의해 주십시오.