포트폴리오 사이트 만들기

취업활동 중 개인 포트폴리오 사이트를 만들어 운영해보라는 피드백을 받았다.
계속 미루다가는 끝이 없을것 같아 지금 바로 만들어 보겠다.

AWS를 통해 EC2 우분투 서버를 생성

탄력적 IP부여

AWS의 서버 인스턴스들은 재시작시 IP가 변경 될 수 있기에 탄력적 IP를 부여하여 IP를 고정시켜야한다.

추후 서버에 SSH 프로토콜을 통해 접속 할 것이기에 22번 포트의 접근을 허용해야한다.

Docker 설치

EC2 Instance Connect를 사용하여 내 서버에 접속 한 뒤 Docker를 설치한다(설치 방법은 공식 사이트의 방법을 참조했다. (https://docs.docker.com/engine/install/ubuntu/)

Nginx 설치

내가 만들려는 아키텍쳐는 아래 그림과 같기에 먼저 Docker를 통해 nginx를 설치하여 Web Server를 구성한다

proxy 서버가 없이 만들수도 있지만 proxy 서버를 통해 트래픽 분배, 보안, 캐시와 같은 이점이 존재하여 Nginx를 사용하였다.

설치 후 브라우저를 통해 접속해보니 잘 접속된다 ㅎ

nginx 설치후 서버에 부여한 탄력적 IP를 통해 브라우저로 접속하려 했는데 접속이 안된다... 다시 확인해보니 ssh 접속만 열어놔서 접속이 안되던것이였다 다시 80번 포트까지 열어 준 후 브라우저로 접속하니 잘 되었다.

백엔드 구성

운영서버를 만들었으니 서버에 올릴 프로젝트를 만들어보겠다
express-generator는 많이 사용되는 웹과 관련된 라이브러리들을 자동으로 포함하여 프로젝트를 생성 해 준다.
노션에서 제공해준 html을 그대로 사용 하기 위해 thymleaf 라이브러리를 사용하기 위해 express template engine은 생략하였다.

npx express-generator --no-view 

생성 된 프로젝트의 구조는 아래와 같다.
express-generator로 생성 할 시 public 폴더에서 image, html, css 파일들을 관리하지만 thymleaf를 사용 할 시 root directory 밑의 views에서 html 파일을 찾기에 views 폴더를 생성하고 노션의 html을 넣었다.

대신 views 폴더에서 정적 파일들을 관리 할 때 app.js에서 해당 코드를 추가해야지 css, image 파일들을 views 폴더에서 찾는다.

app.use(express.static('views'));

노션에서 변환된 html을 다 옮긴 후 실행 시 아래와 같이 잘 실행된다.

프로젝트 이름을 클릭 시 modal창으로 프로젝트를 출력하게 만들던 중 modal창에서 외부 링크를 클릭하면 아래와 같은 에러가 브라우저 콘솔에 출력된다..

해당 에러의 해결방법은 #해결방법을 클릭하여 확인 할 수 있다.

project들을 클릭하면 해당 웹 사이트에서 열리는 것이 아닌 notion링크로 이동하여 프로젝트들은 Modal 창을 통해 아래와 같이 출력하게 만들었다.

배포

백엔드 작업까지 완료되었으니 EC2 서버에 배포해 보겠다.

배포 방식은 위 이미지와 같이 만든 프로젝트에 Dockerfile을 추가 한 후 EC2서버에 올린 다음 Docker Engine과 Dockerfile을 통해 내 프로젝트를 Docker Image로 만든 후 Docker Container방법을 선택했다.

FROM node:18 ## node 18버전을 기반으로 이미지 생성
WORKDIR ./ ## 해당 폴더를 기준으로 이미지 생성 작업을 진행
COPY ./package*.json ./
RUN npm install --production  ## --개발에 필요한 의존성은 설치하지 않고, 배포에 필요한 의존성만 설치
COPY . . 
EXPOSE 3000 ## 3000번 포트로 개방
CMD ["npm", "start"] 컨테이너 시작 시 "npm start"라는 명령어 실행

이후 Docekerfile이 포함된 프로젝트를 Filezila를 통해 EC2서버에 전달한다.
연결 방법은 아래 이미지와 같이 진행하였다.

이후 EC2서버에 접속해서 Dockerfile이 위치한 프로젝트의 경로에서 Docerk Image를 생성하고 해당 이미지를 기준으로 Container를 생성한다

Docker build .  ## Dockerfile을 통해 Docerk Image를 생성
Docker run -p 3000:3000 "이미지 이름" ## Docker Image를 Container화

이후 EC2 IP의 3000번 포트로 접속하면 아래와 같이 내 프로젝트와 연결 되는것을 확인 가능하다.

Nginx 연결

앞서 설명한것처럼 사용자 요청시 직접 프로젝트로 요청을 보낼 수 있지만 Nginx의 reverse proxy를 사용하면 보안강화, 캐싱등의 이점이 존재한다.

nginx의 container로 접속 아래 경로의 default.conf를 아래와 같이 수정한다.

# /etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  my_site;

    location / {
        proxy_pass {프로젝트 주소}; ## 받은 요청을 프로젝트 주소로 보낸다
        proxy_http_version 1.1; 
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

참조(https://phsun102.tistory.com/47)

다시 Container를 재시작 한 뒤 nginx container의 포트포워딩을 80번으로 설정하였기에 포트번호를 생략하고 접속하여도 nginx의 reverse proxy를 사용하여 잘 접속하는것을 확인 가능하다.

DNS서버 등록(추후..)