웹앱, 클라우드, 컨테이너

Bard·2022년 6월 22일
cloudcontainerdockerweb
3

GitHub를 통해서 배워보는 기업용 파일 버전관리, 데브옵스 (DevOps)

목록 보기
2/3

본 글은 Bryant Son 님의 "GitHub를 통해서 배워보는 기업용 파일 버전관리, 데브옵스 (DevOps)" 를 듣고 정리한 포스트입니다.

HTML 입문

HTML이란?

Hyper Text Markup Language의 약자며 프로그래밍 언어가 아닌 메타 텍스트 파일. 웹언어로 인터넷이 지금처럼 된 계기

HTML이 Hyper Text라고 부르는 이유?

링크 (anchor)를 사용해서 다른 페이지로 이동 가능

기본 HTML 문법 (Syntax)

<html> 모든 HTML은 <html>로 시작되고 닫습니다. 
  <head>
    <!--<head> 안에는 JavaScript CSS 등등 보이지 않지만 필요한 스크립트가 들어갑니다.-->
  </head>
  <body>
    <!--<body> 안에는 메인 컨텐츠가 들어갑니다.-->
  </body>
</html>

CSS 입문

CSS란?

Cascading Style Sheet의 약자며 HTML을 꾸미는 디자인을 담당하는 메타 텍스트 형태 언어입니다.

CSS를 사용하는 세가지 방법

  1. HTML의 tag에 직접 더하기 

    <h1 style="color: red; font-weight: bold"> Hello World </h1>

  2. HTML의 <head> 태그 사이에 

    <style type="text/css">...</style>

    로 정리하기

  3. External 파일 링크: CSS 파일을 <head> 태그 사이에 

    <link rel="stylesheet" href="style.css">

    로 링크

JavaScript 입문

JavaScript란?

웹의 가장 기초적으로 내장되어 있는 다이나믹 프로그래밍 언어이며 client side 프로그래밍으로 알려져 있습니다. (하지만 뒤의 node.js는 반전)

CSS를 사용하는 세가지 방법

  1. HTML의 tag에 직접 더하기 

    <button type="button" onClick="document.getElementId('demo').innerHTML='Hello JavaScript'">Click</button>

  2. HTML의 <head> 태그 사이에 

    <script type="text/javascript">...</style>

    로 정리하기

  3. External 파일 링크: CSS 파일을 <head> 태그 사이에 

    <script type="text/javascript" src="functions.js">

    로 링크

웹앱 & NodeJS 입문

웹앱(Web Application)이란?

모든 컴퓨터에는 다양한 용도의 PORT가 있는데 웹을 위한 PORT를 프로그래밍으로 열고 웹사이트/서비스를 서비스하는 개념

NodeJS란?

원래 JavaScript는 server 용이 아니라 client인데 그걸 서버용으로 만들어서 현재 프론트엔드 레이어를 만들 때 제일 인기있는 앱 서버

Cloud Computing 입문

클라우드 혹은 클라우드 컴퓨팅이란?

원하는 서비스를 골라서 쉽게 필요한 만큼 쓸 수 있는 Utility 개념의 서비스. 기술의 중점은 가상화(Virtualization)라고 해서 하드웨어 리소스를 소프트웨어로 쪼개서 원하는 사람들에게 제공하고 필요하면 더 스케일해주는 방식.

클라우드를 설명하는 방법 - #1: 서비스 제공 관점

사용자가 OS를 원하면 Virtual Machine을 데이터베이스를 원하면 DB 서비스를 스토리지를 원하면 Storage 서비스를. 사용자들이 원하는 기능들을 서비스화, module화 시켜서 원하는 서비스만 선택하는 방식

재미있는 사실: AWS도 복잡한 사내 기능들을 정리해서 간편해지니 그걸 일반인들에게 제공하면서 시작

클라우드를 설명하는 방법 - #2: 사용에 따른 비용 관점

클라우드는 기존 웹서버나 소프트웨어와 다르게 사용한만큼 지불하는 전기세, 물세와 비슷한 유틸리티 개념

클라우드를 설명하는 방법 - #3: 기술적 관점

클라우드는 Hypervisor같은 소프트웨어를 통해 하드웨어 리소스들을 통째로 쓰지 않고 쪼개서 가상화(Virtualization)로 할당하는 게 가능.

네트워크는 Software Defined Network를 쓰거나.. 각 기술마다 차이는 있지만 맥락은 비슷하거나 동일.

클라우드를 설명하는 방법 - #4: 클라우드 종류

클라우드는 사용자 그리고 호스팅 서비스 중 누가 어디까지 관리하는 지 따라서 구별 가능

  • On-Prem: 일반 서버, 모든 걸 사용자가 관리.
  • Infrastructure as a Service (IaaS): 하드웨어 부분을 호스팅 서비스가 관리. 예: AWS, GCP, Azure
  • Platform as a Service (PaaS): 개발자 위주 플랫폼. 프로그래밍 종류나 데이터만 사용자가 관리. 예: Firebase, Heroku
  • Software as a Service (SaaS): 사용자처럼 그냥 쓰는 플랫폼. 예: Youtube, Facebook

Container & Docker 입문

Container란?

가상화 기술을 사용하는 일반적인 가상머신 즉 Virtual Machine이 운영체제를 필요로 한다는 단점을 보완해서 더 가볍게 앱을 배포 가능하게 만든 기술

Docker가 유명해진 이유?

  • 제 컴퓨터에서는 잘 동작해요
  • 그럼 니 컴퓨터로 배포하면 되겠다.
  • 도커는 이렇게 태어났습니다.

Docker 101

  • Docker CLI: 도커를 쉽게 본인 컴퓨터에서 사용하기 위한 Command 위주의 툴
  • DockerHub: 도커에서 제공하는 다양한 컨테이너가 있는 Image Registry
  • Docker Images: 일종의 Blueprint이며 앱 소스코드들과 다른 base image를 합쳐서 만듦
  • Docker containers: 도커에서 image를 통해 돌아가는 프로세스

Docker 돌려보기 Step 1 - Dockerfile 적기

  1. Editor에서 새로운 파일을 만들고 Dockerfile 이름으로 만듭니다.
FROM node:latest

WORKDIR /app

COPY ["package.json", "package-lock.json", "./"]

RUN npm install

COPY . .

CMD ["npm", "start"]

Docker 돌려보기 Step 2 - Docker image 만들기

  1. 같은 폴더에서 터미널을 열고 다음 command를 실행합니다.

    docker build -t my-node-app:1.0 .

    (마지막 점이 중요합니다.)

  2. docker images를 실행해서 확인합니다.

Docker 돌려보기 Step 3 - Docker container로 돌리기

  1. 같은 폴더에서 터미널을 열고 다음 command를 실행합니다.

    docker run -p 3000:3000 --detach --rm --name my-node-app my-node-app:1.0

  2. docker ps를 실행해서 확인합니다.

  3. 브라우저를 오픈해서 localhost:3000 으로 방문합니다.

Docker 돌려보기 Step 4 - Docker cleanup

  1. docker ps를 실행합니다.
  2. 아이디를 카피한 후 docker stop {DOCKER PID}를 실행합니다.
  3. docker ps를 실행해서 지워진걸 확인합니다. 아니면 docker rm {DOCKER PID}을 실행해서 지웁니다.
  4. docker images를 실행합니다.
  5. docker rmi {IMAGE ID}를 입력해서 지웁니다.

GitHub Packages로 Image Registry 입문

Image Registry란?

가상머신 이미지나 컨테이너, 혹은 프로그래밍 패키지를 저장하고 매니지하는 공간 혹은 플랫폼

Image Registry - 스텝 1: GitHub Personal Access Token 만들기

  1. Settings -> Developer Settings 선택
  2. Personal access tokens 들어간 후 Generate new token
  3. write:packages 그리고 delete:packages 선택 후 Generate token 버튼 눌러서 새로운 토큰 만들기.
  4. 만들어지면 토큰을 안전한 곳에 카피.

Image Registry - 스텝 2: Docker CLI로 GitHub Packages 로그인 그리고 Push

export CR_PAT={GitHub Personal Access Token}
echo $CR_PAT |  docker login -u {본인 깃허브 아이디} --password-stdin
docker tag my-node-app:1.0 ghcr.io/{github id lowercase}/my-node-app:1.0
docker push ghcr.io/{github id lowercase}/my-node-app:1.0
profile
Bard
The Wandering Caretaker
이전 포스트

Git, GitHub 기초

다음 포스트

DevOps & GitHub Action

2개의 댓글

comment-user-thumbnail
JISEUNG
2022년 6월 23일

좋은 글 감사합니다..

1개의 답글