귀퉁이 서재

라우팅이란? 라우팅(routing)이란 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정입니다. (Reference1) 예를 들어보겠습니다. 서울에서 부산까지 가는 길은 여러 개가 있습니다. "그중 이 경로를 통해서 서울에서 부산까지 가라!"라고 지정해주는 것이 라우팅입니다. 마찬가지로 블로그에는 여러 메뉴바가 있을 겁니다. 이 메뉴바를 클릭하면 이 페이지로 가고, 저 메뉴바를 클릭하면 저 페이지로 가라! 라고 지정을 해주는 것입니다. 블로그에 라우팅 적용 terrace 디렉토리에서 아래와 같이 vue-router를 설치해줍니다. npm install vue-router frontend/home/src 디렉토리의 App.vue를 아래와 같이 수정합니다. 코드를 먼저 나열한 뒤 마지막에 설명하겠습니..

블로그 작업 후 로컬 변경사항 반영 terrace/frontend/home/src에 작업을 위한 vue 파일들이 있습니다. 작업을 해준 뒤 frontend디렉토리에서 ./update.sh cd .. git add -A git commit make deploy ./deploy_to_S3.sh ./update.sh는 npm run build를 한 결과물이 담긴 dist 디렉토리를 web_root에 담는 작업입니다. git add, commit을 한 뒤 make deploy를 하면 EC2 git 계정으로 변경된 작업물이 push 되고, ./deploy_to_S3.sh를 하면 S3로 빌드 결과물이 반영됩니다. 여기까지 하고 도메인 주소로 들어가면 변경된 사항이 반영되어 있을 겁니다. 블로그 디자인 작업을 위한 ..

지금까지 로컬의 작업물을 EC2로 올리는 방법을 배웠습니다. EC2보다는 S3가 더 저렴하므로 이를 S3로 옮겨보겠습니다. 그전에 도메인을 하나 구매해보겠습니다. name cheap 사이트에 들어가 각자가 원하는 도메인 주소를 구매한 뒤 도메인과 ip를 연결해봅시다. 13.125.232.34를 bkshin.com과 연결을 하는 작업입니다. 이에 대해서는 간단한 구글링을 통해서도 알 수 있으므로 여기서 디테일하게 다루지는 않겠습니다. 도메인을 ip와 연결했다는 가정하에 진행하겠습니다. S3 버킷 만들기 우선, AWS S3 버킷을 만들어야 합니다. AWS S3에서 '버킷 만들기'를 누릅니다. 이름 및 리전 버킷 이름: bkshin.com (도메인 이름) 옵션 구성 Default 설정 권한 설정 4개 체크 모..

EC2 git으로 push하기 로컬에서 작업한 결과물을 EC2 git 계정으로 push를 하면 지난번에 만들어준 post-receive가 빌드와 서버 재부팅을 자동으로 해줄 것입니다. 로컬이 결과물을 EC2 git으로 push해봅시다. EC2 연결 후 sudo -u git bash cd cd .ssh ls -al 현재 authorized_keys가 root, root 소유이므로 이를 git 계정 소유로 바꿔줘야합니다. sudo chown git authorized_keys sudo chgrp git authorized_keys 이제 로컬로 다시 돌아가 terrace_hook 디렉토리로 master브랜치를 push해보겠습니다. exit logout cd terrace git push git@13.125.2..

AWS EC2 인스턴스 생성 블로그 서비스를 구현하기 위해서는 서버가 필요합니다. 여기서는 AWS EC2를 활용할 것입니다. AWS EC2가 무엇인지는 본 링크를 참고하시기 바랍니다. (Reference1) 쉽게 말하자면 EC2는 가상의 컴퓨팅 파워를 제공합니다. 어떤 프로그램을 돌리기 위해서는 컴퓨터가 필요합니다. (당연한 말이지만..) 언제 어디서든 블로그에 접속하기 위해서는 24시간 돌아가는 컴퓨터 (서버)가 필요하며, 이 컴퓨터(서버)에 블로그 서비스가 구축되어 있어야 합니다. 이를 위해 물리적인 서버 컴퓨터를 활용할 수도 있지만 비쌉니다. 저렴한 가격에 물리적인 제약없이도 컴퓨팅 파워를 제공받을 수 있는 곳이 바로 AWS입니다. AWS에는 다양한 서비스가 있지만 그 중 EC2를 활용할 것입니다...

지금까지 블로그 기본 뼈때를 만들고 빌드까지 했습니다. 추후에는 AWS를 통해서 블로그를 띄울 겁니다. 그에 앞서 본 챕터에서는 github에 연결하는 방법에 대해 배워볼 것입니다. github 연결법을 이미 알고 계신 분은 다음 챕터로 넘어가셔도 됩니다. Github 우선 git은 github을 이용할 것입니다. github에 repository를 하나 생성합니다. terrace 디렉토리에서는 .gitignore에 bin을 추가해줍니다. .gitignore에 있는 디렉토리 혹은 파일은 git의 영향을 받지 않습니다. 추가로 home 디렉토리 안에서 .gitignore에 아래 파일 및 폴더를 지정해줍니다. .DS_Store node_modules /dist # local env files .env.loc..

Shell Script를 활용한 npm 빌드 홈 디렉토리에서 cd terrace/frontend vi update.sh update.sh에 아래 코드를 추가하고 저장해줍니다. cd home npm run build rm –rf ../../web_root cp –r dist ../../web_root 위 코드는 home 디렉토리로 들어가 빌드를 해준 뒤 기존의 web_root 디렉토리를 삭제해주고 빌드의 결과물이 담기는 dist 디렉토리를 다시 web_root로 카피하는 명령어입니다. 여기서 sh 파일은 shell script 파일입니다. shell script란 line by line의 코드를 자동으로 실행해주는 프로그램입니다. 즉, ./update.sh를 해줘서 shell script를 실행해주면 위 ..

빌드하기 vue로 만든 소스코드를 아래와 같이 빌드합니다. cd terrace/frontend/home npm run build 빌드란 해당 프로그램을 테스트하고 검사하여 배포하기 위해 수행하는 행위의 집합이라고 생각하시면 됩니다. (Reference1) 빌드의 결과물은 dist 디렉토리에 저장됩니다. 이를 배포를 위한 web_root 디렉토리로 카피하겠습니다. cp -r dist ../../web_root Root Handler 만들기 cd ../../ mkdir src cd src v main.go src 디렉토리에 Root Handler 기능을 하는 main.go라는 파일을 만듭니다. main.go에 아래 코드를 그대로 붙여넣기 하시면 됩니다. package main import ( "fmt" "i..

IUS-release.rpm 설치 home directory에서 sudo yum install -y https://centos7.iuscommunity.org/ius-release.rpm IUS는 리눅스를 위한 Red-Hat Package Manager(RPM) 패키지를 제공하는 Community Project입니다. (Reference1) 파이썬 설치 본 블로그에서는 python을 사용하지 않습니다. 하지만 아래에서 설치할 Neovim을 사용하기 위해 python이 필요합니다. 파이썬은 아래와 같이 설치합니다. sudo yum install -y python36u python36u-libs python36u-devel python36u-pip 파이썬을 설치한 뒤 아래와 같이 조금 손을 봐줘야합니다. 위..

다른 언어를 사용해도 되지만 본 프로젝트에서는 Go 언어를 사용할 것입니다. Go 언어 설치를 위해서는 home directory에서 mkdir temp cd temp sudo yum -y install wget wget https://dl.google.com/go/go1.11.4.linux-amd64.tar.gz wget으로 받아오는 go 버전은 계속 업그레이드가 될 수 있으므로 최신버전으로 설치합니다. golang 홈페이지에 들어가면 아래와 같이 Linux 최신버전을 볼 수 있습니다. go를 다운받을 때 확장자가 tar.gz입니다. 이는 압축 확장자이며, 압축을 풀어 사용할 수 있습니다. 다운받은 go 아카이브의 압축을 아래와 같이 풉니다. (Reference1) temp directory에서 tar..

NPM설치 NPM(Node Package Manager)란 자바스크립트 기반의 패키지 매니저입니다. (Reference1) 이름처럼 NPM은 Node.js로 만들어진 모듈을 웹에서 받아 설치하고 관리해주는 프로그램입니다. 사용자는 명령어를 통해 공개된 모듈을 설치하고 활용할 수 있습니다. NPM 및 vue-cli 3.0을 아래와 같이 설치할 수 있습니다. vue-cli를 통해 터미널에서 간단한 명령어로 프로젝트 디렉토리를 만들 수 있습니다. sudo yum -y install npm sudo npm install -g @vue/cli (-g는 global의 약자이며, 다른 계정들에서도 사용할 수 있음) vue --verison 을 치면 Node version을 업그레이드 하라는 경고 메시지가 나올 겁니다..

이제 개발환경세팅을 위한 각 종 패키지를 설치하겠습니다. ZSH 설치 Z Shell (zsh)는 기본 터미널보다 조금 더 예쁘고 사용하기 좋은 쉘이라고 보면 됩니다. home directory에서 아래 커맨드를 입력해주면 설치가 됩니다. sudo yum -y install zsh yum은 레드헷 (Red Hat/CentOs/Fedora) 계열에서 사용할 수 있는 자동설치 도구입니다. (Reference1) Wget설치 Wget은 웹 서버로부터 콘텐츠를 가져오는 프로그램을 뜻합니다. 월드 와이드 웹(www)과 get의 합성어이며, HTTP, HTTPS, FTP 프로토콜을 통해 내려받기를 지원합니다. (Reference2) sudo yum -y install wget zsh-completions 설치 cd ..

포트포워딩 세팅 앞 글에서 알아본 포트포워딩을 적용하도록 하겠습니다. VirtualBox를 켜고 CentOS를 선택한 뒤 설정 - 네트워크 - 고급 - 포트 포워딩 순으로 클릭합니다. 포트포워딩 규칙은 아래와 같이 세팅해줍니다. 게스트 IP는 CentOS를 실행한 뒤 ip a 혹은 ifconfig를 치면 볼 수 있습니다. 원래는 호스트 포트를 BLOG 8000, HTTP 8888, SSH 22로 설정했으나, 기존 가상환경은 그대로 둔 채 새로운 가상환경을 구축함에 따라 위와 같이 설정했습니다. CentOS를 헤드리스 시작해둡니다. PuTTY 가상환경 원격접속 우선, PuTTY를 설치합니다. PuTTY를 실행한 뒤 Host Name에 127.0.0.1, Port에 22, Saved Sessions는 아무 ..

PuTTY란? 본 블로그 개발 프로젝트에서는 PuTTY를 사용해 작업할 겁니다. PuTTY(이하 푸티)는 가상 단말기 프로그램입니다. 서버는 물리적으로 떨어져 있어도 단말 장비를 통해서 원격으로 접속하여 작업할 필요가 있는데 이때 윈도우같은 개인 pc 운영체제에서도 서버로 접속할 수 있도록 물리적인 단말장비가 아닌 논리적인 가상 단말기를 제공합니다. (Reference1) 푸티로 VirtualBox CentOS에 연결하여 앞으로는 CentOS가 아닌 푸티로 작업을 할 겁니다. CentOS는 작업시 느리고(키보드를 누르는 때와 화면에 해당 글씨가 디스플레이되는 때의 시간 차가 아주 미세하게 있음), 화면도 예쁘지 않습니다. 따라서 작업 환경을 더 좋게 하기 위해 푸티로 원격 접속을 해 개발환경을 세팅하는 ..

Network 연결 세팅 Network Manager를 열기 위해 터미널 커맨드로 "nmtui"를 친다음, "Edit a connection"을 선택합니다. ""을 선택한 뒤 IPv4 CONFIGURATION은 "Automatic", Automatically connect는 체크를 한 뒤 OK를 누릅니다. ESC를 누른 뒤 service network restart 를 쳐서 네트워크 재시작을 하면 IP가 할당됩니다. 이는 매번 접속시 Network를 수동으로 연결해줘야하는 불편함을 없앨 수 있습니다. Reference1 참고하면 그림과 함께 볼 수 있음. (Reference1) IPv4 vs IPv6 위에서 IPv4가 나와서 IPv4와 IPv6에 대해 잠깐 짚고 넘어가겠습니다. IP(Internet Pr..

바닥부터 시작해서 개인 블로그를 띄우는 전 과정을 차근차근 정리하려고 합니다. 이 블로깅 프로젝트의 모든 건 명재 선생님의 지도가 있었기에 가능했습니다. 저는 웹에 대한 지식이 전무했습니다. 저처럼 바닥에서부터 시작해서 블로그를 만들고자 하는 분들에게 조금이나마 도움이 되고자 제 블로그가 만들어진 전 과정을 정리하여 게시글로 하나 하나 기록하고자 합니다. 가상머신 CentOS 설치 우선, Oracle VM Virtual Machine을 설치한 뒤 실행합니다. (Reference1) 본 블로그를 참고하여 CentOS를 설치한다. 여러 세팅이 있는데 모두 다 할 필요 없이 아래 사항만 세팅해주면 됩니다. 메모리 크기: 3072MB 정도 하드 디스크: '지금 새 가상 하드 디스크 만들기' 하드 디스크 파일 종..

개인 블로그를 만드는 프로젝트를 진행했습니다. 개인 기록용 기술 블로그로 활용하고자 합니다. (bkshin.com으로 개인 블로그를 만들었지만 지금은 티스토리로 이사를 온 상황입니다.) 지금까지 개인 블로그를 만들며 아래와 같은 것을 했습니다. 일단 생각나는대로 적고 추후에 기회가 있으면 정리해볼까 합니다. HTML, CSS, JavaScript 공부 Vue.js 공부 Go 언어 간단히 Git 체계적 사용법 (issue 관리, commit 작성규칙 등) 가상환경 설치 및 실행 네트워크 포트포워딩 PuTTY와 가상환경 연결 개발환경 세팅(각종 패키지 설치, 방화벽설정, 권한 설정, 프로젝트 디렉토리 구성 등) NPM 이해 Router 원리 이해 PreRendering AWS EC2 인스턴스 생성 SSH로 ..