Docker을 이용해 정적 웹페이지(SPA)를 localhost에서 보기

서론

 

오늘은 Docker를 이용해 정적 웹페이지를 위한 로컬 웹 서버를 제작해 보고자 한다.

물론 로컬에선 html파일을 크롬이나 IE에서 열어볼수있다.

하지만 실제 배포를 했을 때 내가 만든 페이지가 동일하게 보이는지 로컬에서 여는 파일론 알수가 없다. 

개발 중간중간 실제 배포시의 모습을 볼 수 있는건 상당히 의미가 있다.

 

가볍고 강력해서 가상머신보다 훨씬 많이 사용되고 있는 Docker를 사용해서 웹페이지 개발을 좀 더 편하게 해보자.

 

 

본론

 

우선 폴더를 하나 생성한다. 위치는 내 컴퓨터 어디라도 상관 없다.

이 글에선 kawa_web 이란 폴더를 만들었다.

 

이 kawa_web안에 web 이란 폴더를 또 만들어준다.

이 web 폴더 안에 내가 만든 홈페이지 코드 html, css, javascript를 모두 넣어준다. 

 

 

여기까지 했다면 이제 Dockerfile을 만들어준다. Dockerfile은 web 폴더가 아닌 kawa_web에 넣어준다. 

Dockerfile은 Dockerfile은 Docker 이미지 설정 파일이다. Dockerfile에 설정된 내용대로 이미지를 생성한다.

 

파일이름은 Dockerfile로 하고 확장자는 없다. 아무 텍스트에디터를 실행해서 다음과같이 작성한다.

 

#
# BudgetTracker Dockerfile for UI
#
FROM ubuntu:latest
MAINTAINER fakename "name@fake.com"
 
USER root
 
RUN apt-get update
RUN apt-get install -y nginx nodejs
 
# Remove the default Nginx configuration file
RUN rm -v /etc/nginx/nginx.conf
 
# Copy a configuration file from the current directory
ADD nginx.conf /etc/nginx/
 
ADD web /usr/share/nginx/html/
ADD web /var/www/html/
 
# Append "daemon off;" to the beginning of the configuration
RUN echo "daemon off;" >> /etc/nginx/nginx.conf
 
# Expose ports
EXPOSE 90
 
# Set the default command to execute
# when creating a new container
CMD service nginx start

 

다음으로는 nginx.conf 파일을 작성한다.

 

worker_processes 1;
 
events { worker_connections 1024; }
 
http {
    include    mime.types;
    sendfile on;
    server {
        root /usr/share/nginx/html/;
        index index.html;
        server_name localhost;
        listen 90;
    }
}

 

이 파일 또한 Dockerfile과 같은 레벨에 위치하게 한다.

 

다음으론 mime.types 파일을 작성한다. 이 파일 또한 Dockerfile과 같은 레벨이다.

 

types {
  text/html                             html htm shtml;
  text/css                              css;
}

 

여기까지했다면 이제 실행을 해볼 차례이다.

Dockerfile이 있는 폴더에서 마우스 우클릭을 해서 git bash를 실행한다. 

 

bash창에 아래와 같이 입력한다.

docker build -t docker-static

docker run -p 8000:90 docker-static

 

이제 chrome이나 IE에서 localhost:8000을 입력해 들어가면 내가 작성한 웹페이지가 잘 보일 것이다.