Nginx를 사용한 이미지 서버 구축

Singsoong·2022년 11월 21일
4

기타

목록 보기
3/5
  • 사내 프로젝트 진행 중 프로젝트 내에 static한 이미지가 100장 이상 생겨 이미지를 따로 빼서 관리할 필요가 생겼다.
  • 매번 build할 때 이미지도 같이 build 되고, 관리하기도 힘들었다.
  • nginx 설정을 통해 EC2에 image server를 구축하려 한다.

📌 image 폴더를 서버로 전송

  • scp 명령어를 이용해 로컬에서 원격지인 서버로 이미지 폴더를 전송한다.
  • 이미지 폴더 이름은 images로 설정하였다.
  • scp (키가 있는 경우: -i "key.pem") -r images ${username}@x.x.x.x:원격지 경로

📌 Nginx setting

  • cd /etc/nginx/sites-available 에 있는 conf 파일을 수정해야 한다.
  • location /images { ... }를 추가한다.
  • alias에 아까 전송한 이미지 폴더의 경로를 입력한다.
server {
  listen      80;
  server_name ...;

  location / {
    root      /home/...;
    index     index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /images {
    alias /home/ssm-user/images;
  }
}
  • sudo ln -s /etc/nginx/sites-available/xxx.conf /etc/nginx/sites-enabled/ 입력하게 되면 sites-enabled 폴더에
    링크 생성 (기존에 enabled 폴더에 링크가 존재하면 지우고 명령어를 입력)
  • sudo service nginx restart 명령어를 통해 Nginx 서버 재시작

📌 확인

  • 서버의 도메인 뒤에 /images/이미지파일명을 입력해 확인하면 된다.
  • 구축 완료!

📌 이미지 사용

  • 코드에서 이미지를 사용하려면 이미지 URL 사용하듯이 하면 된다.
  • 예)
    <img src="https://.../images/reload.png" />

📌 참고한 사이트들

https://myjamong.tistory.com/35
https://velog.io/@jeff0720/2018-11-18-2111-%EC%9E%91%EC%84%B1%EB%90%A8-iojomvsf0n

profile
Frontend Developer

0개의 댓글