[Web 개발] 공개용 홈페이지 만들기! 웹 호스팅 서비스 이용방법

로컬 컴퓨터에서 웹을 개발하면

만들어진 웹페이지는 자신의 컴퓨터에서 밖에 볼 수 없습니다

 

직접 만든 웹페이지를

인터넷을 통해 다른 사람들도 볼 수 있게

웹 호스팅 서비스를 이용하는 방법에 대해 알아보고자 합니다

즉, 외부 서버를 이용하는 것이죠

 

 

그럼 위와 같은 임의의 웹페이지를 대상으로

이를 공개용 홈페이지화 해보겠습니다

 

아직 로컬에서 연 웹페이지이기 때문에

경로 또한 로컬인 것을 확인할 수 있습니다

 

 

 

 

 

무료 웹 호스팅 서비스, Netlify를 먼저 이용해보도록 하겠습니다

 

www.netlify.com  

Netlify: All-in-one platform for automating modern web projects

서비스를 이용하기 위해 회원가입을 먼저 진행해줍니다

저는 GitHub를 통해 회원가입을 진행하였습니다

 

 

 

회원가입이 끝나면, 간단한 가이드 문구가 나옵니다

① Git이나 웹훅(webhook)을 통한 push로 인터넷에 변경사항이 반영이 되고,

② 인증서를 사는 등의 과정을 거치지 않고 HTTPS 환경이 자동으로 구현되며,

③ Netlify의 command line 툴을 이용하여 터미널 환경을 대신할 수 있다고 합니다

 

 

 

 

별도의 과정 없이, 자신이 만들어 놓은 웹사이트 폴더를

드래그 앤 드롭 하면 됩니다

 

 

그러면 업로드가 진행되고, 웹 주소가 뜨게 됩니다

이를 바꾸고 싶다면 Site settings 버튼을 클릭하여 변경하면 됩니다

저는 test-webpage12345.netlify.app으로 주소를 변경해보았습니다

 

그러면 위와 같이 인터넷에서 자신이 만든 웹사이트를 볼 수 있음을 확인할 수 있습니다

 

Netlify는 무료 서비스이고 매우 간단하다는 장점이 있습니다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이번에는 구글에서 제공하고 있는 구글 클라우드 플랫폼 서비스를 이용해보겠습니다

 

https://console.cloud.google.com/

Google Cloud Platform

구글 클라우드 플랫폼은

12개월 동안 $300 상당의 무료 체험판을 제공합니다

이를 이용해서 인터넷에 자신의 웹사이트를 올려보도록 하겠습니다

 

무료로 사용해 보기 버튼을 클릭하고

서비스 약관에 동의 후, 결제 정보를 입력해줍니다

(직접 유료 계정으로 업그레이드하지 않는 한, 요금 청구가 되지 않습니다)

그러면 $300의 무료 크레딧을 제공합니다

 

그 후 My First Project라는 이름으로 첫 프로젝트가 생성된 것을 확인할 수 있습니다

 

Compute Engine > VM 인스턴스 > 만들기

순서대로 진행하여 가상머신을 만들어줍니다

 

머신은 가장 작은 CPU를 사용하였고,

OS는 우분투로,

다른 서비스를 호출하기 위해 모든 Cloud API에 대한 전체 엑세스 허용으로 설정하였으며,

웹서버로 이용할 것이기에 HTTP와 HTTPS 트래픽 허용으로 체크하였습니다

 

 

 

 

VPC 네트워크 > 외부 IP 주소 > 유형을 '고정'으로 변경

순서대로 진행하여 외부 IP 주소를 고정시켜줍니다

 

 

 

Compute Engine > VM 인스턴스

여기서 SSH 연결이 된다면 성공입니다

 

 

 

sudo su			// root로 변경
apt-get update		// 패키지 목록 업데이트
apt-get upgrade 	// 프로그램 패치 (Y로 승인)
dpkg-reconfigure tzdata					// Asia/Seoul로 timezone 설정

apt-get install openjdk-8-jre-headless			// JAVA 해석기 설치 (java -version으로 확인)
apt-get install openjdk-8-jdk				// JAVA compiler 설치 (javac -version으로 확인)

apt-get install tomcat8			// tomcat 설치 (/usr/share/tomcat8/bin/version.sh으로 확인)

SSH를 통해 초기 설정을 위와 같이 해줍니다

 

 

 

 

 

VPC 네트워크 > 방화벽 > 방화벽 규칙 만들기

순서대로 들어간 후, 위와 같이 방화벽 규칙을 새로 설정해줍니다

 

 

 

 

 

 

그 후, 자신의 외부 IP 주소를 복사하여

http://[외부 IP 주소]:8080으로 접속한 후, 위와 같은 화면이 뜬다면 성공입니다

 

 

 

apt-get install mariadb-server mariadb-client	// MariaDB 서버/클라이언트 설치
/usr/bin/mysql_secure_installation		// DB 초기화

다시 SSH로 돌아간 후

위와 같이 MariaDB를 위한 초기 설정을 진행해줍니다

 

 

 

mysql		// root 사용자인 상태로 로그인

use mysql;
update user set plugin='' where User='root';
flush privileges;
exit;

위와 같이 비밀번호 인증 방식도 변경해주었습니다

 

 

 

 

vim /etc/mysql/mariadb.conf.d/50-server.cnf		// 기본 언어셋 변경

위 파일에 접근하여

 

character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

 

이를 [mysqld]에 추가한 후, 저장해줍니다

 

 

service mysql restart		// 변경사항 적용

 

이렇게 DB 설정이 적용이 되었으면, 

Tomcat처럼 DB도 외부 접속을 허용해주어야 합니다

이 또한 방화벽 규칙을 추가함으로써 설정됩니다

3306 포트의 방화벽 규칙을 위와 같이 만들어 주었다면,

 

 

vim /etc/mysql/mariadb.conf.d/50-server.cnf

위 파일에 접근하여 bind-address = 127.0.0.1 부분을 #으로 주석처리 해줍니다

 

mysql		// 비밀번호 설정하신 분은 -p 옵션 사용

CREATE USER '[외부유저명]'@'%' IDENTIFIED BY '[비밀번호]';
SELECT host, user FROM user;		// 사용자 생성 확인

GRANT all privileges ON mysql.* TO '[외부유저명]'@'%' IDENTIFIED BY '[비밀번호]';
flush privileges;		// 모든 권한 부여함을 적용

그 후, 외부에서 접근가능한 유저를 하나 생성해준 후, 위와 같이 모든 권한을 부여해줍니다

그리고 외부유저로 접속을 해줍니다

 

 

apt-get install libmysql-java		// JDBC 설치 (Java DB Connector)

ln -s /usr/share/java/mysql-connector-java.jar /usr/share/tomcat8/lib/mysql-connector-java.jar
// Tomcat 라이브러리 폴더에 링크 생성

service tomcat8 restart			// 변경사항 적용

 

이제 웹폴더를 업로드시켜줄 것입니다

/home/[구글 아이디]에 파일을 업로드해주는 데, 폴더 업로드는 불가능하므로

웹폴더 전체를 zip파일로 압축시킨 후, 업로드시켜줍니다

 

apt-get install unzip

find / -name webapps			// webapps 경로 찾기
cd [webapps 경로]

unzip /home/[구글아이디]/[zip파일명].zip -d ./[zip파일명]

service tomcat8 restart

webapps 경로에 업로드한 zip 파일을 압축 풀어준 후, 변경사항을 적용합니다

 

 

create database [DB명]; 
exit;

mysql -uroot -p [DB명] < [덤프파일경로];

DB 덤프파일도 파일 업로드를 통해 업로드해줍니다

 

만약, GCP VM 인스턴스에

Xshell이나 putty를 통해 접속하고 싶다면

아래의 포스팅을 참고하시길 바랍니다

https://secure-key.tistory.com/44

[Web 개발] GCP VM 인스턴스에 Xshell 연결하기

 

 

GCP 이용방법 출처: https://blog.naver.com/msjang4/221318463468

 

 

 

 

지금까지 웹사이트를 외부 서버를 활용하여

인터넷에 공개하는 방법에 대해 알아보았습니다

감사합니다