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로 하고 확장자는 없다. 아무 텍스트에디터를 실행해서 다음과같이 작성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
#
# 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
|
cs |
Maintainer은 이 파일의 작성자를 의미하는 주석같은 코드이다. 본인의 이름과 메일 주소를 작성하면 된다.
또한 주의할 점이 있는데, Dockerfile의 개행문자는 윈도우식인 (CR LF)로 하면 배포시에 오류가 생길 수 있다.
꼭 리눅스식인 (LF)로 해주어야한다. 이 부분은 Notepad++에서 바꾸어줄 수 있다.
다음으로는 nginx.conf 파일을 작성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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;
}
}
|
cs |
이 파일 또한 Dockerfile과 같은 레벨에 위치하게 한다.
다음으론 mime.types 파일을 작성한다. 이 파일 또한 Dockerfile과 같은 레벨이다.
|
1
2
3
4
|
types {
text/html html htm shtml;
text/css css;
}
|
cs |
여기까지했다면 이제 실행을 해볼 차례이다.
Dockerfile이 있는 폴더에서 마우스 우클릭을 해서 git bash를 실행한다.
bash창에 아래와 같이 입력한다.
docker build -t docker-static
docker run -p 8000:90 docker-static
이제 chrome이나 IE에서 localhost:8000을 입력해 들어가면 내가 작성한 웹페이지가 잘 보일 것이다.