5. 로컬에 nginx(웹서버) 설치해보기 (Docker+Nginx_proxy+SSL+Github action)

728x90

🍺 이번에는 nginx라는 웹서버 프로그램을 로컬에 설치해 보도록 하겠습니다.

🍺 이를 위해 컴퓨터에는 당연히 도커 윈도우즈 프로그램이 설치되어 있어야 하며, 실행도 시켜놓아야 합니다.

1. docker 명령어로 설치하기

가. VS Code 프로그램에서 명령어를 입력할 터미널을 먼저 열어 줍니다.

나. 일반적으로는 이미지를 먼저 다운로드 후 컨테이너를 띄웁니다.

docker image pull nginx
docker run -p 80:80 nginx

하지만 두번째 줄만 입력해도 이미지가 컴퓨터에 있는지 확인 후 없으면 다운로드 후 컨테이너를 띄우게 됩니다. 따라서, 우리는 앞으로 아래와 같이 한줄만 입력을 하여 사용할 것입니다.

docker run -p 80:80 nginx

위 80:80 부분에서 앞부분 80이 웹브라우저에 입력할 포트입니다. 80은 기본이기 때문에 붙이지 않아도 되며, 다른 포트일 경우 '127.0.0.1:8080' 이런 식으로 붙여주어야 합니다.

docker run -p 8080:80 nginx

만약, 컨테이너를 삭제하지 않고, 아래와 같이 2줄을 모두 입력하였다면, 현재 nginx 웹서버 2대가 생성되서 각각 돌고 있는 것입니다. 포트를 바꾸어 준다면 서로 다른 웹서버 여러개를 동시에 띄울 수도 있는 것입니다.

docker run -p 80:80 nginx
docker run -p 8080:80 nginx

다. 위와 같이 nginx를 띄우면 도커 프로그램에 다음과 같이 보여질 것입니다. 현재는 앞에서 컨테이너 이름을 지정하지 않았기 때문에 이름은 무작위로 생성되어 있습니다.

✅ 서버에서는 명령어로 컨테이너 및 이미지를 실행, 재실행, 중지, 삭제 등을 합니다. 윈도우즈에서도 명령어로 가능하지만, 위 파란색 부분의 버튼을 눌러 컨테이너를 실행, 재실행, 중지, 삭제할 수 있습니다.

✅ 위 노란색 부분 Images 부분을 눌러보면 현재 컴퓨터에 저장되어 있는 이미지도 확인해 볼 수 있으며, 여기서 삭제를 할 수도 있습니다.

라. 이제 마지막으로 VS Code 에 docker extension을 설치해 볼 것입니다. 아래 화면처럼 확장을 눌러 docker를 검색 후 Microsoft Docker를 설치해 줍니다.

그럼 왼쪽에 도커 아이콘이 생성되며, 눌러보면 VS Code에서도 컨테이너, 이미지 등을 손쉽게 관리할 수 있습니다.

2. docker-compose.yml 파일을 작성해서 설치하기 (앞으로는 이 방식만을 활용할 것임.)

가. 먼저 docker-compose.yml 이름으로 파일을 하나 생성해 줍니다.

나. docker-compose.yml에 아래의 내용을 입력한 후 저장합니다.

version: '3.8'    

services:         
  web: 
    image: nginx
    ports: 
      - "80:80"

참고로, 위 내용은 앞에서 입력했던 'docker run -p 80:80 nginx' 내용과 완전히 동일한 내용입니다.

다. docker-compose.yml을 이용하여 컨테이너를 생성하는 방법

(방법1) 아래 터미널에서 docker-compose.yml 파일이 있는 같은 경로에서 아래와 같이 입력합니다.

docker compose up -d    //보통 -d를 보통 붙여줍니다. daemon 모드

(방법2) 탐색기에 있는 docker-compose.yml 에서 마우스 오른쪽을 눌러 Compose Up 을 선택해도 됨.

라. 결과

🔴🔴 문제점 => 웹서버는 띄웠으나, 현재는 우리가 앞으로 만들 웹페이지를 nginx를 통해 보여줄 방법이 없습니다. 그래서 현재의 로컬 컴퓨터의 특정 폴더와 nginx 컨테이너 내부의 웹 폴더를 서로 연결할 것입니다. 이렇게 되면 우리가 특정 폴더에 파일을 넣어두면 그것이 nginx 컨테이너 내부의 웹 폴더에도 똑같이 동일화 됩니다.

3. docker-compose.yml 파일 제대로 작성하기

가. 우선 탐색기에서 data 폴더를 만들어 줍니다.

나. data 폴더 안에 index.html 파일을 하나 만들고 아래처럼 적당히 내용을 입력해 줍니다.

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
    안녕하세요?
</body>
</html>

다. docker-compose.yml 수정

version: '3.9'

services: 
  web: 
    image: nginx
    ports: 
      - "80:80"
    container_name: nginx_cname   #컨테이너 생성 이름 지정
    restart: unless-stopped       #컨테이너를 직접 stop시키기 전에는 계속 재시작.
    volumes:                           #현재의 하위 디렉토리인 data와  
      - ./data:/usr/share/nginx/html   #nginx 컨테이너 내부의 기본 웹폴더인 
                                       #/usr/share/nginx/html와 연결

라. 앞에서 배운 'docker compose up -d' 명령을 입력하면 컨테이너가 재생성되며, 아래 화면처럼 브라우저에서 우리가 작성한 html 문서를 볼 수 있습니다.

마. 이제 data 폴더 밑의 index.html 파일을 수정, 저장을 한 후 브라우저를 새로고침하면 바로 변경이 됩니다.

4. docker-compose.yml 로 nginx 웹서버 2개 실행해보기

가. 먼저 두번째 웹서버와 연결할 data2 폴더를 생성해 준 후, 그 안에 index.html 파일을 생성하여 간단히 입력해 줍니다.

나. docker-compose.yml 파일을 수정해 줍니다. (web 부분을 통째로 복사하여 아래쪽에 붙여준 후 필요한 부분을 수정해 줍니다.)

version: '3.9'

services: 
  web: 
    image: nginx
    ports: 
      - "80:80"
    container_name: nginx_cname   
    restart: unless-stopped       
    volumes:                           
      - ./data:/usr/share/nginx/html   
  web2:                                 #서비스 이름을 위와 다르게 수정
    image: nginx                        #이미지는 nginx 그대로 사용
    ports: 
      - "8080:80"                         #포트 수정 필수 (뒤에 80은 그대로 놔둘 것)
    container_name: nginx_cname2        #컨테이너 생성 이름도 위와 다르게 수정
    restart: unless-stopped       
    volumes:                           
      - ./data2:/usr/share/nginx/html   #두번째 웹서버는 ./data2 폴더와 연결하였음.

✨ 위에서 둘다 모두 image: nginx 이미지를 동일하게 사용하고 있습니다. 같은 이미지에서 서로 다른 컨테이너를 여러개 생성할 수 있습니다. 또한, 이미 nginx_cname 컨테이너 생성시 이미지를 받아왔기 때문에, 두번째 nginx_cname2 컨테이너 생성은 아주 빠르게 생성됩니다.

✨ 위에서 'image: nginx' 라고 정의했지만, 이것은 사실 'image: nginx:latest'를 의미합니다. 이 외에도 특정 버전을 설치하고 싶다면, 'docker pull nginx:1.23.2' 이런 식으로 써도 되며, 이미지의 종류는 무척 많기에 그중에서 선택해서 적어주면 됩니다. 참고로 nginx의 이미지의 종류를 아래의 링크를 눌러 참고해 보시기 바랍니다.

https://hub.docker.com/_/nginx/tags

nginx Tags | Docker Hub

hub.docker.com

다. 이제 'docker compose up -d' 명령으로 컨테이너를 재생성합니다.

다. 이제 웹브라우저를 열고, http://127.0.0.1 과 http://127.0.0.1:8080 을 입력하여 접속하면 서로 다른 nginx 웹서버에 접속하는 것을 보실 수 있습니다.

🍺🍺 작업한 모든 소스는 아래 링크에서 확인하실 수 있습니다. 🍺🍺

https://github.com/mmssem/progstudy

GitHub - mmssem/progstudy

Contribute to mmssem/progstudy development by creating an account on GitHub.

github.com

🍺 목차 🍺(보시려면 아래 더보기 를 눌러주세요.)

2. Docker 설치 (Docker+Nginx_proxy+SSL+Github action)

3. MobaXterm (Docker+Nginx_proxy+SSL+Github action)

4. 도커를 이용하여 서버에 vnstat 설치 및 삭제하기(Docker+Nginx_proxy+SSL+Github action)

5. 로컬에 nginx(웹서버) 설치해보기 (Docker+Nginx_proxy+SSL+Github action)

6. 서버 자동 배포 (1) 로컬 => github (Docker+Nginx_proxy+SSL+Github action)

7. 서버 자동 배포 (2) 서버에 자동 배포를 위한 runner 설치

8. 서버 자동 배포 (3) 로컬 소스 -> git push -> github -> 서버 자동 배포 확인

9. (tip) git Add, Commit, push 한번에 하기

10. 서버 자동 배포 (4) 배포시 서버에서 docker-compose.yml 자동 실행

11. 서버에 vnstat 설치 (docker-compose.yml 이용)

12. 서버에 도커 설치시 network 설정 변경 사항 확인하기

13. nginx + php + mysql + phpmyadmin 설치하기

14. Nginx - Reverse Proxy, Load Balancing 기능 활용

15. 로컬에서 아이피 대신 도메인명 사용하기(hosts 수정)

16. https를 쓰기 위해 로컬에서 SSL 테스트 하기 (with mkcert)

17. 서버에 SSL 적용하기 (docker + Let's Encrypt + wildcard 인증서 + Cloudflare)

18. 와일드카드 인증서 자동 갱신(docker + Let's Encrypt + wildcard 인증서 + crontab)

728x90

저작자표시

'Docker (도커) > 서버구축(SSL)' 카테고리의 다른 글

7. 서버 자동 배포 (2) 서버에 자동 배포를 위한 runner 설치 (0)	2022.11.01
6. 서버 자동 배포 (1) 로컬 => github (Docker+Nginx_proxy+SSL+Github action) (0)	2022.10.30
4. 도커를 이용하여 서버에 vnstat 설치 및 삭제하기(Docker+Nginx_proxy+SSL+Github action) (0)	2022.10.29
3. MobaXterm (Docker+Nginx_proxy+SSL+Github action) (0)	2022.10.29
2. Docker 설치 (Docker+Nginx_proxy+SSL+Github action) (0)	2022.10.29

1. docker 명령어로 설치하기

2. docker-compose.yml 파일을 작성해서 설치하기 (앞으로는 이 방식만을 활용할 것임.)

3. docker-compose.yml 파일 제대로 작성하기

4. docker-compose.yml 로 nginx 웹서버 2개 실행해보기

'Docker (도커) > 서버구축(SSL)' 카테고리의 다른 글

티스토리툴바