K3S로 프로젝트 구성하기 - 7

1. 리액트 설치 후 빌드

// 노드 설치 후 리액트 앱 생성
npx create-react-app ecommerce-frontend

// index.js로 문구만 수정 한 다음 빌드
npm build

// 디렉토리구조는 다음과같이 되어있다.
// 깃허브 주소 : https://github.com/JEONSEUNGREE/ecommerce-frontend/tree/dev

 

2. nginx.conf 생성

// nginx.conf 파일 생성 ( package.json과 같은 위치에 생성한다 )
// 서버 포트 80으로 설정 따라서 추후 포워딩 포트는 80으로 해준다
server {
    listen 80;
    location / {
        root    /frontend/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

 

3. Dockerfile 생성

// nginx 이미지로 컨테이너 생성
FROM nginx:1.25.1
// 도커 내부에 디렉토리 생성
RUN mkdir -p frontend/build
// npm build 후 생성된 디렉토리를 도커 내부에 복사
ADD ./build ./frontend/build
// 기존에 설정 파일 제거
RUN rm /etc/nginx/conf.d/default.conf
// 미리 생성해 놓은 설정 파일을 nginx 설정파일로 변경
COPY ./nginx.conf /etc/nginx/conf.d
// nginx foreground 실행
CMD ["nginx", "-g", "daemon off;"]

 

 

4. 젠킨스 설정

 

4-1. 젠킨스 Nodejs 플러그인 설치

 

4-2. 전역 설정에 젠킨스 노드 버전 설정

( 설치한 node 버전에 맞춰서 진행 )

 

4-3. freestyle 프로젝트 생성

 

4-4. 빌드환경에서 노드 선택

 

4-5. 빌드스탭에서 스크립트 설정

npm install
npm run build

 

 

5. argoCD 배포

 

5-1. deployment yaml 생성

// 깃허브 주소 : https://github.com/JEONSEUNGREE/ecommerce-image-k3s/tree/dev
// ecommerce-frontend.yaml 파일 생성
apiVersion: apps/v1
kind: Deployment
metadata:
  name: ecommerce-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: ecommerce-frontend
  template:
    metadata:
      labels:
        app: ecommerce-frontend
    spec:
      containers:
      - image: acoursove2/k3s_frontend:latest
        name: ecommerce-frontend
        ports:
        - containerPort: 80

 

5-2. service yaml 생성

apiVersion: v1
kind: Service
metadata:
  name: ecommerce-frontend-svc-dev
  namespace: ecommerce-dev
spec:
  type: NodePort
  ports:
  - port: 80
    targetPort: 80
    protocol: TCP
    name: http
  nodePort: 30007
  selector:
    app: ecommerce-frontend

 

5-3. 포트 포워딩 

NodePort를 사용하여 포트를 포워딩해준다.

https://heehee-myblog.tistory.com/9

K3S로 프로젝트 구성하기 - 2