Nginx 설치?

유닉스 기반은 apt-get 이나 brew 같은걸로 설치할 수 있는데 윈도우는 페이지에 직접 들어가서 설치하고 하는 복잡한 과정이 필요한 것 같다. 그러니까 도커를 써보자

필요한 것

• build file :yarn 이나 npm build로 빌드파일을 만들어 준비한다
• docker
• nginx.conf :nginx에 적용하고 싶은 설정들을 작성해 놓는다.

Nginx가 무엇일까?

웹서버로 사용하는 reverse proxy server이다.

revers proxy?
-> 웹서버 앞단에 존재하여 먼저 사용자의 요청을 받고 처리해준다. -> 로드 밸런싱 기능도 가능

이렇게 reverse proxy를 사용하게 되면서 생기는 여러 장점들을 nginx가 갖게 되는데 그장점으로는

• 로드 밸런싱
• SSL 사용 가능
• 캐싱

apache랑은 무엇이 다른 것일까?

기존에 많이 쓰이던 apache server 같은 경우에는 요청을 받으면 웹서버 상에서 새로운 프로세스를 만들어 처리하였는데, nginx는 새로운 프로세스를 만들지 않고 기존의 프로세스를 그대로 사용한다. event-driven 방식으로 하나의 프로세스로 여러 요청에 대하여 비동기로 처리하게 되는 것이다. 그렇기 때문에 apache에 비하여 프로세스를 만드는 시간과 용량에 대한 비용이 줄어들게 되는 것이다.

docker 생성

FROM nginx:latest

COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

• FROM nginx:latest
  docker hub로 부터 nginx 최신버전 이미지로 부터 도커를 시작한다.

• COPY
  nginx에서 default 설정으로 html파일은 /usr/share/nginx/html에 config 파일은 /etc/nginx 폴더 밑에 있으면 실행이 될 수 있게 만들어져 있다. docker 상에서도 똑같은 폴더 구조를 갖기 때문에 만들어둔 파일,폴더들을 해당 위치에 들어가게 한다.
  html의 위치는 config 파일상에서 지정해줄 수 있다.

• CMD
  cmd 상에서 nginx를 실행시키는 command를 통해 nginx서버를 띄우는 것이다.

이제 도커 이미지를 이용해 컨테이너를 띄어보자.

docker build -t my-nginx-image .
docker run -p 80:80 --name my-nginx-container my-nginx-image

이제 localhost로 접속하면 우리가 만든 웹페이지가 나타날 것이다!

+)

docker build --no-cache -t my-nginx-image .  #도커 이미지를 같은이름으로 재생성 
docker stop my-nginx-container
docker rm my-nginx-container # 도커 컨테이너 재생성시 도커 컨테이너 삭제하고 생성

favicon?

docker build 후 확인했을 때 favicon이 안보이는 문제점이 발생하였다. index.html에서 확인해보면 baseurl을 기준으로 favicon 경로를 잡고있기 때문에, docker에 올라가면서 문제가 조금 생기는 것 같다. 이 경로를 상대경로로 바꿔주자.

SPA 문제

vue는 single page application으로 한번에 페이지를 로딩한다. 즉 유저가 서버에서 페이지를 받아오고, 새로고침 같은 행위를 하면 페이지 경로를 잃어버리게 된다. 이 문제를 해결하기 위해 다음과 같이 config 파일을 작성하다

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

try_files를 설정해주면 사용자가 요청하는 경로에 대해 앞에서부터 탐색하고 존재한다면 그 페이지를 반환해준다.
그렇기 때문에 try_files + local storage를 사용하면 사용자가 redirect를 하여도 기존 정보를 유지하면서 페이지를 보여줄 수 있게 되는 것이다.