여기에서는 실습 개념으로

Vite를 이용해서 React 앱 생성하는 과정만 빠르게 살펴볼 것이다.

 

0. 실습 환경

- Ubuntu 20.04

 

1. Node

- Vite를 사용하기 위해서는 node가 설치되어 있어야 한다.

- 아직 설치가 안되어 있다면, 아래 포스팅을 통해 nvm 기반으로 설치하자.

  . https://www.whatwant.com/entry/npm

nvm

 

- 원활하게 Vite를 사용하기 위해서는 node 버전이 18 이상이어야 한다고 한다.

node version

 

2. Vite 설치

- npm을 이용하여 vite를 설치하면 된다.

> npm install vite@latest

install vite

 

3. Project 생성

- vite를 이용해서 React project를 생성해보자.

  . 아래 캡처한 내역과 같이 3가지 정보를 작성 및 선택해주면 된다.

> npm create vite@latest

create project

 

4. App 실행

- vite가 알려준대로 진행해보면 된다.

> cd gemini-nagger

> npm install

> npm run dev

run

 

- 웹브라우저를 통해 확인해보자.

WEB

 

간략히 살펴보았다.

반응형
저작자표시 비영리 변경금지

'Programming > Web' 카테고리의 다른 글

백엔드 프레임워크 - KeystoneJS  (1) 2023.07.13
npm, node 그리고 nvm  (0) 2023.01.04

받아보는 메일링 리스트를 통해 알게된 재미있는 Framework가 있어서 한 번 다뤄보려 한다.

https://oneoneone.kr/content/d9b579e3

 

나온지 꽤 된 것임에도 잘 몰랐는데,

'노마드 코더'의 극찬 영상으로 인해 호기심을 확 끌었다.

https://www.youtube.com/watch?v=DlyoFFOcPCg

 

 

이 framework의 분류를 정확히 뭐라해야할지 애매한데, 구글링을 통해 확인한 여러 별칭은 다음과 같다.

  - CMS

  - App Framework

  - App Backend

  - Backend Framework

  - Admin Panel

  - Library

 

음... 아직 명확한 naming은 안되어있는 분류인 것이다.

하지만, 뭘 말하고자 하는 것인지는 왠지 알 수 있을 것만 같은 느낌적인 느낌!?

 

 

일단, 이번에 다뤄보고자 하는 것은 "Keystone JS"라는 아이이다.

https://keystonejs.com/

 

재빨리 설치하고 웹을 띄워보자!!!

 

 

[ Environment ]

일단 개발 환경은 다음과 같다.

- 운영 체제: Ubuntu 20.04 LTS

 

❯ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04.6 LTS
Release: 20.04
Codename: focal

 

 

[ Node ]

이 아이도 Node.JS 기반이고 npm을 이용하기 때문에 node부터 설치를 해야 한다.

 

버전 호환성으로 인한 어려움이 종종 발생하기 때문에

우리는 node의 다양한 버전을 다룰 수 있는 방법이 필요하다!

 

그래서, 나의 선택은 nvm !!!

아래 링크를 통해 nvm, node, npm 설치를 하자 !!!

- https://www.whatwant.com/entry/npm

 

❯ git clone https://github.com/nvm-sh/nvm.git ~/.nvm
'/home/chani22/.nvm'에 복제합니다...
remote: Enumerating objects: 9051, done.
remote: Counting objects: 100% (1830/1830), done.
remote: Compressing objects: 100% (111/111), done.
remote: Total 9051 (delta 1764), reused 1730 (delta 1719), pack-reused 7221
오브젝트를 받는 중: 100% (9051/9051), 3.28 MiB | 10.09 MiB/s, 완료.
델타를 알아내는 중: 100% (5790/5790), 완료.


❯ cd ~/.nvm


❯ git tag


❯ git switch -c v0.39.3 tags/v0.39.3
새로 만든 'v0.39.3' 브랜치로 전환합니다
 3.8.16  chani22@chani22-VBox  ~/.nvm   v0.39.3


❯ nano ~/.zshrc

 

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

 

- shell 재접속 후

 

❯ nvm --version
0.39.3


❯ nvm install node
Downloading and installing node v20.4.0...
Downloading https://nodejs.org/dist/v20.4.0/node-v20.4.0-linux-x64.tar.xz...
######################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.4.0 (npm v9.7.2)
Creating default alias: default -> node (-> v20.4.0)


❯ node --version  
v20.4.0


❯ npm --version 
9.7.2

 

 

[ Keystone JS ]

npm을 이용해서 keystone-app을 생성할 수 있다.

나의 app 이름을 지어주면 기본적인 boilerplate를 생성해준다.

 

❯ mkdir keystone


❯ cd keystone


❯ npm init keystone-app@latest
Need to install the following packages:
  create-keystone-app@9.0.1
Ok to proceed? (y) 

✨ You're about to generate a project using Keystone 6 packages.

✔ What directory should create-keystone-app generate your app into? · my-app

⠋ Installing dependencies with yarn. This may take a few minutes.
⚠ Failed to install with yarn.
✔ Installed dependencies with npm.


🎉  Keystone created a starter project in: my-app

  To launch your app, run:

  - cd my-app
  - npm run dev

  Next steps:

  - Read my-app/README.md for additional getting started details.
  - Edit my-app/keystone.ts to customize your app.
  - Open the Admin UI
  - Open the Graphql API
  - Read the docs
  - Star Keystone on GitHub


❯ cd my-app/


❯ ls -al
합계 484
drwxrwxr-x   4 chani22 chani22   4096  7월 12 16:28 .
drwxrwxr-x   3 chani22 chani22   4096  7월 12 16:26 ..
-rw-rw-r--   1 chani22 chani22     46  7월 12 16:26 .gitignore
drwxr-xr-x   2 chani22 chani22   4096  7월 12 16:28 .keystone
-rw-rw-r--   1 chani22 chani22   2874  7월 12 16:26 README.md
-rw-rw-r--   1 chani22 chani22   2710  7월 12 16:26 auth.ts
-rw-rw-r--   1 chani22 chani22   1014  7월 12 16:26 keystone.ts
drwxrwxr-x 570 chani22 chani22  20480  7월 12 16:28 node_modules
-rw-rw-r--   1 chani22 chani22 410056  7월 12 16:28 package-lock.json
-rw-rw-r--   1 chani22 chani22    397  7월 12 16:26 package.json
-rw-rw-r--   1 chani22 chani22   9506  7월 12 16:26 schema.graphql
-rw-rw-r--   1 chani22 chani22   1056  7월 12 16:26 schema.prisma
-rw-rw-r--   1 chani22 chani22   5178  7월 12 16:26 schema.ts
-rw-rw-r--   1 chani22 chani22    195  7월 12 16:26 tsconfig.json
 3.8.16  chani22@chani22-VBox  /srv/workspace/ks/my-app


❯ nano keystone.ts


❯ npm run dev

> keystone-app@1.0.2 dev
> keystone dev

✨ Starting Keystone
⭐️ Server listening on :3000 (http://localhost:3000/)
⭐️ GraphQL API available at /api/graphql
✨ Generating GraphQL and Prisma schemas
✨ sqlite database "keystone.db" created at file:./keystone.db
✨ Your database is now in sync with your schema
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
- warn You have enabled experimental feature (appDir) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- event compiled client and server successfully in 195 ms (18 modules)
✅ Admin UI ready
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 6.5s (1706 modules)

 

'npm run dev'를 하면 웹앱을 띄워준다.

크롬으로 접속하면 된다.

http://localhost:3000/

 

첫 사용자를 생성해야 한다.

귀찮지만 8자 이상의 패스워드를 넣어줘야 한다.

Create user

 

예쁜 화면을 볼 수 있다.

Dashboard

 

User List를 확인해보면 다음과 같은 화면을 볼 수 있다.

Users

 

상세 정보도 확인할 수 있다.

User detail

 

Posts 화면을 살펴보자.

Posts

 

Create Post 버튼을 누르면 멋진 화면이 나온다.

Create Post

 

입력 인터페이스가 정말 산뜻하다. (직접 구현하려면 엄청 귀찮았을....)

Edit

 

 

[ GraphQL ]

API를 확인하기 위해서는 주소가 다르다.

 

http://localhost:3000/api/graphql

 

멋지지 않은가?!

 

 

하지만, 주의 사항은 있다.

관련된 공부를 하지 않고서는 이 편리함을 누릴 수 없다.

 

귀차니즘의 해결이지, No Study & Easy Use는 아니다 !!!

 

 

반응형
저작자표시 비영리 변경금지

'Programming > Web' 카테고리의 다른 글

Vite로 React 앱 만들기  (0) 2024.11.07
npm, node 그리고 nvm  (0) 2023.01.04

우연히 보게된 노마드 코더(Nomad Coders)의 유튜브.

파이썬 코드만가지고 JS, React, NextJS 인터랙티브 웹앱을 만들어주는 프레임워크가 나타났단다.

 

 

최근 정말 많은 주목을 받고 있는 오픈소스 프로젝트인 것은 분명한 것 같다.

 

https://pynecone.io/

 

Pynecone: The easiest way to build web apps.

Completely customizable. All Pynecone components are fully customizable. Change the colors, fonts, and styles to match your project. Styling guide ->

pynecone.io

 

발음이 같은 'pinecone'을 상징하는 솔방울을 로고로 사용하고 있다 ^^

 

공식 웹사이트도 Pynecone을 사용해서 만들었다고 한다.

왠지 Unix is Not Unix 같은 느낌인데!? 아닌가?! ^^

 

 

Pynecone은 파이썬으로 작성한 코드를

React/NextJS로 컴파일을 하는 방식이기에 성능이 뛰어나며 그래서 node를 필요로 하고 있다.

 

보다 더 나은 성능을 위해 node를 bun으로 교체하는 작업을 하고 있지만

아직 100% 호환성을 보장하지 못하기에 당분간은 node를 계속 필요로 할 것이라고 한다.

 

 

서두가 길었다.

이제 직접 한 번 사용해보자.

 

 

이하 과정은 다음 링크의 내용을 따라갔다.

- https://pynecone.io/docs/getting-started/installation

 

 

0. PoC Environment

  - 이하 과정을 진행한 환경은 Ubuntu 20.04 64bit Desktop 이다.

 

 

2. Prerequisites

  - Python 3.7+

  - NodeJS 12.22.0+

 

  ① Python 여러 버전을 관리할 수 있는 pyenv 기반으로 설치해보자.

    . https://www.whatwant.com/entry/pyenv

    . 설치한 버전은 다음과 같이 했다.

      - v3.8.16

 

  ② node 설치도 여러 버전을 관리할 수 있는 nvm 기반으로 설치를 진행해보자.

    . https://www.whatwant.com/entry/npm

    . 설치한 버전은 다음과 같이 했다.

      - v18.15.0   (Latest LTS: Hydrogen)

 

 

3. Virtual Environment

  - Optional 이라지만, 사실 필수이지 않을까 싶다.

❯ cd ./workdir

❯ python -m venv .venv

❯ source .venv/bin/activate

 

 

4. Installing

  - 이제 pynecone 설치하면 된다!

❯ pip install pynecone

 

 

5. Create a Project

  - 일단 프로젝트 생성하는 방법부터 알아보자.

❯ mkdir my_app_name

❯ cd my_app_name

❯ pc init

 

 

6. Run the App

  - 일단 한 번 띄워보자.

❯ pc run

 

  - 브라우저로 확인해보자.

 

 

 

7. Edit

  - 본문을 살짝 살펴보자.

❯ nano my_app_name/my_app_name.py

  - 눈꼽만큼 변경해보자.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    pass


def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to WHATWANT!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

  - 포트도 변경하고, debug log도 찍어보자.

❯ pc run --port 8282 --loglevel debug

 

  - http://localhost:8282/

 

 

8. Fast Refresh

  - Pynecone은 실시간으로 변경 사항이 반영된다.

  - 웹브라우저가 띄워져 있는 상황에서, 다른 터미널로 파일을 수정해보자.

❯ nano my_app_name/my_app_name.py

 

  - 파일을 수정한 뒤, 저장을 하면 조금 있다가 브라우저에 자동으로 페이지 내용이 변경된다.

 

 

 

일단 여기까지 살짝 맛만 봤고

시간이 나면 다음 단계로 넘어가보겠다. (시간이 날까?! ^^)

 

반응형
저작자표시 비영리 변경금지

'Programming > Python' 카테고리의 다른 글

Python으로 Gmail 보내기  (7) 2023.06.25
Python BoilerPlate (파이썬 상용구)  (0) 2023.06.25
matplotlib에서 한글 폰트 출력하기 (colab, local)  (0) 2022.07.18
Ubuntu에서 Jupyter Notebook 설치하기  (0) 2022.07.17
Python으로 카카오톡 메시지 보내기 #1  (0) 2022.07.16

 

GitHub Pages 기능을 이용한 개인 포트폴리오 웹서비스를 해보려고

이것 저것 알아보던 중 몇 가지 템플릿을 찾았는데

 

사용법에 등장한 'npm'

 

"응?! npm을 설치해야겠구만!"

 

 

'npm'의 약자는 'Node Package Manager'이다.

 

즉, node.js 기반으로 미리 잘 만들어진 패키지들을 사용하고 싶을 때

의존성 있는 패키지들을 설치하려면 npm을 이용하면 된다.

 

 

다른 프로그래밍 언어들도 각자 나름의 패키지 매니저가 있다.

Language Package Manager
Ruby Gem
PHP Composer
C# NuGet
Java Jpm
Python pip

 

다시 npm 이야기로 돌아와서

node와 npm이 짝궁이라면 node만 설치해도 npm이 같이 설치가 된다는 말인데,

node를 설치하려고 봤더니 정말 다양한 버전의 node가 있다.

 

 

상황에 따라 여러 버전의 node를 사용하게 된다는 것인데,

하나의 시스템에서 여러 버전의 node를 사용하려면 귀차니즘이 발동할 수 있다는...

 

 

그래서, 여기저기 기웃거리다가 찾게된 'nvm'

 

'nvm'의 약자는 'Node Version Manager'이다.

 

 

 

nvm 저장소 주소는 다음과 같다.

  - https://github.com/nvm-sh/nvm

 

nvm

 

 

'nvm' 설치 방법은 다양하게 제공되고 있고

일반적으로는 'curl' 명령어를 이용해서 install script를 실행하는 방식을 가이드하고 있다.

 

하지만, 여기에서는 개인적인 취향으로

깔끔하게 git clone 받아서 직접 설치하는 방법으로 결정했다.

  - https://github.com/nvm-sh/nvm#git-install

 

 

이하 과정은 Ubuntu 20.04 LTS 환경에서 진행했다.

 

❯ git clone https://github.com/nvm-sh/nvm.git ~/.nvm

❯ cd ~/.nvm

❯ git switch -c v0.39.3 tags/v0.39.3

 

개인적으로 zsh을 사용하고 있으므로 이를 기준으로 해서 후속 작업 진행했지만,

bash를 사용하는 경우에도 동일한 과정이다.

 

❯ nano ~/.zshrc

 

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

 

위의 내용을 추가해주고, 터미널 재시작하면 'nvm' 명령어를 먹는다.

 

❯ nvm --version
0.39.3

 

nvm에서 설치 가능한 node version 목록을 확인하고 싶다면 다음 명령어를 사용하면 된다.

 

❯ nvm ls-remote

 

최신 버전의 node를 설치하려면 다음 명령어를 통해 가능하다.

 

❯ nvm install node
Downloading and installing node v19.3.0...
Downloading https://nodejs.org/dist/v19.3.0/node-v19.3.0-linux-x64.tar.xz...
####################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v19.3.0 (npm v9.2.0)
Creating default alias: default -> node (-> v19.3.0)

❯ node --version
v19.3.0

 

특정 버전의 node는 다음과 같이 설치할 수 있다.

 

❯ nvm install 14.7.0
Downloading and installing node v14.7.0...
Downloading https://nodejs.org/dist/v14.7.0/node-v14.7.0-linux-x64.tar.xz...
####################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.7.0 (npm v6.14.7)

❯ node --version
v14.7.0

 

앞에서 설치한 버전으로 변경하고자 한다면 다음과 같이 할 수 있다.

 

❯ nvm use node 19.3.0
Now using node v19.3.0 (npm v9.2.0)

❯ node --version
v19.3.0

 

어디에 설치되어 있는지(실행 파일의 위치를) 확인하고 싶다면 다음과 같이 하면 된다.

 

❯ nvm which 19.3.0
/home/chani22/.nvm/versions/node/v19.3.0/bin/node

 

어?! 여기서 잠깐 !!!

우리가 지금 여기까지 진행한 이유는 npm 설치를 하려던 것이다. npm을 확인해보자.

 

❯ node --version
v19.3.0

❯ npm --version
9.2.0

❯ nvm use node 14.7.0
Now using node v14.7.0 (npm v6.14.7)

❯ node --version
v14.7.0

❯ npm --version
6.14.7

 

중간에 node 버전을 변경해봤더니, npm도 버전이 바뀌었다는 것을 볼 수 있었다.

 

 

여기까지 해서 마무리~!!!

반응형
저작자표시 비영리 변경금지

'Programming > Web' 카테고리의 다른 글

Vite로 React 앱 만들기  (0) 2024.11.07
백엔드 프레임워크 - KeystoneJS  (1) 2023.07.13


기본 환경은

아래와 같이 준비해놓자


Minikube Install

- https://www.whatwant.com/entry/Minikube-install-in-Ubuntu-1804-in-VirtualBox


Node.js Install

- https://www.whatwant.com/entry/Nodejs-install-in-Ubuntu-1804




1. 준비


    - Minikube 시작해 놓고...


❯ minikube start


    - dashboard 띄워서 눈으로 보고...


❯ minikube dashboard


    - 웹서버 소스 파일 준비해놓고....


❯ nano ./server.js


var http = require('http');

var os = require('os');


var host = os.hostname();

var handleRequest = function(request, response) {

    console.log('Received request for URL: ' + request.url);

    response.writeHead(200);

    response.end('Server is running on: ' + host);

};


var www = http.createServer(handleRequest);

www.listen(8080);




2. docker 환경 맞추기


    - Minikube를 위한 docker 환경을 갖춰야 한다.


    - Minikube에서 요구하는 docker-env는 뭔지 확인해본다.


❯ minikube docker-env


export DOCKER_TLS_VERIFY="1"

export DOCKER_HOST="tcp://192.168.99.100:2376"

export DOCKER_CERT_PATH="/home/chani/.minikube/certs"

export MINIKUBE_ACTIVE_DOCKERD="minikube"


# To point your shell to minikube's docker-daemon, run:

# eval $(minikube -p minikube docker-env)


    - 뭘 해야하는지 밑에서 알려줬다.


❯ eval $(minikube -p minikube docker-env)


    - 잘 되었는지 확인해보자.


❯ docker images -a


REPOSITORY                                TAG                 IMAGE ID            CREATED             SIZE

gcr.io/k8s-minikube/storage-provisioner   v2                  9c3ca9f065bb        2 weeks ago         32.2MB

kubernetesui/dashboard                    v2.0.1              85d666cddd04        3 months ago        223MB

k8s.gcr.io/kube-proxy                     v1.18.3             3439b7546f29        3 months ago        117MB

k8s.gcr.io/kube-apiserver                 v1.18.3             7e28efa976bd        3 months ago        173MB

k8s.gcr.io/kube-scheduler                 v1.18.3             76216c34ed0c        3 months ago        95.3MB

k8s.gcr.io/kube-controller-manager        v1.18.3             da26705ccb4b        3 months ago        162MB

kubernetesui/metrics-scraper              v1.0.4              86262685d9ab        4 months ago        36.9MB

k8s.gcr.io/pause                          3.2                 80d28bedfe5d        6 months ago        683kB

k8s.gcr.io/coredns                        1.6.7               67da37a9a360        6 months ago        43.8MB

k8s.gcr.io/etcd


    - Minikube에서 쓰이는 아이들이 보이면 잘 된것이다.




3. Docker build


    - 준비되어있는 server.js 파일을 담는 docker 이미지를 만들어 보자


    - dockerfile 부터 만들어 보자.


❯ ls -al


합계 12

drwxr-xr-x 2 chani chani 4096  8월 22 04:59 .

drwxr-xr-x 3 chani chani 4096  8월 22 04:58 ..

-rw-r--r-- 1 chani chani  336  8월 22 04:59 server.js


❯ nodejs --version  


v12.18.3


❯ nano ./dockerfile


FROM node:12.18.3

EXPOSE 8080

COPY server.js .

CMD node server.js


    - 이제 빌드를 해보자.


❯ docker build -t whoru:v1 -f dockerfile .


Sending build context to Docker daemon  3.072kB

Step 1/4 : FROM node:12.18.3

12.18.3: Pulling from library/node

419e7ae5bb1e: Pull complete 

848839e0cd3b: Pull complete 

de30e8b35015: Pull complete 

258fdea6ea48: Pull complete 

ddb75eb7f1e9: Pull complete 

7ec8a0667334: Pull complete 

3366ea2fc4ca: Pull complete 

48116fadad2c: Pull complete 

27e46094f3f2: Pull complete 

Digest: sha256:d0738468dfc7cedb7d260369e0546fd7ee8731cfd67136f6023d070ad9679090

Status: Downloaded newer image for node:12.18.3

 ---> cfcf3e70099d

Step 2/4 : EXPOSE 8080

 ---> Running in 042f882d14c1

Removing intermediate container 042f882d14c1

 ---> 20836a2513a7

Step 3/4 : COPY server.js .

 ---> f0dd3d753786

Step 4/4 : CMD node server.js

 ---> Running in 252610e59ae9

Removing intermediate container 252610e59ae9

 ---> 3dcf96f4c978

Successfully built 3dcf96f4c978

Successfully tagged whoru:v1


    - 잘 만들어졌는지 확인해보자.


❯ docker images


REPOSITORY                                TAG                 IMAGE ID            CREATED              SIZE

whoru                                     v1                  3dcf96f4c978        About a minute ago   917MB

node                                      12.18.3             cfcf3e70099d        2 weeks ago          917MB

gcr.io/k8s-minikube/storage-provisioner   v2                  9c3ca9f065bb        2 weeks ago          32.2MB

kubernetesui/dashboard                    v2.0.1              85d666cddd04        3 months ago         223MB

k8s.gcr.io/kube-proxy                     v1.18.3             3439b7546f29        3 months ago         117MB

k8s.gcr.io/kube-controller-manager        v1.18.3             da26705ccb4b        3 months ago         162MB

k8s.gcr.io/kube-apiserver                 v1.18.3             7e28efa976bd        3 months ago         173MB

k8s.gcr.io/kube-scheduler                 v1.18.3             76216c34ed0c        3 months ago         95.3MB

kubernetesui/metrics-scraper              v1.0.4              86262685d9ab        4 months ago         36.9MB

k8s.gcr.io/pause                          3.2                 80d28bedfe5d        6 months ago         683kB

k8s.gcr.io/coredns                        1.6.7               67da37a9a360        6 months ago         43.8MB

k8s.gcr.io/etcd                           3.4.3-0             303ce5db0e90        10 months ago        288MB


    - 제일 위에 예쁘게 만들어져 있는 것을 볼 수 있다.





4. Pod 생성


    - 방금 만든 Docker image를 실행해 보자.


❯ kubectl run whoru --image=whoru:v1 --port=8080 --image-pull-policy=Never


pod/whoru created


    - dashboard에서 확인해볼 수 있다.



    - 물론 명령어로도 확인할 수 있다.


❯ kubectl get pods


NAME    READY   STATUS    RESTARTS   AGE

whoru   1/1     Running   0          3m28s



❯ kubectl describe pod whoru


Name:         whoru

Namespace:    default

Priority:     0

Node:         minikube/192.168.99.100

Start Time:   Sat, 22 Aug 2020 05:43:50 +0900

Labels:       run=whoru

Annotations:  <none>

Status:       Running

IP:           172.17.0.5

...




5. Service 생성


    - Pod만 가지고는 접근할 방법이 없다.

    - 연결고리 역할을 해주는 Service를 생성해보자.


❯ kubectl expose pod whoru --type=LoadBalancer


service/whoru exposed


    - 당연히 dashboard에서도 나타난다.



    - Service를 통해 접근이 가능한지 테스트 해보자.


❯ minikube service whoru


|-----------|-------|-------------|-----------------------------|

| NAMESPACE | NAME  | TARGET PORT |             URL             |

|-----------|-------|-------------|-----------------------------|

| default   | whoru |        8080 | http://192.168.99.100:31610 |

|-----------|-------|-------------|-----------------------------|

🎉  Opening service default/whoru in default browser...

 chani  /srv/workspace/server

❯ 기존 브라우저 세션에서 여는 중입니다.




다음 단계는 다음 포스팅으로~

반응형
저작자표시 비영리 변경금지

'잘난놈되기' 카테고리의 다른 글

Docker Hub 활용  (0) 2020.11.14
SiteMap  (0) 2020.08.30
Node.js install (in Ubuntu 18.04)  (0) 2020.08.22
의자 가죽 리폼 (피아노의자, 식탁의자)  (0) 2020.05.25
인터넷 속도 측정 사이트 (넷플릭스)  (0) 2020.03.14


Node.js를 사용할 일이 있어서 빠르게 찾아봤다.



Reference: https://github.com/nodesource/distributions/blob/master/README.md#debinstall




1. PPA 등록


    - curl도 싫어하고 ppa 등록하는 것도 싫어하지만...


> curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -




2. nodejs 설치


    - 이제 그냥 설치하면 된다.


❯ sudo apt install -y nodejs




3. Test


    - 잘 되는지 직접 해보자.


> nano ./server.js


var http = require('http');

var os = require('os');


var host = os.hostname();

var handleRequest = function(request, response) {

    console.log('Received request for URL: ' + request.url);

    response.writeHead(200);

    response.end('Server is running on: ' + host);

};


var www = http.createServer(handleRequest);

www.listen(8080);


> nodejs ./server.js


    - 웹브라우저로 살펴보자.




잘 된다!!!



반응형
저작자표시 비영리 변경금지

'잘난놈되기' 카테고리의 다른 글

SiteMap  (0) 2020.08.30
Minikube 실습 - Pod 생성 (docker build & kubectl run & service)  (0) 2020.08.22
의자 가죽 리폼 (피아노의자, 식탁의자)  (0) 2020.05.25
인터넷 속도 측정 사이트 (넷플릭스)  (0) 2020.03.14
Developer Survey Results 2019 (Stackoverflow)  (0) 2020.02.21

+ Recent posts

티스토리툴바