땅지원
땅지원's Personal blog
땅지원
전체 방문자
오늘
어제
  • 전체 (353)
    • Frontend (2)
      • React (2)
    • Backend (90)
      • Java (16)
      • Python (19)
      • Spring (23)
      • Database (21)
      • Troubleshooting (8)
    • DevOps (27)
      • ELK (13)
    • CS (40)
    • OS (2)
      • Linux (2)
    • Algorithm (95)
      • concept (18)
      • Algorithm Problem (77)
    • 인공지능 (25)
      • 인공지능 (12)
      • 연구노트 (13)
    • 수업정리 (35)
      • 임베디드 시스템 (10)
      • 데이터통신 (17)
      • Linux (8)
    • 한국정보통신학회 (5)
      • 학술대회 (4)
      • 논문지 (1)
    • 수상기록 (8)
      • 수상기록 (6)
      • 특허 (2)
    • 삼성 청년 SW 아카데미 (6)
    • 42seoul (12)
    • Toy project (3)
    • 땅's 낙서장 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 20.11.6 BB21플러스 온라인 학술대회
  • 20.10.30 한국정보통신학회 온라인 학술대회

인기 글

태그

  • I
  • D
  • E
  • ㅗ
  • 이것이 리눅스다 with Rocky Linux9

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
땅지원

땅지원's Personal blog

[Jenkins] Jenkins로 nginx + react 빌드 및 배포하기
DevOps

[Jenkins] Jenkins로 nginx + react 빌드 및 배포하기

2023. 2. 3. 14:10

react 배포 준비

npm run build 명령어를 통해 frontend 프로젝트 build 진행
※
단, script에 따라 build 결과 생기는 디렉토리가 build가 아니라 dist나 다른 이름의 폴더일 수도 있음을 유의

 

Frontend의 Dockerfile과 Nginx 구성 파일을 작성

nginx.conf

server {
    listen 3000;
    location / {
        root /app/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

Dockerfile

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./dist ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

 

Nginx & SSL 설정

1. Nginx 설치
sudo apt-get install nginx

2. 설치 확인
sudo nginx -v

3. Nginx 중지
sudo systemctl stop nginx

4. Let’s Encrypt 설치
sudo apt-get install letsencrypt

5. 인증서 적용 및 .pem 키 발급(이메일, 서비스 이용동의 체크)
sudo letsencrypt certonly --standalone -d [도메인]
Congratulation!이라는 메시지와 함께 .pem키 발급이 완료된 것을 확인 가능

6. 발급 경로 확인(sudo su)
cd /etc/letsencrypt/live/[도메인]

7. Nginx 설정 파일을 작성
cd /etc/nginx/sites-available
sudo vim [파일명].conf

7. nginx 설정 파일

server {
        location /{
                proxy_pass http://localhost:3000;
        }

        location /api {
                proxy_pass http://localhost:8081/api;
        }
    

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/i8a704.p.ssafy.io/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/i8a704.p.ssafy.io/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
}

server {
    if ($host = i8a704.p.ssafy.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

        listen 80;
        server_name i8a704.p.ssafy.io;
    return 404; # managed by Certbot
}
9. 파일 연동 및 테스트(ok 나오면 됨)
sudo ln -s /etc/nginx/sites-available/[파일명].conf /etc/nginx/sites-enabled/[파일명].conf
sudo nginx -t

10. nginx 재시작
sudo systemctl restart nginx

11. nginx 상태 확인
sudo systemctl status nginx

 

jenkins에서 새로운 아이템을 만들어서 backend 설정과 동일하게 만들고

nodejs 플러그인을 받은다음 node를 넣어주고

 

execute shell에서는

cd /var/jenkins_home/workspace/auctopus-fe/frontend

ls

npm install
npm run build

docker images
docker ps -a

cat Dockerfile

docker build -t auctopus/fe .
docker run -p 3000:3000 --name frontend auctopus/fe

 

'DevOps' 카테고리의 다른 글

[Jenkins] Jenkins로 SpringBoot/Django/React 배포하기 (ver.2)  (1) 2023.03.22
[AWS] EC2 인스턴스(Ubuntu)에서 Docker 설치  (1) 2023.03.13
[Jenkins] Jenkins로 Springboot 빌드 및 배포하기  (0) 2023.01.26
[AWS] EC2 Instance에 MariaDB 설정하기  (0) 2023.01.26
AWS에 대해  (0) 2022.12.06
    'DevOps' 카테고리의 다른 글
    • [Jenkins] Jenkins로 SpringBoot/Django/React 배포하기 (ver.2)
    • [AWS] EC2 인스턴스(Ubuntu)에서 Docker 설치
    • [Jenkins] Jenkins로 Springboot 빌드 및 배포하기
    • [AWS] EC2 Instance에 MariaDB 설정하기
    땅지원
    땅지원
    신입 개발자의 우당탕탕 기술 블로그

    티스토리툴바