초학자에 의한 Docker 이해 정리 ③ ~nginx를 사용해 API를 proxy할 때까지~

소개



드디어 Docker를 배우기 시작했으므로 자신의 이해를 정리해 둔다.
마지막 => htps : // 코 m / 테 페후 rst 펜 군 / ms / 58 6bc5 a cf90dc497cb0
다음 번 => htps : // 코 m / 테 페후 rst 펜 군 / ms / b5f6 에 d253

오늘의 배우기 메모



로컬 PC에서 node.js에서 express를 실행하는 컨테이너와 nginx를 실행하는 컨테이너를 시작한다. 그리고 nginx를 통해 익스프레스 API를 두드린다. 단지 이것만을 docker-compose를 사용해 보았다.

마지막까지와 이번 차이



지난번 에서는 express의 컨테이너에 액세스하기 위해서 port를 지정할 필요가 있었다.
curl http://localhost:3000
Hello



이번에는 nginx의 proxy 기능을 사용하여 port를 지정하지 않고 express의 컨테이너에 액세스 할 수 있도록했다.
curl http://:localhost
Hello



개발의 전체 이미지


cd ~
mkdir sample

sample 디렉토리 안에서 개발한다. 디렉토리의 내용은 이런 느낌이 된다.
app 디렉토리와 web 디렉토리가 각각 express와 nginx의 컨테이너가 된다.


index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello').status(200);
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

express 백엔드 Dockerfile 준비


FROM node:alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .
# package.jsonをコピー後にnpm installするという作業をビルドの度に毎回やりたくない。
# そのため、上記を終わらせてから COPY. .をやる。
# そうすればコードを変えた部分だけビルドが実行される。

EXPOSE 3000
CMD [ "node", "index.js" ]

nginx.conf 준비



nginx 컨테이너 안의 localhost의 80port(즉 http의 디폴트 port)의 모든 엔드포인트(/)에 온 리퀘스트를 http://app:3000 에 proxy 한다.
Docker의 관리하에, app 컨테이너의 도메인이 app가 되고 있는 것에 주목.
덧붙여서, 이 설정 파일명은 nginx.conf 로 고정이라는 것. 배치 장소는 web 디렉토리 이하이면 특별히 신경 쓰지 않는다.

nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 1024;
}

http {
    # Weather Report Reverse Proxy
         server {
            listen 80;
            server_name localhost 127.0.0.1;

            location / {
                proxy_pass          http://app:3000;
                proxy_set_header    X-Forwarded-For $remote_addr;
            }

        }
}

docker-compose.yml 준비



docker-compose.yml
version: '3'
# 何も考えず3を指定
services:
  app:
    build:
      context: ./app
      # docker-compose.ymlから見て./appにあるDockerfileにしたがってビルドする
    container_name: express-app
    # 一応コンテナ名をつける
    ports:
      - '3000:3000'
      # docker run -p 3000:3000 app と一緒
    volumes:
      - './app:/usr/src/app'
      # ローカルPCの./appフォルダと、コンテナ内の ~/usr/src/appフォルダを同期させる。
      # docker exec -it express-app sh で確認できる

  web:
    image: nginx:latest 
    #nginx:alpilneだとエラーが起きるので、一応最新版で対応。
    container_name: nginx-web
    ports:
      - '80:80'
    volumes:
      - './web/reverse_proxy/nginx.conf:/etc/nginx/nginx.conf'
      # ローカルPCの./web/reverse_proxy/nginx.confと、コンテナ内の ~/etc/nginx/nginx.confを同期させる。
      # ~/etc/nginx/nginx.confは場所指定。
    links:
      - app
    depends_on:
      - app
      # appコンテナが起動しないと機能しない、という依存関係を明記。


docker-compose up 하고 끝


docker-compose up 그러면 컨테이너가 시작됩니다.
로컬 PC에서 curl 명령을 치면 app 컨테이너에서 대답이 돌아옵니다. 첫 번째 그림과 같습니다.
curl http://localhost
Hello

그건 그렇고, 앱 컨테이너에 직접 액세스 할 수 있습니다. 당연하지만.
curl http://localhost:3000
Hello

마지막으로



초보중의 초보를 정리했습니다.
덧붙여서, 자신은 몇번이나 해도 nginx가 잘 기동하지 않고 절망했지만, docker ps 하면(자) k8s_controller_ingress-nginx-controller 라고 하는 수수께끼의 컨테이너 멈추지 않는 것을 깨달았습니다. kubernetes를 다시 시작하면 고쳐졌기 때문에, 만약 그런 상황이 있으면 시험하는 것도 좋을까 생각합니다.



고마워요.

좋은 웹페이지 즐겨찾기