nuxt docker hub에 배포하기 - nginx

안녕하세요. 지난 글에서 도커 이미지로 빌드는 있는데 도커 허브에 push하는 연계가 없어 글을 작성하게 되었습니다.

 

로그 핸들링 센터를 테스트하기 위해 로그를 보낼 서버가 필요하여

웹 서버를 배포하는 작업을 진행하는 과정 중 하나입니다.

 

언급되는 기술

• Nginx
• nuxt.js
• Dockerfile with hub.docker.com

 

nginx를 container화 하고 docker hub에 push하는 과정입니다.

 

웹 서버에 배포하고 싶은 nuxt project는 있다고 가정합니다.

 

generate dist

yarn generate

// package.json 내용 중
// ...

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest"
  },

// ...

•  nuxt generate: 기본 설정의 경우 작성한 파일을 배포용 파일로 변환하여 dist 디렉터리를 생성합니다.

 

create Dockerfile

docker build . -t [CONTAINER NAME]

# Dockerfile 내용

FROM nginx

COPY dist /usr/share/nginx/html/learning-vuejs
COPY nginx.conf /etc/nginx/nginx.conf

• 이미지의 베이스는 `nginx`입니다.
• yarn generate 후 생성되는 배포 디렉터리입니다.
• nginx의 설정파일입니다.

 

create nginx.conf

Nginx 설정파일로 프로젝트가 추가될 때마다 설정에 추가하여 build할 목적으로 생성하였습니다.

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
    server {
        listen 80;
        server_name localhost;
        access_log /var/log/nginx/localhost.log;

        location /learning-vuejs/ {
            root html/learning-vuejs;
            index index.html;
        }
    }
}

• worker_processes: nginx가 os 코어에 알아서 맞춰 프로세스를 늘리라는 auto로 설정
• http > server : listen, log, request에 해당하는 response directory를 설정하였습니다.
• access_log & server_name: 로그의 세분화가 필요하나, 하나로 시작하기에 현재 테스트성으로 추가하였습니다.

 

결과 내용

위 세 개의 작업을 진행하시면 아래의 구조를 확인할 수 있습니다.

• portfolio: Dockerfile, pakge.json, dist 파일 및 디렉터리가 존재하는 곳입니다.
  • yarn generate
    • dist 디렉터리 생성 == (배포 파일 생성)
  • docker build . -t ps-nginx
    • Dockerfile container 생성하는데, (태그 -t) 이름을 ps-nginx으로 생성
  • docker run -d -p 80:80 --name ps-nginx ps-nginx
    • 컨테이너 실행 후 정상적으로 동작하는지 확인을 위한 실행
  • docker commit -m "add nginx container" -a "psawesome" ps-nginx psawesome/ps-nginx:latest
    
    • docker hub에 업로드 전 local storage에 container 반영
  • docker push psawesome/ps-nginx
    • hub.docker.com 에 이미지 push

   

위 내용의 상세 설명 및 이미지

 

yarn generate

 

 

docker build . -t ps-nginx

-t 이름을 지정하는 옵션입니다. 전 ps-nginx로 지정하였습니다.

 

docker run -d -p 80:80 --name ps-nginx ps-nginx:latest

deamon 모드,

컨테이너 port와 host port의 80 바인딩,

NAMES를 ps-nginx으로 설정, 

ps-nginx image를 실행

 

docker commit 

-m : 메시지,

-a : 작성자

ps-nginx: 이미지 이름 또는 이미지 hash code(스크린샷 기준으로 9bdb979bdb97f2cd8e 가능)

psawesome/ps-nginx: 작성자의 docker hub repository가 psawesome입니다. psawesome repository 안에 ps-nginx를 추가한다는 뜻입니다.

 

docker push

push를 하는데, psawesome repository에 ps-nginx로 push 한다는 뜻입니다.

 

최종 결과: hub.docker 화면

 

 

이제 AWS EC2 생성 후 해당 인스턴스에서 docker를 설치하고 아래 명령어를 입력하면 웹 서버가 활성화될 것입니다.

docker run -d -p 80:80 --name ps-nginx psawesome/ps-nginx:latest

 

이제 log를 집중화 서버에 보내는 작업이 필요할 것 같네요.

 

특정 다른 분에게 도움이 되길 바라며 글을 마치겠습니다.

 

감사합니다!

 

관련글

 

2021/01/10 - [Docker] - 코드 push하면 hub.docker 자동 빌드하기 - github