007 - Github 배포 및 가상호스트 설정
남기용 215

Git으로 코드관리

Git을 이용해서 버전관리, 및 소스코드를 관리 할 수 있습니다.

Git에 대해 배우시려면 누구나 쉽게 이해할 수 있는 Git 입문 사이트의 튜토리얼을 진행해 주세요

요기에서는 자주 사용되는 명령을 간단히만 정리 하도록 하겠습니다.

  • git init : 깃 저장소를 초기화 합니다.

  • git add : 작업트리의 내용을 인덱스 상태(스테이징)로 변경합니다.

  • git commit : 깃 저장소에 변경 내용을 기록합니다.

  • git push : 로컬 저장소 내용을 원격 저장소 올립니다.

  • git clone : 원격 저장소 내용을 통째로 복제 하여 로컬 저장소에 내려 받습니다.

  • git pull : 원격 저장소 내용을 로컬 저장소로 내려받습니다.

이제 깃을 사용하려면 먼저 사용자 등록을 해야 합니다.

Github에 가입한 이름과 이메일을 등록해주세요.

git config --global user.name "이름"
git config --global user.email "이메일"

그리고 우리가 작업하는 Windows 운영체제와 서버의 Ubuntu 운영체제의 개행문자가 다르기 때문에 다음의 명령으로 깃에서 개행문자를 자동으로 관리 하도록 합니다.

git config --global core.autocrlf input

이제 Git 명령을 통행 프로젝트 폴더에서 Git 저장소에 커밋하고 배포 준비를 합니다.

위에 내용은 Ubuntu 서버에도 동일하게 적용해 주세요.

참고로 Ubuntu에는 Git이 이미 설치가 되어 있어 설치는 안해도 됩니다.

Github 저장소에 프로젝트 올리기

Github로 이동해서 로그인을 한 후 새 저장소를 생성합니다.

저장소에 안내에 따라 원격저장소를 초기화 하고 Push 합니다.


이제 Ubuntu 서버에서 Github에 있는 저장소를 Clone 하여 내려 받습니다.

저장소 폴더로 이동 후 package.json의 내용을 토대로 노드 모듈을 설치 합니다.

yarn install
or
yarn 

이제 빌드를 하도록 합니다.

yarn build

이렇게 하면 dist 라는 폴더가 생성되고 프로젝트의 내용이 빌드되어 생성됩니다.

아파치 가상호스트로 서비스

이제 빌드가 되었으니 아파치 설정을 통해 우리가 만든 도메인으로 접속했을때 페이지가 보여지도록 하겠습니다.

먼저 아파치의 사이트 관리 폴더로 이동 한 후 파일을 하나 만들어 주고 nano 에디터로 작성합니다.

cd /etc/apache2/sites-available
sudo touch <파일명>.conf
sudo nano <파일명>.conf

파일명을 마음대로 하시면 되는데 관리상 용이 하도록 도메인 이름과 같게 해주시면 좋을거 같습니다.

가상호스트 내용은 다음과 같습니다. 복사 붙여 넣기 한 후 경로와 도메인을 설정에 맞게 작성해 주세요.

<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	DocumentRoot /home/ubuntu/경로/dist
	ServerName 내도메인
	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined
	<Directory "/home/ubuntu/경로/dist">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
	</Directory>
</VirtualHost>

빌드된 내용이 dist 폴더에 있으므로 경로에는 dist까지 작성을 해주셔야 합니다.

ServerName에는 도메인명을 작성해주시면 됩니다.

위 내용은 해당 서버네임으로 접속시 DocumentRoot 의 내용으로 서비스를 하도록 하는 설정입니다.

이제 위 파일을 /etc/apache2/sites-enabled 폴더에 링크를 연결하여 줍니다.

cd ../sites-enabled/
sudo ln -s ../sites-available/<파일명>.conf .

저장을 하시고 아파치 서버를 재시작 합니다.

sudo service apache2 restart

이제 브라우저에서 도메인으로 접속하면 Vuetify가 적용된 페이지가 보입니다.

일단 먼저 배포까지 일단락 되었습니다.

지금은 정적파일을 서비스 하는 것이고 CSR(Client Side Rendering)된 페이지가 보여지는 것입니다.

Git Github 빌드 가상호스트
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2021 ezcode all right reserved.