배포, 운영

[배포] AWS EC2 생성 및 웹 프로젝트 배포

2024. 12. 16. 00:19
목차
  1. EC2 인스턴스 생성 및 설정
  2. 보안 그룹 설정
  3. SSH 접속 및 초기 설정
  4. Java 및 Spring 서버 설정
  5. Nginx 설치 및 Reverse Proxy 설정
  6. Vue 프론트엔드 배포

EC2 인스턴스 생성 및 설정

EC2 생성 과정

  • Amaozn Linux 2 vs Linux 2023에서 Linux 2를 선택한 이유
    • 아래글과 같은 오류도 있고 Linux2가 2018년 출시 이후 쌓아온 호환성과 풍부한 자료를 무시할 수 없다고 생각
      당장 linux 서버에서 최신 기술 적용할려 했던 프로젝트가 아니기 때문에 최신 기술 내용은 배제하고 선택함
 

AWS에서 Amazon Linux 2023 AMI를 사용 하면 안... - 인프런 | 커뮤니티 질문&답변

누구나 함께하는 인프런 커뮤니티. 모르면 묻고, 해답을 찾아보세요.

www.inflearn.com

생성 기본 설정

  • 인스턴스 유형
    • t2.micro(1 vCPU, 1GB RAM): 프리 티어 사용 가능
      단, Spring 서버를 장기적으로 운영할 경우 성능 한계가 있을 수 있음.
  • 스토리지 크기
    • 기본 설정 8GB 사용
  • 키 페어 생성 및 설정
    • EC2에 SSH로 접근하기 위해 키 페어 생성. 생성된 .pem 파일은 안전하게 보관

보안 그룹 설정

  • 필수 인바운드 규칙
    • 22: SSH 접속용
    • 80: HTTP 요청
    • 443: HTTPS 요청

SSH 접속 및 초기 설정

key.pem 권한 변경

  • 키페어 생성과 서버 생성을 진행하면 키 페어 파일이 다운로드 된다. 해당 파일은 많은 권한을 가지고 있어 추후 scp(복사 명령어) 진행시에 문제가 발생한다
  • 따라서 권한을 400으로 변경해야한다
  • 문제점1: window에서는 chmod 명령어 사용 불가능
  • 다음과 같은 명령어로 읽기 권한만 부여 필요(key폴더 위치에서 cmd열기)
icacls.exe key.pem /reset
icacls.exe key.pem /grant:r %username%:(R)
icacls.exe key.pem /inheritance:r
  • 적용 결과 확인: 아래 명령어 입력시 (R)권한만 표시되면 성공
icacls.exe key.pem

 

연결 확인

ssh -i path/your/keypem ec2-user@your/ec2-ip

 

Putty를 이용한 접속

다운로드 진행(방법은 아래 링크 참고)

 

[AWS] aws ec2 putty 접속 방법

ssh 접속에 이어 putty를 이용해 접속해보도록 한다.먼저 검색창에 putty를 검색해 사이트로 들어가 putty.msi 파일을 다운받은 후 설치해준다. 설치된 putty 폴더로 이동한다.먼저 PuTTYgen 프로그램을

mi2mic.tistory.com

  • ec2 keypem 파일을 pem → ppk파일로 생성하기
    • 이유: putty는 .ppk 방식으로 진행함
    • putty다운로드 위치에서 puttygen 실행 및 해당 pem파일 업로드(이때 파일 유형은 AllFiles로 검색)
    • 이후 save private key버튼 누르고 ppk파일 생성
  • putty에 해당 session 저장하기
    • session에 hostname에 ec2 ipv4주소 복붙 하고 savedSessions에 이름 추가 후 save
    • Connection-SSH-Auth-Credential에서 하단과 같이 해당 ppk파일 업로드

  • 이후 open클릭시 accept 할 수 있는 창 뜸 → 클릭 후 login as는 ec2-user 로 진행(ubutnu 인 경우에는 ubuntu, 하지만 우리는 amazon linux로 진행)

 


Java 및 Spring 서버 설정

Java 설치

  • 해당하는 OS에 맞춰서 설치 명령어 입력(하단 공식 페이지에서 명령어 참조)
 

Amazon Corretto 17 Installation Instructions for Amazon Linux 2 and Amazon Linux 2023 - Amazon Corretto 17

Amazon Corretto 17 Installation Instructions for Amazon Linux 2 and Amazon Linux 2023 This topic describes how to install and uninstall Amazon Corretto 17 on a host or container running the Amazon Linux 2 or Amazon Linux 2023 operating systems. Option 1: I

docs.aws.amazon.com

 

Spring 프로젝트 빌드 및 배포

1. Local 프로젝트에서 Build진행

.\mvnw.cmd clean package -DskipTests

2. Local에서 jar파일 실행 테스트

java -jar .\SpringFrameWorkTrip-0.0.1-SNAPSHOT.jar

3. jar 파일 서버로 복사

scp -i path\your\keypem C:\path\your\jarfile ec2-user@ec2-endpoint:/save/folder

4. 파일 실행

nohup java -jar ./SpringFrameWorkTrip-0.0.1-SNAPSHOT.jar > app.log 2>&1 &

 

 

관련 명령어

  • 실행 내용 보기
tail -f app.log
  • 파일 확인 및 실행 중지
# 실행중인 java파일들 불러오기
ps aux | grep java

# 해당 snapshot.jar파일 PID 중지 시키기(12345는 예시)
kill -9 12345
  • 삭제
rm app.log SpringFrameWorkTrip-0.0.1-SNAPSHOT.jar

 

Vue aixos 요청 URL 변경 필요

export default axios.create({
  baseURL: "http://your-ec2-ip:80/api",
  headers: {
    "Content-Type": "application/json",
  },
  withCredentials: true,
});

 

 


Nginx 설치 및 Reverse Proxy 설정

Nginx 역할

  • 동적인 api와 정적인 api를 구분하여 해당되는 파일 제공 또는 프로그램에 요청 전달

 

 

Nginx 설치 및 설정(Amazon Linux 기준)

  • 설치
sudo amazon-linux-extras enable nginx1
sudo yum install nginx -y

#설치후 설정 열기
sudo nano /etc/nginx/conf.d/spring-app.conf

 

  • 하단 내용 입력
    • location / 와 location /api/를 구분지어 동적, 정적 api를 구분
    • try_files $uri $uri/ 를 통해 새로고침 이후에도 index.html파일을 기준으로 해당 정적인 페이지 보여주게끔 유도
server {
    listen 80;
    server_name your-ec2-endpoint;

    # 정적 파일 제공
    location / {
        root /home/ec2-user/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # API 요청 프록시
    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

 

  • 명령어: 저장 및 나오기
    • Ctrl+O - 저장
    • Ctrl+X - 나오기
    • Ctrl+K - 한줄 삭제
  • nginx 재시작
sudo systemctl restart nginx

 


Vue 프론트엔드 배포

Vue파일 빌드 및 해당 서버에 전달

  • local에[서 파일 Build, dist폴더 생성
npm run build

 

  • 해당 서버로 폴더 복붙, scp -r 옵션시 폴더로 보내기 가능
scp -i path\keypam -r your\distfolder\path ec2-user@ec2endpoint:/save/folder/path

 

권한 문제 발생

  • 문제: dist 폴더 올려놓고 해당 ip로 접속했는데 403 forbidden 에러 발생
  • 문제 이유: nginx가 dist폴더 및 해당 경로에 존재하는 폴더 실행 권한이 없음
  • 해결책: 해당 경로로 가는 폴더 및 dist 폴더 실행 권한 부여 필요
sudo chmod +x /home
sudo chmod +x /home/ec2-user
sudo chmod -R 755 /home/ec2-user/dist
sudo chown -R nginx:nginx /home/ec2-user/dist
  • 해결 완료

 

 

 

저작자표시 (새창열림)

'배포, 운영' 카테고리의 다른 글

[배포] Jenkins설정 및 Gitlab Webhook을 통한 자동배포  (1) 2025.03.14
[배포] Github Actions 활용한 Spring 백엔드 자동배포  (1) 2024.12.28
[배포] Github Actions 활용한 Vue 프론트엔드 자동배포  (1) 2024.12.28
[도메인] 도메인 구입 및 DNS 설정  (3) 2024.12.16
[Ubuntu] Ubuntu 20.04서버 대기 모드로 들어가는 문제 해결  (1) 2024.05.23
  1. EC2 인스턴스 생성 및 설정
  2. 보안 그룹 설정
  3. SSH 접속 및 초기 설정
  4. Java 및 Spring 서버 설정
  5. Nginx 설치 및 Reverse Proxy 설정
  6. Vue 프론트엔드 배포
'배포, 운영' 카테고리의 다른 글
  • [배포] Github Actions 활용한 Spring 백엔드 자동배포
  • [배포] Github Actions 활용한 Vue 프론트엔드 자동배포
  • [도메인] 도메인 구입 및 DNS 설정
  • [Ubuntu] Ubuntu 20.04서버 대기 모드로 들어가는 문제 해결
Ash_jisu
Ash_jisu
JisuStoryAsh_jisu 님의 블로그입니다.
Ash_jisu
JisuStory
Ash_jisu
전체
오늘
어제
  • 분류 전체보기 (136)
    • 알고리즘 (68)
      • 자바 (68)
      • C++ (0)
    • 자바(Java) (18)
    • 스프링 (7)
      • 테스트 (3)
    • 데이터베이스 (3)
      • SQL (7)
      • JPA (1)
      • ElasticSearch (3)
    • CS (3)
    • 배포, 운영 (6)
      • Infra (3)
    • 디자인 패턴 (8)
    • 기타 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • API테스트 #Postman
  • 프로그래머스 #알고리즘
  • 백준 #BFS
  • db
  • 알고리즘 #bfs
  • Elasticsearch #Testcontainer #Test
  • 알고리즘 #다익스트라
  • Elasticsearch #최적화
  • BFS
  • 백준
  • swea #구현
  • 자바 #그리디
  • java
  • 코딩테스트
  • 자바 #백준
  • 백준 #DP
  • 배포
  • bfs #알고리즘
  • dp
  • 자바

최근 댓글

최근 글

hELLO · Designed By 정상우.
Ash_jisu
[배포] AWS EC2 생성 및 웹 프로젝트 배포
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.