• 컴포넌트

  • 피그마 작업을 할 때, 원자성 형태로 요소들을 만들게 된다면, 재사용하기 편리하다고 했습니다.
  • 여기서 컴포넌트는 Vue.js에서 재사용 가능한 코드 블록을 나타냅니다.
  • Vue.js 앱은 작은 컴포넌트들의 조합으로 구성됩니다.
  • 각 컴포넌트는 자체 스코프를 가지며, 데이터, 메소드, 라이프사이클 훅 등을 정의할 수 있습니다.
  • 컴포넌트는 재사용성과 유지보수성을 높이는데 중요한 역할을 하게됩니다.

뷰 영역을 가기전, 자체 스코프, 데이터, 메소드 라이플사이트 훅 등을 이야기하고 넘어가겠습니다.

• 자체 스코프(Component Scope)

  • 이는 컴포넌트 내에서 정의된 변수, 함수, 메소드 등은 해당 컴포넌트 내에서만 유효하다는 말입니다.
  • 컴포넌트 간의 간섭을 최소화하는 데 도움이 됩니다.

• 데이터(Data)

  • 컴포넌트 내에서 사용되는 정보를 나타냅니다.
  • data속성을 사용하여 Vue 인스턴스 내부에 데이터를 정의할 수 있습니다.
  • 데이터는 Vue의 반응성 시스템에 의해 관리되며, 데이터가 변경될 떄 마다 화면이 자동으로 업데이트 됩니다.

• 메소드(Methods)

  • Vue 컴포넌트 내에서 사용되는 함수를 나타냅니다.
  • 메소드를 사용하여 사용자 이벤트에 응답하거나 데이터를 조작하는 등의 작업을 수행할 수 있습니다.

• 라이프사이클(Lifecycle)

  • Vue 컴포넌트가 생성되고 소멸될 때 발생하는 일련의 이벤트를 나타냅니다.
  • Vue 컴포넌트의 라이프사이클 이벤트는 생성, 갱신, 소멸 등의 단계로 구분됩니다.
  • 각 단계에서는 미리 정의된 훅(hook)함수를 사용하여 특정 작업을 수행할 수 있습니다.

    export default {
    created() {
      console.log('컴포넌트가 생성되었습니다.');
    },
    updated() {
      console.log('컴포넌트가 갱신되었습니다.');
    },
    destroyed() {
      console.log('컴포넌트가 소멸되었습니다.');
    }
    }

• 뷰(View)

  • 뷰는 사용자에게 보여지는 화면을 나타냅니다.
  • Vue.js에서는 뷰를 효과적으로 관리하기 위해 컴포넌트를 사용합니다.
  • 뷰는 사용자와 상호작용하며, 사용자 인터페이스를 나타내는 역할을 합니다.

• 정리

  • 컴포넌트는 뷰를 구성하는 작은 단위이며, 뷰는 이러한 컴포넌트들이 조합되어 사용자에게 보여지는 전체적인 화면입니다.

• Database "C:/Users/SSAFY/jpashop" not found, either pre-create it or allow remote database creation (not recommended in secure environments) [90149-224]

• 이렇게 jpashop이 없다고 할 때, 아래처럼 생성을 해주고, 접속해야했습니다.

• java.lang.IllegalStateException: Failed to load ApplicationContext for [WebMergedContextConfiguration@1a1c21b4 testClass = jpabook.jpashop.MemberRepositoryTest, locations = [], classes = [jpabook.jpash 블라블라

• 위 오류는, application.yml 에서, datasource에 MVCC=TRUE로 해주어서 생긴 에러였습니다. 해당 영역을 삭제하고 진행하니 문제해결 , 그리고 스프링 3. 버전이기에, H2버전도 2.2버전으로 사용했습니다.

  spring:
  datasource:
    url:  jdbc:h2:tcp://localhost/~/jpashop
    username: sa
    password:
    driver-class-name: org.h2.Driver

• Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended

• 단순 경고라고 하여, 무시

• 메타모스트 설정

  • 통합 접속

  • Incoming Webhook

- Webhook 추가하기
![](https://velog.velcdn.com/images/m_moon_c/post/3d4c35bf-3552-41a3-a2f6-2ee8a6235320/image.png)


- 정보 입력하기
![](https://velog.velcdn.com/images/m_moon_c/post/0a27b2e3-2009-43c2-ac4a-e55256804edf/image.png)


- 생성된 URL 복사하기 (젠킨스에 넣어줘야합니다.)
![](https://velog.velcdn.com/images/m_moon_c/post/dfa93560-a877-434a-a3c6-ec184ad11596/image.png)

• Jenkins 설정

  • Jenkins 관리에서 Plugin(Available plugins)에 Mattermost 검색 후 다운

    

  • Jenkins 관리(시스템System 설정) 가장 밑에 추가되어 있습니다.

• 파이프라인 수정

  • 파이프라인에서 stages {} 다음에 post{}코드를 넣어줍니다.
  • 직접 변경해줘야하는 곳 message와 endpoint는 URL넣어주고, channel은 해당 mattermost채널 넣어줍니다.

post {
    success {
        script {
            def Author_ID = sh(script: "git show -s --pretty=%an", returnStdout: true).trim()
            def Author_Name = sh(script: "git show -s --pretty=%ae", returnStdout: true).trim()
            mattermostSend (color: 'good', 
                message: "(프론트/백)빌드 성공: ${env.JOB_NAME} #${env.BUILD_NUMBER} by ${Author_ID}(${Author_Name})\n(<${env.BUILD_URL}|Details>)", 
                endpoint: '{Mattermost_Webhook_URL}', 
                channel: '{Mattermost_Channel_Name}'
            )
        }
    }
    failure {
        script {
            def Author_ID = sh(script: "git show -s --pretty=%an", returnStdout: true).trim()
            def Author_Name = sh(script: "git show -s --pretty=%ae", returnStdout: true).trim()
            mattermostSend (color: 'danger', 
                message: "(프론트/백)빌드 실패: ${env.JOB_NAME} #${env.BUILD_NUMBER} by ${Author_ID}(${Author_Name})\n(<${env.BUILD_URL}|Details>)", 
                endpoint: '{Mattermost_Webhook_URL}', 
                channel: '{Mattermost_Channel_Name}'
            )
        }
    }
}

Redis의 도커 설치 방법에 대해 설명하겠습니다.

레디스(최신버전) 불러오기

docker pull redis

레디스 이미지 확인하기

docker images

도커 볼륨 생성(로컬에서 Redis 서버에서 복제한 RDB를 관리하기 위해 볼륨을 생성)

docker volume create redis_data

도커 볼륨 MountPoint 확인

docker volume inspect redis_data

레디스 내부 설정과 관련한 파일인 redis.conf 생성해서 실행시 사용합니다.

sudo vim redis.conf

# 연결 가능한 네트위크(0.0.0.0 = Anywhere)
bind 0.0.0.0

# 연결 포트
port 6379

# Master 노드의 기본 사용자 비밀번호
requirepass redis

# 최대 사용 메모리 용량(지정하지 않으면 시스템 전체 용량)
maxmemory 2gb

# 설정된 최대 사용 메모리 용량을 초과했을때 처리 방식
# - noeviction : 쓰기 동작에 대해 error 반환 (Default)
# - volatile-lru : expire 가 설정된 key 들중에서 LRU algorithm 에 의해서 선택된 key 제거
# - allkeys-lru : 모든 key 들 중 LRU algorithm에 의해서 선택된 key 제거
# - volatile-random : expire 가 설정된 key 들 중 임의의 key 제거
# - allkeys-random : 모든 key 들 중 임의의 key 제거
# - volatile-ttl : expire time(TTL)이 가장 적게 남은 key 제거 (minor TTL)
maxmemory-policy volatile-ttl

# == RDB 관련 설정 ==
# 저장할 RDB 파일명
dbfilename backup.rdb
# 15분 안에 최소 1개 이상의 key가 변경 되었을 때
save 900 1
# 5분 안에 최소 10개 이상의 key가 변경 되었을 때
save 300 10
# 60초 안에 최소 10000개 이상의 key가 변경 되었을 때
save 60 10000
# RDB 저장 실패 시 write 명령 차단 여부
stop-writes-on-bgsave-error no

redis.conf 파일 경로 확인하기

sudo find / -name redis.conf

여기서 1번째는 도커 컨테이너의 데이터 볼륨이 있는 것이고, 2번째는 제가 직접 만든 redis.conf 파일의 경로입니다. /home/ubuntu/redis.conf 로 이용!

레디스 컨테이너 띄우기

docker run --restart=always -d --name redis -p 6379:6379 -v /home/ubuntu/redis.conf:/etc/redis/redis.conf -v /var/lib/docker/volumes/redis_data/_data:/data redis:latest redis-server /etc/redis/redis.conf

-v /var/lib/docker/volumes/redis_data/_data:/data 은 컨테이너 종료시 레디스에 저장해둔 데이터가 날라갈 수 있기에, 볼륨 마운트를 사용해 redis 컨테이너가 호스트 머신의 파일 시스템에 데이터를 쓸수 있게 만든겁니다.

포트는 6379

잘 설치 되었는지, redis-cli로 접근해보겠습니다.

docker exec -i -t redis redis-cli -a "비밀번호"

접속이 잘 되었고, ping을 입력하면 PONG이 나옵니다^^

도메인도 잘 접속된 것을 확인 할 수 있습니다.

여기서 잠깐, 8.0.36으로 다운받아서 도커도 설치하려는데 만약 docker pull mysql로 다운을 받게되면 8.3.0으로 받기때문에, 워커로 연결할 때 경고창이 뜬다. 만약 pull mysql로 진행하게 되었다면, 8.0.36의 mysql 컨테이너 안띄어진다. 그땐, 아래 사진 에 경로 /etc/mysql /var/lib/mysql /usr/sbin/mysqld mysqldata를 삭제해주고 컨테이너를 띄우면 해결된다. (8.3.0이 깔려있는데, 다운그레이드 하려고 보니 에러가 뜬 듯하다.! 디렉토리 어떤 것을 삭제하고 해결되었는지는 나중에 한번 더 검토해보겠습니다.)

도커에 mysql설치하기

 sudo apt-get update && sudo apt-get upgrade
 docker pull mysql:8.0.36

도커 mysql 이미지 확인

docker images

도커 컨테이너 띄우기

docker run -d -p 3306:3306 --name mysql-container -e MYSQL_ROOT_PASSWORD=비밀번호 -v ~/mysqldata/:/var/lib/mysql mysql:8.0.36 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

mysql 포트열어주기

sudo ufw allow 3306

ec2에서 MySQL접속해보기

docker exec -it mysql-container bash
mysql -u root -p
비밀번호입력

계정생성

create user '계정명'@'%' identified by '비밀번호';
select host, user from user;

계정에 권한 부여

grant all privileges on *.* to '계정명'@'%';

권한 부여 메모리에 등록

flush privileges;

권한 확인

show grants for '계정명'@'%';

포트번호 확인

show global variables like 'PORT';

MySQL Workbench 로 연결하기

처럼 해주고 TEST를 하게되면,

성공한 것을 볼 수 있다.

형태로 메인 도메인 서버에 location /jenkins로 진행하였습니다. 이렇게 되었을 경우는 예를 들어 /src/images/a.png 파일을 찾아서 보여줘야하는데, location block에 지정된 경로를 가지고 찾게 되기 때문에, /jenkins/src/images/a.png 형태로 찾기 때문에 오류가 나는 거라고 자문을 받았습니다.

여기서 알게 된 사실은

• 화면을 띄우는 페이지의 경우 location block이 아닌 서브도메인을 이용해 가능합니다.

입니다. 그래서 가비아 도메인을 이용한 서브도메인을 만드는 법을 정리해보고자 합니다.

이렇게 등록을 해주고, ec2 서버에서, certbot을 갱신해주는데,

sudo certbot --nginx -d www.블라블라.com -d jenkins.블라블라.com -d gerrit.블라블라.com

로 갱신해주었습니다. 그리고 , NginX sites-enabled 파일에서

server {
    if ($host = jenkins.블라블라.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80 ;
    listen [::]:80 ;
    server_name jenkins.블라블라.com;
    return 404; # managed by Certbot
}


server {

    #listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl http2; # managed by Certbot
    server_name jenkins.블라블라.com;
    ssl_certificate /etc/letsencrypt/live/www.블라블라.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/www.블라블라.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://127.0.0.1:7777; 
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

}

을 추가해주었습니다. (위 7777포트는 젠킨스 포트)

입력을 하고,

sudo systemctl restart nginx

NginX 재시작

접속완료!

/api처럼 화면을 보여주는 것이 아닌 경우에는 location block을 사용하는게 맞지만, 아무 생각 없이 젠킨스와 게릿을 추가하게 되어 오류가 났던 것 같습니다. NginX에 대해 더 심도깊은 공부를 해야한다는 필요성을 느꼈습니다.

새 창으로 열어서, 폴더 열기 -> 기본 경로 지우고 -> /etc/nginx 로 확인 하면 nginx 폴더가 열립니다^^

해당 파일을 열어서 작성하려면 ubuntu에게 권한을 줘야합니다.

sudo chown ubuntu:ubuntu /etc/nginx/sites-available/default

해당 명령어로 권한을 주었습니다.

EC2 Public ipv4 찾기

• 인스턴스 메타데이터 검색 https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/instancedata-data-retrieval.html
• 위에 자료에서 메타데이터를 확인할 수 있는 명령어가 있습니다.

  curl http://169.254.169.254/latest/meta-data

  

이렇게 메타데이터가 나오게 되며, 가비아 DNS에 넣을 public-ipv4를 다시 검색합니다.

curl http://169.254.169.254/latest/meta-data/public-ipv4

가비아 DNS 관리

위 사진에서 DNS관리 툴에 들어가, 1번영역은 호스트 @혹은 www로 입력하고, 2번 영역은 EC2에서 찾은 ip주소를 넣어주고, 3번,4번 선택한다.

이후 서버에서 certbot 을 해당 도메인으로 발급받고 nginx 구성요소를 수정해줍니다.

코드리뷰

프로그래머도 사람인지라, 코드리뷰를 하게되면 나에대한 평가로 느껴질 수 있습니다. 해당 Pn룰을 접목시켜서 코드리뷰를 진행하면 좋습니다.

• P1 : 이번에 반드시 반영되어야 하는 중대한 코드 수정 의견(Request Changes) 버그 가능성이 있거나 잘못된 구현인 경우, 만약 반영되지 않는다면 이에 대한 반대 의견도 낼 수 있어야 합니다.
• P2 : 적극적으로 이야기했으면 하는 의견(Request Changes) 잠재적인 이슈나 확장성을 고려해야 하는 경우. 토론하며 의견 조율할 수 있습니다.
• P3 : 가능하다면 반영해주었으면 하는 의견(Request Changes) 지금 구현보다 더 나은 방향이 있는 경우. 이번 반영이 어렵다면 다음 작업에서도 고려해볼 수 있도록 합니다.
• P4 : 다음에 반영해도 되는 의견 (Approve) 반영이 되지 않거나 반대 의견을 적극적으로 할 필요 없습니다.
• P5 : 사소한 의견(Approve) 무시해도 됨. 혹은 관련 나누고 싶은 점 나눌 수 있다.

nit 줄이기

• 사소하고 작은 문제로 주로 스타일 가이드 준수, 가독성 개선 등을 의미
• 전체적으로는 중요하지 않지만 품질 향상에 도움이 될 수 있는 부분에서 사용

크롬 익스텐션

• WorkerB for Pull requests
• PR 화면에 대략적인 리뷰 시간 계산, slack 공유용 링크도 자동으로 생성 해줍니다.

V2I통신

• Vehicle-to-Infrastructure (V2I)통신

  • 차량과 인프라간 무선통신 기술
  • 노변센서에서 도로 장애물 등을 검지하여 인접한 기지국을 통해 후방에 있는 모든 차량에게 주의, 운전 메시지를 차내단말기를 통해 제공하여 2차 추돌 사고를 예방
  • 도로 빙판/장애물 등으로 인한 교통사고 방지

V2V 통신

• Vehicle-to-Vehicle (V2V)통신

  • 차량과 차량간 무선 통신 기술
  • 전방차량의 급정거, 급감속, 차량 고장 등에 대한 정보를 후방차량의 차내단말기내에서 실시간으로 수신하여 서서히 감속하여 2차 사고를 방지하는 기술
  • 서해대교, 영종대교 등의 대형추돌사고 방지

V2X 통신

• Vehicle-to-Everything (V2X)통신

  • V2V 차량과 차량
  • V2D 차량과 오토바이,자전거
  • V2P 차량과 보행자
  • V2H 차량과 집
  • V2G 차량과 그리드(전봇대)
  • V2I 차량과 인프라

물리 계층 기술

Cooperative-ITS(C-ITS)

• V2X 통신을 도입한 차세대 지능형교통시스템

  • 차량이 주행 중 운전자에게 주변 교통상황과 급정거, 낙하물 등의 사고 위험정보를 실시간으로 제공하는 시스템

• 지능형교통시스템의 패러다임 변화

  • 사고 처리 -> 사고 예방
  • 대표 서비스
    • 위치기반 데이터 수집
      • 위치기반 교통정보 제공
      • 도로위험구간 정보제공
      • 노면 기상정보 제공
      • 도로작업구간 주행지원
      • 교차로신호위반 위험경고
      • 우회전 안전운행지원
      • 버스운행관리
      • 옐로우버스 운행 안내
      • 스쿨존 속도제어
      • 보행자 충돌방지 경고
      • 차량 추돌방지 지원
      • 긴급차량 접근경고
      • 차량 긴급상황 경고
      • 군집 주행
      • 군집주행 시스템
      • 차량을 열을 지어 이동하는 형태
    • 차량 거리를 좁히면 연료효율이 높아지고, 위치와 상태정보를 실시간으로 제공받아야한다. V2X차량거리 최소화 할 수 있는 군집주행이다.
      • 자율 협력 주행
      • 기존 차량에 라이다, 레이다, 카메라 설치된 차량 내에 V2X통신을 넣어 통신을 한다.

ETTIFOS 정구민 교수님 강연

과연 V2X가 필요한가? 자율주행 테스트하면서, 딜레마 존일 때 차량이 갈까 말까 급정거 하고 뒤로 가는 경우가 있는데, 신뢰주행에 있어 필요하다고 생각한다.

자율주행이 위기인가? 애플 자율주행 철수, 구글 웨이모 해고 진행, Argo AI 셧다운, GM 크루즈 하루 500만 달러 손실 자율주행이 기회인가? 완전 자율주행 단계 자동차사의 현실적인 자율주행 단계는 성장하고있다. 자율주행 프로세스와 라이다가 국내에 도입되어 , 고속도로에서 도심으로 들어오는게 얼마안남았다. 자율주행 EESW 구조 안정화 되어가고있다. 25~27년에 안정화가 될 것 같다. 테슬라 구조와 유사하며 도심 모델링 및 자율주행 서비스로의 진화 자율주행 발전이 엄청나게 속도를 붙으며 성장할 것이다.

CES 2023과 자율주행

• CV3-AD685, Ambarella, Inc.

  • AI도메인 컨트롤러 SoC 제품
  • CES 2023 미디어 데이에서 콘티넨탈과 협업 발표
  • 콘티넨탈 SDV의 자율주행 플랫폼 프로세서

• EyeQ5, Mobileye

  • Mobileye Drive와 SuperVision에 탑재되는 프로세서
  • ST마이크로일렉트로닉스와 공동개발

• Drive Orin, Nvidia

  • 자율주행 차량을 위한 SoC
  • 여러 자동차 어플리케이션을 병렬로 실행 가능
  • Volvo EX90 탑재

• Snapdragon Ride Flex, Qualcomm

  • 23년 1월 5일 공개한 차량용 SoC(24년 양산 예정)
    • 디지털 콕핏, ADAS, 자율주행 기능을 하나의 SoC에서 처리
  • 기존 Snapdragon Ride 플랫폼의 진화형

• 자율주행 센서의 진화

  • 주요 부품사 라이다 양산 발표

  • 차량의 다양한 위치에 부착되는 LiDAR

    • 지붕 앞부분(루미나, 이노비즈, 허사이, 이노뷰전)
    • 차창 내(셉톤, 와이드아이, 옵시스)
    • 헤드 램프(SOS랩)
    • 그릴(SOSLAB,AutoL,AEVA)
    • Ettifos

  • 세계 최초 5G NR V2X 모뎀 전시

  • ARM 계열 AP에 SW를 올려 V2X모뎀으로 사용이 가능한 플랫폼

  • LTE-V2X 방식에 비해 5배 더 빠른 속도

• 도심 주행과 V2X의 필요성

  • 사람이 직관적으로 판단하기 어려운 상황에 대하여 객관적인 정보와 판단 제공 기능
    • 전방 교촤로 좌우도로 차량 접근 시나리오
      • 전방 교차로 우회전 시 사각지대 사고차량 미인식 시나리오
      • 전방 사각지대에서 보행자 접근 시나리오
      • 전방 차량으로 인한 역주행 차량 미인식 시나리오
  • 딜레마 존 상황에서 V2X 기술의 필요성
    • 딜레마 존 : 신호가 황색으로 바뀌는 시간에 운전자가 교차로를 통과 혹은 정지하기를 결정하기 어려운 구간
    • V2X 통한 딜레마 존 극복
  • 도심 주행 최적화
    • 에너지 최적화
      • 인간이 운전할 때보다, V2X로 운전할 때의 에너지 절약 효율이 40%높다.

위 코드로 진행되었습니다. 단계는 6단계로,

1. Git Clone : Git 저장소에서 소스 코드를 가져옵니다.
2. Image Build & DockerHub Push : Docker 이미지를 빌드하고 DockerHub에 푸시합니다.
3. Before Service Stop : 이전에 실행된 Docker 컨테이너를 중지하고 제거합니다.
4. DockerHub Pull : 새로 업데이트된 Docker이미지를 서버로 가져옵니다.
5. Service Start : 새로운 Docker컨테이너를 시작합니다.
6. Service Check : 서비스가 올바르게 시작되었는지 확인합니다.

agent any : 어떤 에이전트에서든 실행될 수 있다. tools : 파이프라인에서 사용하는 도구 environment : 환경 변수 정의함. stages : 파이프라인의 주요 단계 정의 steps : 각 단계에서 실행할 명령, shell 스크립트로 실행됨.

• docker buildx create --use --name mybuilder

  • Docker Buildx 빌더를 생성하고 사용할 이름을 지정하는 명령
  • --use : 새로 생성된 빌더를 사용하도록 설정합니다.
  • --name mybuilder : 새로 생성된 빌더의 이름을 "mybuilder"로 지정합니다.
  • mybuilder 빌더를 사용하여 다중 아키텍처 이미지를 빌드할 수 있게 됩니다.

• docker buildx build --platform linux/amd64,linux/arm64 -t $imageName:latest --push .

  • Docker Buildx를 사용하여 다중 아키텍처 이미지를 빌드하고 푸시하는 명령
  • --platform linux/amd64,linux/arm64 : 빌드할 이미지의 플랫폼을 지정합니다. 여기서는 Linux의 amd64 아키텍처와 arm64 아키텍처를 지정했습니다. 즉, 이 명령은 amd64와 arm64 아키텍처용 이미지를 동시에 빌드합니다.
  • -t $imageName:latest : 빌드한 이미지에 태그를 지정합니다. $imageName은 환경 변수로 설정된 이미지 이름을 나타냅니다. latest는 태그로서, 이 이미지가 최신 버전임을 나타냅니다.
  • --push : 빌드된 이미지를 레지스트리에 푸시합니다.
  • . : 현재 디렉토리에서 Dockerfile을 사용하여 이미지를 빌드합니다.

• if test "`ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "docker ps -aq --filter ancestor=mooncheolhwan/frontend:latest"`"; then

  • 원격 서버에서 실행 중인 모든 컨테이너의 ID를 가져와서 filter 옵션을 사용하여 특정 이미지를 뽑아냅니다.
  • 필터된 ID가 mooncheolhwan/frontend:latest이면 아래코득가 실행됩니다.

• "ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "docker stop $(docker ps -aq --filter ancestor=mooncheolhwan/frontend:latest)"

  • docker stop 명령을 사용하여 원격 서버에서 실행 중인 특정 이미지를 기반으로한 컨테이너를 중지합니다.

• "ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "docker rm -f $(docker ps -aq --filter ancestor=mooncheolhwan/frontend:latest)"

  • docker rm -f 명령을 사용하여 원격 서버에서 실행 중인 특정 이미지를 기반으로한 컨테이너를 강제로 제거합니다.

• "ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "docker rmi mooncheolhwan/frontend:latest"

  • docker rmi 명령을 사용하여 해당 이미지를 원격 서버에서 제거합니다.

• ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker rm -f fe"

  • 원격 서버에 SSH를 통해 접속한 후, sudo docker rm -f fe 명령을 실행합니다.
  • 이 명령은 fe라는 이름의 Docker 컨테이너를 강제로 제거합니다.
  • -f 옵션은 강제로 컨테이너를 제거

• ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker run -i -e TZ=Asia/Seoul --name fe -p $releasePort:$releasePort -d $imageName:latest"

  • 원격 서버에 SSH를 통해 접속한 후, 새로운 Docker 컨테이너를 실행합니다.
  • -i : 인터랙티브 모드로 실행합니다.
  • -e TZ=Asia/Seoul : 컨테이너 내부의 시간대를 Asia/Seoul로 설정합니다.
  • --name fe : 컨테이너의 이름을 fe로 지정합니다.
  • -p $releasePort:$releasePort : 호스트의 $releasePort 포트를 컨테이너의 동일한 포트로 매핑합니다.
  • -d : 백그라운드 모드로 실행합니다.
  • $imageName:latest: 실행할 이미지의 이름과 태그를 지정합니다.
  • $imageName은 환경 변수로 설정된 이미지 이름을 나타냅니다.

마지막 step인 Service Check 코드에 대해 설명하자면,

• for retry_count in \$(seq 20): 20번의 반복을 수행하는 for 루프를 시작합니다.
• if curl -s "URL" > /dev/null: curl을 사용하여 특정 URL로 HTTP GET 요청을 보냅니다. -s 옵션은 silent 모드로 출력을 표시하지 않습니다. 응답은 /dev/null로 보냅니다.
• curl -d '{"text":"Release Complete"}' -H "Content-Type: application/json" -X POST 메타모스트 웹훅: Release Complete 메시지를 포함한 JSON 데이터를 지정된 웹훅 URL로 POST 요청을 보냅니다.
• break: 반복문을 종료합니다.
• if [ $retry_count -eq 20 ]: 20번의 시도가 모두 실패한 경우 실행합니다.
• curl -d '{"text":"Release Fail"}' -H "Content-Type: application/json" -X POST 메타모스트 웹훅 : Release Fail 메시지를 포함한 JSON 데이터를 지정된 웹훅 URL로 POST 요청을 보냅니다.
• exit 1: 스크립트를 종료하고 오류 코드 1을 반환합니다.
• echo "The server is not alive yet. Retry health check in 5 seconds...": 서버가 아직 준비되지 않았음을 나타내는 메시지를 출력합니다.

먼저 소스코드를 보여드리자면,

FROM node:20.11 AS build

RUN mkdir /app

WORKDIR /app

COPY package.json /app/

RUN npm install

COPY . /app/

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

입니다.

• FROM node:20.11 AS build

  • Node.js 20.11 버전을 기반으로 하는 Docker 이미지를 빌드 단계의 베이스 이미지로 사용
  • Node.js를 설치하고 애플리케이션을 빌드하기 위한 환경을 제공
  • AS build는 이 단계를 "build" 단계로 명명하는 것

• RUN mkdir /app

  • 컨테이너 내부에 "/app" 디렉토리를 생성
  • app 디렉토리는 애플리케이션 소스 코드 및 의존성을 저장할 곳

• WORKDIR /app

  • app 디렉토리를 작업 디렉토리로 설정

• COPY package.json /app/

  • 호스트의 "package.json" 파일을 컨테이너의 "/app/" 디렉토리로 복사
  • npm install을 실행하기 전에 package.json 파일을 이미지에 복사하여 종속 항목을 설치할 준비

• RUN npm install

  • package.json 파일에 명시된 종속 항목을 설치

• COPY . /app/

  • 현재 디렉토리의 모든 파일을 컨테이너의 "/app/" 디렉토리로 복사
  • 소스 코드 및 기타 모든 파일을 이미지에 추가하는 단계

• RUN npm run build

  • 해당 npm 스크립트에 정의된 대로, package.json 파일 내의 "scripts" 섹션에서 정의된 "build" 스크립트를 실행

• EXPOSE 3000

  • 컨테이너 내부의 3000번 포트를 외부에 노출
  • 애플리케이션이 컨테이너 내에서 실행 중인 경우 외부에서 액세스할 수 있도록 함

• CMD ["npm", "start"]

  • 컨테이너가 시작될 때 실행되는 명령어
  • 애플리케이션을 시작함

FROM node:lts-apline
WORKDIR /src
COPY package.json .
RUN npm install 
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]

으로 작성하여 진행했습니다.

여기서 젠킨스가 해당 도커파일을 읽을 때 계속해서 npm install을 시도하지만,

ERROR: failed to solve: process "/bin/sh -c npm install" did not complete successfully:

해당 에러가 나면서 젠킨스 fail이 되었습니다. 문제를 해결하기 위해 구글링도 하며, 도커파일을 수없이 변경하며 진행하였지만, 해결책이 없었고, 새로운 도커파일을 만들어서 진행해보았습니다.

새로운 도커파일

FROM node:20.11 AS build

RUN mkdir /app

WORKDIR /app

COPY package.json /app/

RUN npm install

COPY . /app/
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

위 파일 처럼, alpine을 없애고, 로컬에서 작업했던 노드 버전을 입력해주었습니다. 여기서, 위에 생긴 에러가 사라지게 되었고. 이전에는 초기상태라서 npm run build가 필요 없었지만, 프로젝트를 진행하면서 애플리케이션 파일을 생성하는 데 필요한 스크립트가 package.json의 scripts 섹션에 추가되어, npm run build를 넣었습니다.

정상작동 확인!

추가적으로, AutoML에 대해서 알아보겠습니다.

• AutoML

  • Automated Machine Learning

  • 기계 학습 모델을 자동으로 만들고 최적화하는 기술

    • AutoML이 수행할 수 있는 작업

  • 특성 공학(Feature Engineering)

    • 데이터의 특성을 분석하고 추출하여 모델에 적합한 형태로 변환

  • 모델 선택 및 구성(Model Selection and Configuration)

    • 여러 가지 다양한 모델 아키텍처를 탐색하고, 최적의 하이퍼파라미터를 찾아 성능을 극대화합니다.

  • 하이퍼파라미터 최적화(Hyperparameter Optimization)

    • 모델의 하이퍼파라미터 값을 최적화하여 모델의 성능을 향상시킵니다.

  • 앙상블 학습(Ensemble Learning)

    • 여러 모델을 결합하여 더 강력한 예측 모델을 생성합니다.

  • 모델 평가 및 선택(Model Evaluation and Selection)

    • 생성된 모델들을 평가하고 성능을 비교하여 가장 우수한 모델을 선택

• 종류

  • Google Cloud AutoML
  • Amazon SageMaker Autopilot
  • Microsoft Azure Automated Machine Learning

• TensorFlow

  • 구글에서 개발한 딥러닝 프레임워크
  • 이미지 객체 인식을 위한 다양한 모델을 구현
  • TensorFlow의 Object Detection API는 객체 감지 및 분류에 사용되며, 사전 훈련된 모델을 제공

• PyTorch

  • Facebook에서 개발한 딥러닝 프레임워크
  • 텐서플로우와 유사하게 이미지 객체 인식을 위한 모델을 구현할 수 있음.
  • PyTorch는 동적 그래프를 사용하여 모델을 정의하고 훈련시킬 수 있습니다.

이미치 처리 관련 라이브러리

• OpenCV

  • 컴퓨터 비전 및 이미지 처리를 위한 가장 널리 사용되는 라이브러리 중 하나
  • 객체 감지, 추적, 분할 등에 사용

• Pillow

  • 이미지 처리를 위한 파이썬 라이브러리
  • 이미지 로드, 저장, 변환 등의 작업을 수행

• 라이브러리는 재사용 가능한 코드 집합
• 특정 기능을 수행하기 위해 호출할 수 있는 함수와 클래스의 모음
• 프로그램의 다양한 부분에서 필요한 기능을 제공하거나, 특정 작업을 간편하게 처리할 수 있도록 도와줍니다.
• 개발자가 필요한 기능을 직접 호출하여 사용하며, 라이브러리는 프로그램의 제어 흐름에 직접적으로 영향을 주지 않습니다.
• NumPy, Pandas, OpenCV

프레임워크

• 애플리케이션의 구조를 정의하고, 개발자가 이 구조 안에서 자신의 코드를 작성하도록 하는 뼈대나 틀을 제공합니다.
• 특정 도메인이나 플랫폼에 맞춰진 기본 구조와 규칙을 제공하여 개발자가 이를 따르도록 유도합니다.
• 개발자는 프레임워크의 규칙과 구조에 따라 코드를 작성하고, 프레임워크가 제공하는 기능을 이용하여 애플리케이션을 개발합니다.
• 프레임워크는 일반적으로 제어 흐름을 포함하여, 개발자가 프레임워크의 규칙에 따라 작성한 코드를 호출하거나 확장할 수 있습니다.
• TensorFlow, Pytorch, Django

• 정리

  • 라이브러리는 개발자가 필요한 기능을 호출하여 사용하는도구
  • 프레임워크는 개발자가 구조와 규칙에 따라 코드를 작성하고, 제공하는 틀 안에서 애플리케이션을 개발하는 도구

검색 엔진 최적화는 아래요소들을 고려합니다.

• 키워드 최적화

  • 검색어를 조사하고 해당 키워드를 웹사이트의 콘텐츠에 적절하게 통합하여 검색 결과에서 상위에 나타나도록 합니다.

• 콘텐츠 품질

  • 코품질의 콘텐츠를 제공하여 사용자에게 가치를 제공하고, 검색 엔진이 해당 콘텐츠를 인식하고 평가할 수 있도록 합니다.

• 메타 태그 최적화

  • 페이지의 메타 태그(타이틀, 메타 설명, 키워드 등)를 최적화하여 검색 엔진에서 페이지를 적절하게 해석하도록 합니다.

• 사이트 구조 최적화

  • 웹사이트의 구조를 최적화하여 검색 엔진이 콘텐츠를 효과적으로 탐색하고 인덱싱할 수 있도록 합니다.

• 모바일 최적화

  • 웹사이트가 모바일 사용자에게 적합하도록 최적화하여 모바일 검색에서 높은 순위를 유지합니다.

• 사이트 속도 최적화

  • 페이지 로딩 속도를 개선하여 사용자 경험을 향상시키고 검색 엔진 순위에 긍정적인 영향을 미치도록 합니다.

• 내부 링크 구조

  • 내부 링크를 적절하게 사용하여 웹사이트의 다양한 페이지 간의 관계를 강조하고 검색 엔진이 페이지의 중요성을 이해할 수 있도록 합니다.

• 외부 링크 및 백링크

  • 다른 웹사이트로부터의 백링크(인터넷상에서의 다른 웹사이트에서 현재 페이지로 연결되는 링크)를 얻어서 검색 엔진에게 해당 페이지의 신뢰성을 높이도록 합니다.

정리) 검색 엔진 최적화는 웹사이트의 발견성과 가시성을 높이고, 검색 결과에서 높은 순위를 유지하는 데 중요한 전략입니다.

• 간결한 문법

  • 간결하고 직관적인 문법을 가지고 있습니다.
  • HTML, JavaScript, CSS를 기반으로 한 선언적인 문법을 사용하여 쉽게 이해하고 구현할 수 있습니다.

• 컴포넌트 기반 구조

  • Vue.js는 컴포넌트 기반의 아키텍처를 채택.
  • 애플리케이션을 작은 단위로 나누어 재사용성을 증가시키고 유지보수를 용이하게 만듭니다.

• 반응성(Reactivity)

  • 데이터의 변경에 반응하여 자동으로 화면을 업데이트할 수 있는 반응성 시스템을 제공합니다.
  • 양방향 데이터 바인딩을 통해 효율적인 상태 관리를 가능하게합니다.

• 유연한 라우팅

  • Vue Router를 사용하여 애플리케이션의 라우팅을 쉽게 구현할 수 있습니다. 라우팅을 통해 여러 페이지 간의 이동 및 상태관리가 가능합니다.

• 상태 관리

  • Vuex라는 상태 관리 라이브러리를 제공하여 중대형 애플리케이션에서의 상태 관리를 효율적으로 할 수 있습니다.

• 생태계

  • Vue.js는 다양한 플러그인과 라이브러리들이 있는 생태계를 가지고 있어, 다양한 요구사항에 대응할 수 있습니다.

Vue.js는 Vue CLI와 함께 사용되어 프로젝트 구조를 설정하고 개발 서버를 실행하는 등의 기능을 제공합니다.

Vuex와 Vue CLI에 대해 알아보겠습니다.

Vuex

• Vue.js 애플리케이션에서 상태 관리를 위한 라이브러리입니다.

• 애플리케이션의 상태를 중앙에서 관리하고 컴포넌트 간의 통신을 효율적으로 하기 위해 사요용됩니다.

• 대규모 애플리케이션 또는 상태가 복잡한 애플리케이션에서 유용합니다.

  주요 특징 및 개념

• 상태(State)

  • 애플리케이션의 상태를 단일 스토어에 저장합니다.
  • 이 스토어는 애플리케이션의 모든 컴포넌트에서 접근 가능하며 중앙에서 관리됩니다.

• 뮤테이션(Mutation)

  • 상태를 변경하는 유일한 방법으로, 뮤테이션을 통해 상태를 동기적으로 변경할 수 있습니다.
  • 뮤테이션은 변이를 추적하고 디버깅하기 쉽도록 기록됩니다.

• 액션(Action)

  • 비동기적인 작업이나 여러 뮤테이션들을 연속적으로 호출하는 작업을 수행할 때 사용됩니다.
  • 액션은 뮤테이션을 커밋하는 역할을 하며, 비동기 로직이나 비지역적인 상태 변경에 적합합니다.

• 게터(Getter)

  • 스토어의 상태를 가져오거나 계산된 값을 반환하는데 사용됩니다.
  • 게터는 컴포넌트에서 스토어의 상태를 읽을 때 유용합니다.

• 모듈(Modules)

  • 큰 규모의 애플리케이션에서 코드의 구조를 단순화하기 위해 모듈을 사용할 수 있습니다.
  • 모듈은 각자의 상태, 뮤테이션, 액션, 게터를 가지며, 하나의 스토어에 여러 모듈을 포함할 수 있습니다.

VueCLI

• 뷰 코어 인터페이스

• Vue.js 프로젝트를 구성하고 개발할 수 있도록 도와주는 커맨드 라인 인터페이스

• 프로젝트의 초기 설정부터 빌드, 테스트, 배포까지 다양한 작업을 지원하며, 프로젝트를 효율적으로 관리

  주요기능

• 프로젝트 생성 및 설정

  • vue create 새로운 프로젝트 생성, 초기설정

• 개발 서버 제공

  • vue serve 명령으로 로컬 개발 서버를 시작하여 실시간으로 변경 사항을 확인할 수 있습니다.

• 빌드 및 번들링

  • vue build 명령으로 프로덕션 빌드를 생성하고 번들링할 수 있습니다.

• 플러그인 관리

  • Vue CLI를 확장하기 위한 플러그인을 추가하거나 삭제할 수 있습니다.

• ESLint 및 Prettier 지원

  • 코드 스타일 및 품질을 유지하기 위한 ESLint, Prettier 설정이 내장되어 있습니다.

• 테스트 및 배포

  • 유닛 테스트와 E2E(End-to-End) 테스트를 실행하고, 배포를 위한 설정을 제공합니다.

Nuxt.js

• Vue.js 기반의 프레임워크
• Nuxt.js는 Vue.js의 생태계를 기반으로 하여 서버 사이드 렌더링, 정적 사이트 생성, 라우팅, 미들웨어, 상태 관리 등의 기능을 제공합니다.

주요 기능과 특징

• 서버 사이드 렌더링(SSR)

  • 초기 로딩 속도를 개선하고 검색 엔진 최적화를 강화할 수 있습니다.

• 정적 사이트 생성(SSG)

  • 페이지를 미리 렌더링하여 정적인 HTML파일을 생성하는 정적 사이트를 지원합니다.
  • 이를 통해 CDN(Content Delivery Nextwork)를 활용하여 성능을 최적화할 수 있습니다.
    • CDN은 전 세계에 분산된 서버 네트워크를 활용하여 콘텐츠를 효율적으로 제공하는 서비스.
      • 로드 밸런싱을 수행하여 서버의 부하를 분산시키고 대규모 트래픽을 처리할 수 있습니다.
      • CDN은 콘텐츠를 전 세계의 서버에서 캐싱하여 사용자들이 요청할 때 로컬 서버에서 콘텐츠를 제공합니다. 이를 통해 콘텐츠의 로딩 시간을 줄이고 대역폭을 절약할 수 있습니다.

• 인티그레이티드 라우팅

  • 파일 시스템 기반의 라우팅 설정을 제공하여 라우팅을 쉽게 구현할 수 있습니다.
  • 페이지의 구조를 기반으로 동적인 라우팅을 자동으로 처리합니다.

• 미들웨어

  • 서버와 클라이언트에서 실행되는 미들웨어를 정의할 수 있습니다.
  • 요청 처리 전에 특정한 작업을 수행하거나 페이지 렌더링 전에 데이터를 가공하는 등 다양한 용도로 활용됩니다.

• 자동 코드 분할

  • 페이지 단위로 코드를 분할하여 필요한 코드만 클라이언트에 전달하게 되어 초기 로딩 시간을 최적화할 수 있습니다.

• 상태관리

  • Vue.js의 Vues를 기반으로 한 상태 관리를 지원합니다.
  • 서버 사이드 렌더링 시에도 일관된 상태를 유지할 수 있습니다.

• 플러그인 시스템

  • 플러그인을 손쉽게 추가하고 관리할 수 있는 플러그인 시스템이 있습니다.

• ESLint 및 Prettier 지원

• 프로젝트 생성하는 방법

  • npm install -g create-nuxt-app
  • create-nuxt-app 프로젝트이름
  • 설정 옵션 선택
  • cd 프로젝트이름
  • npm install

Youtube에서 본 피케이의 Nginx에 대한 링크 https://www.youtube.com/watch?v=6FAwAXXj5N0&t=489s