Nginx는 웹 서버 프로그램입니다. 로컬 환경에서 개발을 완료하셨다면 이제 본격적으로 우리가 만든 웹 애플리케이션을 도메인을 붙여 사용자에게 hosting을 해줘야 합니다. 웹 서버에는 크게 Apache와 Nginx가 있는데요, 후발주자임에도 빠르게 점유율을 차지하고 있는 Nginx와 Docker를 사용해서 간단한 웹 애플리케이션을 배포하는 방법을 알아보도록 하겠습니다.
Nginx Docker 기본
Nginx와 Docker로 정적 파일을 호스팅하기 위해서는 크게 3가지 파일이 필요합니다.
- index.html
- Dockerfile
- default.conf
우선 HTML 파일을 작성합니다. 저는 아래처럼 간단하게 작성했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
margin : 0;
}
body{
color : green;
}
</style>
</head>
<body>
Nginx에서 받아온 페이지입니다.
</body>
</html>
Dockerfile을 작성해줍니다. 혹시 Dockerfile을 작성하시는 법이 익숙하지 않으시면 아래 글을 참고해주세요.
- Docke Hub에서 nginx 이미지를 가져옵니다.
- 현재 Working Directory를 복사해서 nginx가 serve할 디렉토리로 이동합니다.
- Nginx를 실행합니다.
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
EXPOSE 9999
COPY ./nginx.conf /etc/nginx/conf.d/nginx.conf
COPY ./ /usr/share/nginx/html
ENTRYPOINT ["nginx","-g","daemon off;"]
마지막으로 Nginx 환경 구성 파일을 작성해줍니다.
server{
listen 9999;
root /usr/share/nginx/html;
}
도커 이미지를 build 해줍니다.
$ sudo docker build --tag <image name:tag> .REPOSITORY TAG IMAGE ID CREATED SIZE
nginx-image latest 8732cc022d0a 3 seconds ago 40.7MB
이미지를 실행해줍니다. 이미지를 실행할 때는 Docker Container 포트번호와 로컬 포트 번호를 연결해서 명령을 내려줍니다.
$ sudo docker run --name <container name> -p <로컬 포트>:<도커 포트> <이미지 이름>$ sudo docker run --name nginx-con -p 9999:9999 nginx-image:1.0.0
아래와 같이 localhost:9999로 접속하시면 Nginx에서 정상적으로 static file을 전달해주고 있습니다.
개발자 도구 > Network에서 response 항목에 보시면 Nginx에서 서버로 작동하고 있음을 확인할 수 있습니다.
Nginx location Docker
Nginx에서 라우팅을 적용하기 위해서는 location 블록을 사용해야 합니다.
위의 다른 파일들은 그대로 둔 채로 nginx.conf 파일을 수정해줍니다.
server{
listen 9999;
root /usr/share/nginx/html;
location /sub1 {
root /usr/share/nginx/html;
}
}
기존 폴더에 sub1이라는 디렉토리를 하나 생성하시고, index.html 파일을 생성해줍니다.
<!-- ./sub/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin : 0 auto;
background-color: #555;
color : white;
font-size : 30px;
}
</style>
</head>
<body>
<div>
This is sub directory index.html
</div>
</body>
</html>
위 과정대로 Dockerfile을 build 하시고, Image를 run 합니다. 자 이제 localhost:8888/sub1 으로 접속하면 우리가 만든 sub1 디렉토리 내의 index.html 파일이 로드됩니다.
위에서는 location에서 root를 사용했는데요, 직접 디렉토리를 지정해주기 위해서는 alias를 사용하시면 됩니다.
server{
listen 9999;
root /usr/share/nginx/html;
location /sub1 {
alias /usr/share/nginx/html/sub1;
}
}
동일한 결과값을 얻을 수 있습니다.
Nginx Docker 정리
이번 글에서는 Nginx와 Docker를 사용해서 간단하게 HTML 파일을 배포하는 작업을 알아보았습니다. 다음으로는 Nginx 문법과 React, Node.js로 구성된 웹 애플리케이션을 배포하는 방법에 대해 자세히 다뤄보도록 하겠습니다.
🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️
CI/CD #1 배포 구성하기 Node.js 빌드
CI/CD 서비스를 개발한 후 사용자에게 전달하기 위해서는 배포를 진행해야 합니다. 물리적인 서버를 구성해서 서비스를 배포하는 것 보다 AWS에서 제공하는 IaaS를 이용해 on demand 형식으로 서버를
about-tech.tistory.com
Nginx 란? 웹 서버 개념 이해하기
웹 서버란? 팀 버너스 리가 구축한 월드 와이드 웹(WWW)은 인터넷 네트워크에서 동작하는 프로토콜입니다. 인터넷에서는 클라이언트가 웹 서버에게 요청을 보내고 연결은 HTTP 프로토콜로 연결이
about-tech.tistory.com
[블록체인 만들기 #6] P2P 네트워크
블록체인에 참여하는 노드들은 스스로 클라이언트이자 서버가 됩니다. 모든 노드들이 동일한 체인을 보유해야 하기 때문에 broadcasting을 하게 되는데, P2P 네트워크를 WS와 HTTP 프로토콜을 이용해
about-tech.tistory.com
'Programming' 카테고리의 다른 글
| [티스토리 스킨 만들기 #1] 치환자 이해하기 (0) | 2023.06.09 |
|---|---|
| Github CLI Install Ubuntu 22.04 (0) | 2023.02.09 |
| Naver 광고 API 사용법 (Javascript) (0) | 2023.01.26 |
| CI/CD #5 배포 구성하기 Github Actions EC2 Docker .env 생성하기 [추가자료] (0) | 2023.01.20 |
| Docker Hub 사용법 (push pull) (1) | 2023.01.19 |
댓글